I'm new in Angular 5 and trying to build an app with client side and admin side. So I did some search and made this:
AppRoutingModule
const appRoutes: Routes = [
{
path: '',
loadChildren: 'app/website/public.module#PublicModule'
},
{
path: 'admin',
loadChildren: 'app/admin/admin.module#AdminModule'
}
];
#NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
PublicRoutingModule
const PUBLIC_ROUTES: Routes = [
{
path: '',
component: HomeComponent,
}
];
#NgModule({
imports: [RouterModule.forChild(PUBLIC_ROUTES)],
exports: [RouterModule]
})
export class PublicRoutingModule { }
AdminRoutingModule
const ADMIN_ROUTES: Routes = [
{
path: '',
component: DashboardComponent,
data: {
title: 'Dashboard'
},
children: [
]
}
];
#NgModule({
imports: [RouterModule.forChild(ADMIN_ROUTES)],
exports: [RouterModule]
})
export class AdminRoutingModule { }
And I have imported AppRoutingModule in AppModule, and also imported PublicRoutingModule in PublicModule, also imported AdminRoutingModule in AdminModule.
When I run the app, there is no errors but the HomeComponent is not been rendered initially.
Can anyone tell what's the problem here? Thank you.
For lazy load module, I think you should add components' declarations to their own router module.
Example for PublicRoutingModule(same for AdminRoutingModule)
const PUBLIC_ROUTES: Routes = [
{
path: '',
component: HomeComponent,
}
];
#NgModule({
declarations: [ HomeComponent ], // add declaration
imports: [RouterModule.forChild(PUBLIC_ROUTES)],
exports: [RouterModule]
})
export class PublicRoutingModule { }
BTW, while debugging routing problems, you should enable tracing to see what really happened during navigation.
#NgModule({
imports: [RouterModule.forRoot(appRoutes, { enableTracing: true })],
exports: [RouterModule]
})
export class AppRoutingModule { }
Related
app-routing
https://prnt.sc/20zqxzy
const routes: Routes = [
{
path: '',
loadChildren: () => import(/* webpackChunkName: "index" */ './pages/module/main/index-page/index-page.module').then(m => m.IndexPageModule)
}, {
path: 'user',
loadChildren: () => import(/* webpackChunkName: "user" */ './pages/module/user/user-routing/user-routing.module').then(m => m.UserRoutingModule)
}
]
#NgModule({
imports: [RouterModule.forRoot(routes, {
initialNavigation: 'enabledBlocking'
})],
exports: [RouterModule]
})
export class AppRoutingModule { }
index-page-routing
https://prnt.sc/20zr52z
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { IndexPageComponent } from './index-page.component';
// Pages
const routes: Routes = [
{
path: '',
component: IndexPageComponent,
},
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class IndexPageRoutingModule { }
But here when i build a project
https://prnt.sc/20zr994
It's have only main.js files and no have any lazy chunk files. what i doing wrong ?
Check these modules for static import into any non lazy loaded module.(In most cases AppModule)
x.componet.ts
const path="path1"
x.component.html
[routerLink]="['create',path]"
<router-outlet name="modal"></router-outlet>
modulex-routing.module.ts
const routes: Routes = [
{
path:'create',
children:[
{
path:'path1',component:path1Component,outlet:'modal'
},
{
path:'path2',component:path2Component,outlet:'modal'
},
],
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HomeRoutingModule { }
app.routing.module.ts
const routes: Routes = [
{
path:'',
component:HomeComponent,
outlet:'home'
},
];
#NgModule({
imports: [RouterModule.forRoot(routes,{
preloadingStrategy: PreloadAllModules
})],
exports: [RouterModule]
})
app.module.ts
#NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
HomeRoutingModule,
AppRoutingModule,
HomeModule
],
providers: [
DatePipe
],
bootstrap: [AppComponent]
})
export class AppModule { }
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'create/path1'
in modulex routing created some routes with respective components
and in app-routing using preloadmodule approach , when tries to access 'create/path1' it says
Error: Cannot match any routes.
am I Missing anything?
if remove outlet name everything works
I'm creating an application with Angular 9 where I've created a separate routing module for the admin purpose and calling it in app.module to initialize. But for some reason the routes are not getting called and and the below error is coming in the console.
ERROR Error
Angular 11
resolvePromise
resolvePromise
scheduleResolveOrReject
invokeTask
onInvokeTask
invokeTask
runTask
drainMicroTaskQueue
invokeTask
invoke
timer
core.js:3872
I've created child modules like this in previous versions of Angular and it worked perfectly. You can check my github repository if you want to https://github.com/tridibc2/sample-angular. Have a look at my modules below
AdminModule:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { Routes, RouterModule } from '#angular/router';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { AdminComponent } from '../admin/admin.component';
import { SignupComponent } from '../signup/signup.component';
import { LoginComponent } from '../login/login.component';
import { ManageBlogsComponent } from '../manage-blogs/manage-blogs.component';
const routes: Routes = [
{ path: 'signup', component: SignupComponent },
{ path: 'login', component: LoginComponent },
{ path: 'admin', component: AdminComponent },
{ path: 'admin/blog', component: ManageBlogsComponent }
];
#NgModule({
declarations: [
AdminComponent,
SignupComponent,
LoginComponent,
ManageBlogsComponent
],
imports: [
RouterModule.forChild(routes),
CommonModule,
FormsModule,
ReactiveFormsModule
],
exports: [RouterModule]
})
export class AdminModule { }
app.module.ts:
import { BrowserModule } from '#angular/platform-browser';
import { HttpClientModule } from '#angular/common/http';
import { CommonModule } from '#angular/common';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { RouterModule } from '#angular/router';
import { ClientModule } from './client/client-routing/client.module';
import { AdminModule } from './admin/admin-routing/admin.module';
import { AppRoutingModule } from './app.routing';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent ],
imports: [
BrowserModule,
CommonModule,
NgbModule,
ClientModule,
AdminModule,
AppRoutingModule,
FormsModule,
RouterModule ],
bootstrap: [AppComponent]
})
export class AppModule { }
app.routing.ts:
import { NgModule } from '#angular/core';
import { CommonModule, } from '#angular/common';
import { BrowserModule } from '#angular/platform-browser';
import { Routes, RouterModule } from '#angular/router';
import { BlogHomeComponent } from './client/blog-home/blog-home.component';
const routes: Routes =[
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: BlogHomeComponent }
];
#NgModule({
imports: [
CommonModule,
BrowserModule,
RouterModule.forRoot(routes,{
useHash: true
})
],
exports: [
],
})
export class AppRoutingModule { }
Simple example for routing of eager loaded module.
Ref of atleast one component is required in parent module and which is mostly a component that has router-outlet tag to render child module routes.
...
const routes: Routes = [
{
path: '',
component: CompWhichHasRouterOutletTag,
children:[
{path: '', redirectTo: 'signup', pathMatch: 'full'},
{ path: 'signup', component: SignupComponent },
{ path: 'login', component: LoginComponent },
{ path: 'admin', component: AdminComponent },
{ path: 'admin/blog', component: ManageBlogsComponent }]
}
];
#NgModule({
declarations: [
CompWhichHasRouterOutletTag,
AdminComponent,
SignupComponent,
LoginComponent,
ManageBlogsComponent
],
imports: [
RouterModule.forChild(routes),
CommonModule,
FormsModule,
ReactiveFormsModule
],
exports: [RouterModule, CompWhichHasRouterOutletTag]
})
export class AdminModule { }
app.routing.ts file
const routes: Routes = [
{ path: '', redirectTo: '/home/', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'contact', component: ContactComponent },
{ path: 'admin-route', component: CompWhichHasRouterOutletTag },
]
#NgModule({
imports: [
...
RouterModule.forRoot(routes),
...
]
})
I have a module called "host" with its own routing that I want to insert into the app-routing.module. However, I have the problem of the wildcard loading first and displaying PageNotFoundComponent, instead of the Host component loading. I have the following files.
host.module.ts
....
const routes: Routes = [
{
path: 'host',
children: [
{ path: '', component: HostComponent }
]
}
];
#NgModule({
declarations: [HostComponent],
imports: [
CommonModule,
RouterModule.forChild(routes)
]
})
export class HostModule { }
app-routing.module.ts
const routes: Routes = [
{ path: '', component: HomeComponent, pathMatch: "full"},
{ path: '**', component: PageNotFoundComponent }
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.module.ts
#NgModule({
declarations: [
AppComponent,
HomeComponent,
PageNotFoundComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HostModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<h2>Home</h2>
<ul>
<li>
<h2><a routerLink="/host">host</a></h2>
</li>
</ul>
<router-outlet></router-outlet>
Problem: When I run the app and click on the "Host" button, it loads the PageNotFoundComponent. I obviously want it to go to the HostComponent.
In your app.module.ts you need to reorder your imports
#NgModule({
declarations: [
AppComponent,
HomeComponent,
PageNotFoundComponent
],
imports: [
BrowserModule,
HostModule, <--- this before AppRoutingModule
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Reason being is because the order of the routes in the configuration matters. https://angular.io/guide/router#configuration
The ** path in the last route is a wildcard. The router will select this route if the requested URL doesn't match any paths for routes defined earlier in the configuration. This is useful for displaying a "404 - Not Found" page or redirecting to another route.
The order of the routes in the configuration matters and this is by design. The router uses a first-match wins strategy when matching routes, so more specific routes should be placed above less specific routes. In the configuration above, routes with a static path are listed first, followed by an empty path route, that matches the default route. The wildcard route comes last because it matches every URL and should be selected only if no other routes are matched first.
I have a simple angular application and I am using Angular2 for the first time.
I am prompted with error in firefox console "EXCEPTION: Uncaught (in promise): Error: Cannot match any routes: 'books/huckleberry'"
book.component.ts
import { Component, OnInit } from '#angular/core';
import { ActivatedRoute } from '#angular/router';
#Component({
selector: 'app-directory',
templateUrl: './book.component.html',
styleUrls: ['./book.component.css']
})
export class BookComponent implements OnInit {
book: string;
constructor(private route: ActivatedRoute) {
this.book= route.snapshot.params['book'];
}
ngOnInit() {
}
}
app.routes.ts
import { Routes, RouterModule } from "#angular/router";
import { BookComponent } from "./book/book.component";
import { HomeComponent } from "./home/home.component";
const APP_ROUTES: Routes = [
{
path:'book',
component: BookComponent,
children: [
{ path: 'book/:book', component: BookComponent}
]
},
{ path: '', component: HomeComponent }
];
export const APP_ROUTES_PROVIDER = RouterModule.forRoot(APP_ROUTES);
app.module.ts
...
import { BookComponent } from './book/book.component';
import { RouterModule } from "#angular/router";
#NgModule({
declarations: [
AppComponent,
BookComponent,
HomeComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot([
{ path: '', component: HomeComponent },
{ path: 'book', component: BookComponent },
// { path: '**', component: PageNotFoundComponent }
]),
RouterModule.forChild([
{
path: 'book', //parent path
children: [
{
path: 'book/:book',
component: BookComponent,
}
]
}
])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
When i access http://localhost:4200/book, there is no error.
But when i access http://localhost:4200/book/huckleberry, using Angular2 for the first time.
I am prompted with error in firefox console "EXCEPTION: Uncaught (in promise): Error: Cannot match any routes: 'book/huckleberry'"
Do you know how can i update app.module.ts?
I should be able to get {{book}} in book.component.html
I was able to solve this by the following codes below:
app.routes.ts
const APP_ROUTES: Routes = [
{ path:'directory', component: BookComponent },
{ path:'directory/:book', component: BookComponent },
{ path: '', component: HomeComponent }
];
app.module.ts
#NgModule({
declarations: [
AppComponent,
DirectoryComponent,
HomeComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot([
{ path: '', component: HomeComponent },
{ path: 'book', component: BookComponent },
{ path: 'book/:book', component: BookComponent }
// { path: '**', component: PageNotFoundComponent }
])
],
providers: [],
bootstrap: [AppComponent]
})
With the code above, i am now able to get the parameter and print it to the page via {{book}}