I have the following route defined in app-routes.ts as a separate module
import {NgModule} from '#angular/core';
import {RouterModule, Routes} from "#angular/router";
import {AppComponent} from "./app.component";
...
const routes:Routes = [
{
path: 'new',
component: New
canActivate:[AuthGuard]
},
{
path:'list',
component:List
},
{
path: 'signup',
component: SignupComponentComponent
},
{
path: '',
redirectTo: 'home',
pathMatch:'full'
},
{
path: 'home',
component:HomepageContentComponentComponent
},
{ path: '**',
component: PageNotFoundComponent }
];
#NgModule({
imports:[RouterModule.forRoot(routes)], //
exports: [RouterModule],
providers:[]
})
export class AppRoutingModule{}
I am using the route in the HomePageComponent. How do I test the routing? I know I need to use RouterTestingModule. like follows:
beforeEach(async(() => {
TestBed.configureTestingModule({
imports:[RouterTestingModule.withRoutes(routes)], //routes is undefined here
declarations: [ HomepageContentComponentComponent,
]
})
.compileComponents();
}));
But the routes variable defined as const routes:Routes = ... in AppRoutingModule isn't available here.
Question 1) How in my current setup, I can make routes visible in the specs
Question 2)I thought to create a separate file myroutes.ts which contains only the routes array so that I can use it in the specs but even that doesn't work. Why? ( something like the following)
my-route.ts
const routes:Routes = [
{... ];
Why am I note able to use routes in imports:[RouterTestingModule.withRoutes(routes)] when I created it in a sepafrate file?
I should have exported the routes as export const routes:Routes
Related
I am using the following code in visual studio. Here is the routing part when I click to FAQ component through page component and perform according in FAQ component backs to page component.
Here is routing part
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { PageComponent } from './components/page/page.component';
import { FaqComponent } from './Folder/faq/faq.component';
import { HomeComponent } from './Folder/home/home.component';
const routes: Routes = [
{path: 'login', component: HomeComponent },
{path: 'data', component: FaqComponent },
{ path: '', component: PageComponent },
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
FaqComponent=>PageComponent
data => /
<a routerLink="/">xxx</a>
I have a project on angular 9. where i want execute Three components in my homepage named header, body, and footer. and i have other two componets login and signup. These are working fine but homepage components are not working. Only header component is loading, others are not. I have found similar questions but they are not solving my problem
what i have tried
app-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { LoginComponent } from './component/login/login.component';
import { SignupComponent } from './component/signup/signup.component';
import { HeaderComponent } from './component/header/header.component';
import { BodyComponent } from './component/body/body.component';
import { FooterComponent } from './component/footer/footer.component';
const routes: Routes = [
{
path: '' , redirectTo: 'header,body,footer', pathMatch: 'full'
},
{
path: 'header', component:HeaderComponent
},
{
path: 'body' , component:BodyComponent
},
{
path: 'footer', component:FooterComponent
},
{
path: 'login', component:LoginComponent
},
{
path: 'signup' , component:SignupComponent
}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.html
<router-outlet></router-outlet>
Thankyou
you need to create one common component called home component and include header,body,footer into that
home.component.html
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
route
{
path: 'home', component:HomeComponent
},
{
path: '' , redirectTo: 'home', pathMatch: 'full'
},
I have angular 6 application. I have requirements to get dynamic routes, logic of which is been sorted. I have AppRoutingService class which has method getAppRoutes() returning static route collection. I need this to be called app RouterModule.forRoot(...), the objective if can manage to inject static routes using service class, then I can assemble dynamic routes from database in this static list.
In doing so I am getting error.
error
Uncaught TypeError: Cannot read property 'appRoutingService' of undefined
at main.js:1055
at Module../src/app/modules/application/app-routing.module.ts (main.js:1065)
at __webpack_require__ (runtime.js:84)
App routing class
import { AppRoutingService } from './services/routing/app-routing-service';
#NgModule({
imports: [
RouterModule.forRoot(this.appRoutingService.getAppRoutes()) // here i need to inject appRoutingService method... need help here....???
],
exports: [
RouterModule
]
})
export class AppRoutingModule {
constructor(
private router:Router,
private appRoutingService: AppRoutingService
) {
}
}
App Routing Service class
#Injectable()
export class AppRoutingService{
public RouteCollection: Routes = [
{
path:'',
redirectTo: 'dashboard',
pathMatch: 'full'
},
{
path: '',
component: WebLayoutComponent,
children:[
{
path:'dashboard',
loadChildren: '../dashboard/dashboard.module#DashboardModule'
},
{
path:'survey',
loadChildren: '../survey/survey.module#SurveyModule'
}
]
},
{
path:'**',
component:PageNotFoundComponent
}
];
public getAppRoutes(): Route[]
{
return this.RouteCollection;
}
}
You are using the keyword "this" in a wrong place. there is no "this" in that context, because it is outside of a class. Since "this" === undefined, then the reason behind the error becomes clear, because you are trying to fetch the appRoutingService from undefined.
#NgModule({
imports: [
RouterModule.forRoot(AppRoutingService.getAppRoutes()) // here i need
to inject appRoutingService method... need help here....???
],
exports: [
RouterModule
]
})
And make the AppRoutingService method and variable static.
public static RouteCollection: Routes = [
{
path:'',
redirectTo: 'dashboard',
pathMatch: 'full'
},
{
path: '',
component: WebLayoutComponent,
children:[
{
path:'dashboard',
loadChildren: '../dashboard/dashboard.module#DashboardModule'
},
{
path:'survey',
loadChildren: '../survey/survey.module#SurveyModule'
}
]
},
{
path:'**',
component:PageNotFoundComponent
}
];
public static getAppRoutes(): Route[]
{
return AppRoutingService.RouteCollection;
}
I am working on Angular 6 application and have route survey that is config on app root level and then :id to take it survey detail page, I am trying to navigate from component using
this.router.navigate(['/survey'], this.listedSurvey.surveyIdNum);
But I believe I am missing something from router navigate as I am unable to do so.
App route
const routes: Routes = [
{ path:'welcome', component:WelcomeComponent },
{ path:'', redirectTo: 'welcome', pathMatch:'full'},
{ path:'survey', loadChildren: '../survey/survey.module#SurveyModule' },
{ path:'**', component:PageNotFoundComponent}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [
RouterModule
]
})
export class AppRoutingModule { }
survey module
const routes: Routes = [
{
path:'',
component:SurveyComponent,
},
{
path:':id',
component: SurveyFormComponent
}
];
#NgModule({
imports:[
RouterModule.forChild(routes)
],
exports:[]
})
export class SurveyRouting{
}
component
private handleSelectedSurvey(dataItem:any){
this.listedSurvey = dataItem;
const a:number = 2;
//this.router.navigate(['/survey'], this.listedSurvey.surveyIdNum);
this.router.navigate(['/survey'],{queryParams:{id:a}});
}
Change the navigate()
this.router.navigate(['/survey', this.listedSurvey.surveyIdNum]);
Refer: https://angular.io/api/router/Router#navigate
i make an dashboard app for manage data using angular 6. but i stuck when i nest more than 1 lazyload route, it's not work, It's seem like can not add more than 1 lazyload route in angular router
My App routing :
const appRoutes: Routes = [
{
path: '',
component: SigninComponent,
pathMatch: 'full'
},
{
path: 'dashboard',
loadChildren: './core/dashboard/dashboard.module#DashboardModule'
}
];
#NgModule({
imports: [
RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}
my dashboard route
const dashboardRoutes: Routes = [
{
path: '',
component: DashboardComponent,
children: [
{
path: 'products',
pathMatch: 'full',
loadChildren: './products/products.module#ProductModule'
},
]
}
];
#NgModule({
imports: [RouterModule.forChild(dashboardRoutes)],
exports: [RouterModule]
})
My product route:
const productRoutes: Routes = [
{
path: '',
component: ProductListComponent,
children: [
{
path: ':id',
component: ProductEditComponent
},
{
path: 'addproduct',
component: ProductCreateComponent
}
]
}
];
#NgModule({
imports: [RouterModule.forChild(productRoutes)],
exports: [RouterModule]
})
when i access localhost:4200/dashboard/products/id3 it take an error: can not match any route 'dashboard/products/id3'. I think i wrong some where in routing setup but i cant not find where is an error. Anyone can help me ?
I've create a page for you..Just check and do the changes accordingly. You need to check module path correctly otherwise it should work with no issue. You can change the url to hello.
https://stackblitz.com/edit/angular-lazy-loading-nweyjt
// For eg.
// https://stackblitz.com/edit/angular-lazy-loading-nweyjt/hello/3