Angular 4 routing is not working - javascript

Angular routing is not working.. here is the code
routs.ts: routing url definitions file.
import {BlankComponent} from "../layouts/blank.component";
export const routes=[
{
path:'',
component:BlankComponent,
children:[
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', loadChildren: '../pages/dashboard/dashboard.module#DashboardModule' }
]
},
{ path: '**', redirectTo: 'home' }
]
routes.module.ts: routing module
import {NgModule} from "#angular/core";
import {RouterModule} from "#angular/router";
import { routes } from './routes';
#NgModule({
imports:[RouterModule.forRoot(routes)],
exports:[RouterModule,]
})
export class RoutesModule{
constructor(){
}
}
Layout module:
import {NgModule} from "#angular/core";
import { RouterModule } from '#angular/router';
import {BlankComponent} from "./blank.component";
import {TopnavComponent} from "./topnav.component";
#NgModule({
declarations:[BlankComponent,TopnavComponent],
exports:[BlankComponent,TopnavComponent,RouterModule],
imports:[]
})
export class LayoutsModule{}
BlankComponent:
import {Component} from "#angular/core";
#Component({
selector:"sig-blank",
templateUrl:'./blank.component.html'
})
export class BlankComponent{}
App module:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import {LayoutsModule} from './layouts/layouts.module'
import {RoutesModule} from "./routes/routes.module"
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
LayoutsModule,
RoutesModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
blank.component.html
<div class="wrapper">
<section>
<div class="container">
<router-outlet></router-outlet>
</div>
</section>
</div>
app.component.html
<router-outlet></router-outlet>
This is the code i used in my project. but the routing is not working .
What is the wrong in my code. actually i have markup in my ./blank.component.html which i not included in the question. now the page displaying is the content in app.component.html only

You need to give the component name at {path:'home',component:ComponentName,loadChildren: '../pages/dashboard/dashboard.module#DashboardModule'}

Related

Angular 2 does not move to start page from AppComponent

I am trying to learn Angular 2 and play with it now. But I don't know why it doesn't go to start page from AppComponent. As long as I know, this has to move to test page and show "test" text. But when I run this, it only displays "Hello" which is app.component text. If I enter /test url, there is 404 error. Is this because the test component is not loaded successfully?
main.ts
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { routing } from './app.routing';
import { test } from './test';
#NgModule({
imports: [
BrowserModule,
routing
],
declarations: [
AppComponent,
test
],
providers: [
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
app.routing.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { test } from './test.index';
const routes: Routes = [
{ path: '', component: test },
{ path: 'test', component: test },
{ path: '**', redirectTo: '' },
];
export const routing = RouterModule.forRoot(routes);
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: `<h1>Hello </h1>`,
})
export class AppComponent { }
test.ts
import { Component } from '#angular/core';
#Component({
selector: 'test-app',
template: `<h1>test </h1>`,
})
export class test {}
Include '<router-outlet></router-outlet>' in your appcomponent template:
<div>
<h3>App component</h3>
</div>
<div>
<router-outlet></router-outlet>
</div>
It looks like you need to provide a <router-outlet></router-outlet> in your app.component.ts template.
So the test component isn't being loaded because it can't inject the component into anything without the <router-outlet>.
https://angular.io/tutorial/toh-pt5#add-routeroutlet

Angular 2 router error

I created Angular 2 router module but it doen't work at the moment and I get an error when I want to open link /city 'ERROR Error: Uncaught (in promise): Error: Cannot activate an already activated outlet
Error: Cannot activate an already activated outlet'
But I can open this link manually
Here is the code of:
Router module
import { NgModule }from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import {WeatherListComponent} from "../weather-list/weather-list.component";
import {AddedCityComponent} from "../added-city/added-city.component";
import {AppComponent} from "../app.component";
const routes: Routes = [
{ path: '', redirectTo: '/weather-list', pathMatch: 'full'},
{ path: 'city', component: AddedCityComponent },
{ path: 'weather-list', component: WeatherListComponent }
];
#NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
2) Appmodule
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import {BrowserAnimationsModule} from '#angular/platform-browser/animations';
import {MdButtonModule, MdCheckboxModule, MdCardModule, MdInputModule} from '#angular/material';
import {NgbModule} from '#ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
import { WeatherListComponent } from './weather-list/weather-list.component';
import { WeatherService } from './service/weather.service';
import { WeatherSearchComponent } from './weather-search/weather-search.component';
import { CloudsComponent } from './clouds/clouds.component';
import { SunComponent } from './sun/sun.component';
import { RainComponent } from './rain/rain.component';
import { AddedCityComponent } from './added-city/added-city.component';
import { AppRoutingModule } from './service/app.routing';
#NgModule({
declarations: [
AppComponent,
WeatherListComponent,
AddedCityComponent,
WeatherSearchComponent,
CloudsComponent,
SunComponent,
RainComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
BrowserAnimationsModule,
MdButtonModule,
MdCardModule,
MdInputModule,
NgbModule.forRoot(),
AppRoutingModule
],
providers: [
WeatherService
],
bootstrap: [AppComponent]
})
export class AppModule { }
3) AppComponentHTML
<div class="page-wrapper" [ngClass]="{
'sun-background': weatherDesc == 'Clear',
'rain-background': weatherDesc == 'Rain',
'clouds-background': weatherDesc == 'Clouds'
}">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<header>
<div class="header-wrapper">
<h3 class=" text-left">Weather App</h3>
<a routerLink="/city" routerLinkActive="active">cities</a>
<a routerLink="/weather-list" routerLinkActive="active">weather</a>
<app-weather-search></app-weather-search>
</div>
</header>
</div>
</div>
</div>
<!--<app-weather-list (notify)="background($event)"></app-weather-list>-->
<!--<app-weather-list></app-weather-list>-->
<router-outlet></router-outlet>
</div>
try
const routes: Routes = [
{ path: 'city', component: AddedCityComponent },
{ path: 'weather-list', component: WeatherListComponent },
{ path: '', redirectTo: '/weather-list', pathMatch: 'full'}
];
and move appRoutingModule to the start of the list in the imports declaration
i see that you don't have router-outlet in your App component. Try to copy this code in your app.component.html :
<router-outlet></router-outlet>
then try to enter to open links.
Remove the leading slashes in the /weather-list to weather-list. This will make the first path work which might be causing the problem. Just try this out and let me know.
It looks as though your routerLinks are not setup correctly in the component html.
Try changing your link tags from ...
<a routerLink="/city" routerLinkActive="active">cities</a>
<a routerLink="/weather-list" routerLinkActive="active">weather</a>
To ...
<a [routerLink]="['/city']" routerLinkActive="active">
<a [routerLink]="['/weather-list']" routerLinkActive="active">
You might also try removing the .forRoot on your routing module import, I am not sure that it is necessary in this case.

'router-outlet' is not a known element Angular2

Repo: https://github.com/leongaban/lifeleveler.io
Not sure why I'm getting this error, I have Router imported in my app.component.ts
I'm trying to use the app.component to hold the main <router-outlet>, and serve up the login view first.
app.module
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { RouterModule } from '#angular/router';
import { routing } from './app.routing';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { AuthService } from './shared/services/auth.service';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
import 'rxjs/add/observable/throw';
#NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule,
routing
],
declarations: [
AppComponent,
LoginComponent
],
providers: [
AuthService,
],
bootstrap: [ AppComponent ]
})
export class AppModule {}
app.component.ts
import { Component, OnInit } from '#angular/core';
import { User } from './shared/models/user';
import { Router } from '#angular/router';
#Component({
selector: 'my-app',
templateUrl: './app/app.component.html',
styleUrls: ['./app/app.component.css']
})
export class AppComponent implements OnInit {
ngOnInit() {
}
}
app.component.html
<router-outlet></router-outlet>
app.routing.ts
import { ModuleWithProviders } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { LoginComponent } from './login/login.component';
export const routes: Routes = [
{
path: '',
redirectTo: '/login',
pathMatch: 'full',
},
{
path: 'login',
component: LoginComponent
}
]
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
I just refactored your project with webpack , your same code works just fine:
github repo
first :
npm install -g #angular/cli
npm install
ng serve
It looks like you might be importing the RouterModule multiple times.
I would remove this line from your app.routing.ts
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
In your app.module I would import your routes with:
import { routes } from './app.routing';
And then import the RouterModule as:
RouterModule.forRoot(routes)
You should add the RouterModule.forRoot(routes) statement inside your AppModule:
#NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(routes)
],
declarations: [
AppComponent,
LoginComponent
],
providers: [
AuthService,
],
bootstrap: [ AppComponent ]
})
export class AppModule {}
and remove it from your app.routing.ts file:
export const routes: Routes = [
{
path: '',
redirectTo: '/login',
pathMatch: 'full',
},
{
path: 'login',
component: LoginComponent
}
];
Just import RouterOutlet
import { RouterOutlet } from '#angular/router';

The selector "login-app" did not match any elements while using different component Angular 2

I have a component in angular 2 as shown below
login.component.ts
import { Component } from '#angular/core';
import { LoginViewModel } from "../ViewModel/Login.ViewModel";
import { LoginService } from "../Service/Login.Service";
#Component({
selector: 'login-app',
templateUrl: 'Account/partialLogin',
providers: [LoginViewModel, LoginService]
})
export class LoginComponent {
constructor(private loginservicemodel: LoginService, private model: LoginViewModel) {
this.model.userName = 'erere#ada.com';
this.model.password = "test anand";
}
save(modelValue: LoginViewModel, isValid: boolean) {
if (isValid) {
this.loginservicemodel.loginHttpCall();
}
}
}
Home.Component.ts
import { Component } from '#angular/core';
#Component({
selector: 'Home-app',
template: `
<h1>Angular Router</h1>
<nav>
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
</nav>
<router-outlet></router-outlet>
`
})
export class HomeComponent {
}
The appModule.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { RouterModule, Routes } from '#angular/router';
import { HttpModule, JsonpModule } from '#angular/http';
import { LoginComponent } from "./Components/login.Component";
import { HomeComponent } from "./Components/home.component";
const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'Account/Login', component: LoginComponent }
];
#NgModule({
imports: [BrowserModule, FormsModule, HttpModule, JsonpModule, RouterModule.forRoot(appRoutes)],
declarations: [LoginComponent, HomeComponent],
bootstrap: [HomeComponent]
})
export class AppModule { }
login.cshtml
#{
ViewData["Title"] = "Login";
}
<login-app>looding...</login-app>
partialLogin.cshtml
<router-outlet></router-outlet>
<p>THis is test</p>
Routing
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
routes.MapRoute(
name: "spa-fallback",
template: "{*url}",defaults: new { controller = "Home", action = "Index" });
});
I have use the angular 2 routing as you can see in the appmodule.ts.If I navigate to homepage i,e Home/Index I will get an error as The selector "login-app" did not match any elements and when I navigate to Account/Login I will get an error as The selector "Home-app" did not match any elements.I know the the condition on appmodule is not working. How can I make this work. Please anyone can solve this issue
you are getting this error because you didn't import all your other component in you ngModule file. add them in declaration just like you have imported LoginComponent
#NgModule({
imports: [BrowserModule, FormsModule, HttpModule, JsonpModule],
declarations: [LoginComponent],<-- add all your component here
bootstrap: [LoginComponent]
})
export class AppModule { }
Below is an example of how to add route in Angular2:
//Create new app.module.ts file
import { ModuleWithProviders } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { LoginComponent } from './Components/login.Component';
const appRoutes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'login', component: LoginComponent}
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
//Import the above define route in your App module
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { HttpModule, JsonpModule } from '#angular/http';
import { LoginComponent } from "./Components/login.Component";
//Import your route file
import { routing } from './app.routing';
#NgModule({
imports: [BrowserModule, FormsModule, HttpModule, JsonpModule,routing,],
declarations: [LoginComponent],
bootstrap: [LoginComponent]
})
export class AppModule { }
Finally the working code.Call the respective selector in HTML page
AppModule.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { RouterModule, Routes } from '#angular/router';
import { HttpModule, JsonpModule } from '#angular/http';
import { ModuleWithProviders } from '#angular/core';
import { AppComponent} from "./app.component";
import { LoginComponent } from "./Components/login.Component";
import { HomeComponent } from "./Components/home.component";
const appRoutes: Routes = [
{ path: '', redirectTo: 'Home/Index', pathMatch: 'full' },
{ path: 'Account/Login', component: LoginComponent },
{ path: 'Home/Index', component: HomeComponent }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
#NgModule({
imports: [BrowserModule, FormsModule, HttpModule, routing],
declarations: [AppComponent,LoginComponent, HomeComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
app.Component.ts
import { Component } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
#Component({
selector: 'main-app',
template: '<router-outlet></router-outlet>'
})
export class AppComponent { }
Home.Component.ts
import { Component } from '#angular/core';
#Component({
selector: 'Home-app',
template: `
<h1>Angular Router</h1>
<nav>
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
</nav>
`
})
export class HomeComponent {
}
login.Component.ts
import { Component } from '#angular/core';
import { LoginViewModel } from "../ViewModel/Login.ViewModel";
import { LoginService } from "../Service/Login.Service";
#Component({
selector: 'login-app',
templateUrl: 'Account/partialLogin',
providers: [LoginViewModel, LoginService]
})
export class LoginComponent {
constructor(private loginservicemodel: LoginService, private model: LoginViewModel) {
this.model.userName = 'erere#ada.com';
this.model.password = "test anand";
}
save(modelValue: LoginViewModel, isValid: boolean) {
if (isValid) {
this.loginservicemodel.loginHttpCall();
}
}
}

Cannot match any routes: '' angular 2 asp.net core

I have a one main page and I want to separate header body and footer. Because in other page I wont be needed header.
_layout.cshtml
<!DOCTYPE html>
<html>
<head>
<base href="/" />
</head>
<body>
<main-app></main-app>
</body>
</html>
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { RouterModule, Routes } from '#angular/router';
import { HttpModule, JsonpModule } from '#angular/http';
import { ModuleWithProviders } from '#angular/core';
import { AppComponent} from "./app.component";
import { EqualValidator } from "./Validation/equal.validator.directive";
import { LoginComponent } from "./Components/login.Component";
import { HomeComponent } from "./Components/home.component";
import { DashBoardComponent } from "./Components/dashBoard.Component";
import { FooterComponent } from "./Components/footer.Component";
const appRoutes: Routes = [
{ path: '', redirectTo: 'Home/Index', pathMatch: 'full' },
{ path: 'Account/Login', component: LoginComponent },
{ path: 'Home/Index', component: HomeComponent,children:[
{path: '',component: FooterComponent,outlet: 'footer'}]},
{ path: 'DashBoard/Index', component: DashBoardComponent}
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
#NgModule({
imports: [BrowserModule, FormsModule, HttpModule, routing],
declarations: [AppComponent, LoginComponent, HomeComponent, DashBoardComponent, EqualValidator,FooterComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
If I remove the child routing the application works good. I have added the forChild() root also but the footer component is not been loaded.
Here I found the working sample
https://plnkr.co/edit/sgGDpti43GPM5cHntPpu?p=preview
But I am facing the Cannot match any routes: '' error
home.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'Home-app',
template: `
<br>
<br>
<br>
my home!!!!
<br>
<br>
<br>
<router-outlet name="footer"></router-outlet>
`
})
export class HomeComponent {
}
footer.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'Footer-app',
templateUrl: '<p>Copy rights emakitri 2017</p>'
})
export class FooterComponent {
constructor() {
console.log("test");
}
}

Categories