I am working on creating lazy loaded modules In spite of all my efforts, I think I am missing something here due to which I'm unable to load modules on demand.
I have my project structure as below:
app
-users
-homeComponent
-signupComponent
-users.routing.module.ts
-users.module.ts
-list
-createListComponent
-dashboardComponent
-list.routing.module.ts
-list.module.ts
users-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { HomeComponent } from './home/home.component';
import { SignupComponent } from './signup/signup.component';
const routes: Routes = [
{
path: "",
component: HomeComponent
},
{
path: "/signup",
component: SignupComponent
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class UsersRoutingModule { }
app-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
const routes: Routes = [
{
path: 'signup',
loadChildren: './app/users/users.module#UsersModule',
},
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
I have added relative path in my loadChildren tag, but I am still getting an error saying "cannot load module". I have tried different websites but I feel I am missing a basic part here.
Any help would be appreciated.
Add users component in the users module.
Add users component will be the container where other child component get loaded.
Add <router-outlet></router-outlet> in the app componentcompoent
users-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { HomeComponent } from './home/home.component';
import { SignupComponent } from './signup/signup.component';
import { UsersComponent } from './users.component';
const routes: Routes = [
{
path: '',
component: UsersComponent, // will be bootstrap component for users module
children: [ // will children for user module
{
path: 'signup',
component: SignupComponent,
},
{
path: 'home',
component: HomeComponent,
},
]
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class UsersRoutingModule { }
Here is working demo https://stackblitz.com/edit/angular-ivy-j6wtlk
Lazy Loading Syntax now uses promise / observable, Try this:
const routes: Routes = [
{
path: 'signup',
loadChildren: () => import('./app/users/users.module').then(u => u.UsersModule)
},
];
I think there is a problem with your route configuration.
const routes: Routes = [
{
path: "",
component: HomeComponent
},
{
path: "/signup",
component: SignupComponent
}
];
With a configuration like this, the SignupComponent route object will never be reached, because Angular router will go through the configuration arrays until it finds the first match(in a DFS manner) and since every possible route matches "", it will search from there.
What I think you can do is to add the pathMatch: 'full' option:
const routes: Routes = [
{
path: "",
component: HomeComponent,
pathMatch: 'full',
},
{
path: "/signup",
component: SignupComponent
}
];
What you could also do is to add the HomeComponent route add the end of the array as it is.
Working code in stackblitz
just make the changes as below, as lazy loaded module does not require path value again and thus can be left blank
// users-routing.module.ts
const routes: Routes = [
{
path: '', // leave blank
component: SignupComponent,
},
];
<!-- app.component.html -->
<p> home works</p>
<router-outlet></router-outlet>
Related
For legacy reasons I am required to handle a route where there is potential for there to be two slashes back to back because there is an optional id in the path (e.g. /base//child/2). I can not change the url in anyway (like omitting the double slashes in favor of a secondary route). Is there anyway I can get the angular router to recognize this url and either redirect it or handle it?
This minimal stackblitz example shows the problem.
It seems Angular can not parse url with double slash correctly, so the routing path mapping will not work. You can implement your own UrlSerializer instead of using the default DefaultUrlSerializer. Try to convert path "/base//child/1" to "/base/child/1".
import {UrlSerializer, UrlTree, DefaultUrlSerializer} from '#angular/router';
export class CustomUrlSerializer implements UrlSerializer {
parse(url: any): UrlTree {
let dus = new DefaultUrlSerializer();
console.log(url);
if(/\/\//.test(url)) {
url = url.replace(/\/\//, '/');
}
return dus.parse(url);
}
serialize(tree: UrlTree): any {
let dus = new DefaultUrlSerializer(),
path = dus.serialize(tree);
return path;
}
}
Register it in app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { RouterModule, UrlSerializer } from '#angular/router';
import { CatchAllComponent } from './catch-all/catch-all.component';
import { InformedComponent } from './informed/informed.component';
import { CustomUrlSerializer } from './custom-url-serializer';
#NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot([{
path: 'base/child/:id',
component: InformedComponent,
}, {
path: 'base/:parentId/child/:id',
component: InformedComponent
}, {
path: '**',
component: CatchAllComponent
}])
],
declarations: [ AppComponent, CatchAllComponent, InformedComponent ],
providers: [
{ provide: UrlSerializer, useClass: CustomUrlSerializer }
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Now the url with double slash "//" will be converted to "/". It will match the routing path "base/child/:id", so you can get the params and handle it.
I'd try with UrlMatcher something along these lines
matcher.ts
import { UrlSegment } from '#angular/router';
export function matcher(url: UrlSegment[]) {
console.log(JSON.stringify(url));
return url.length === 1 && url[0].path === 'base' ? ({consumed: url}) : null;
}
routes
import { matcher } from './matcher';
RouterModule.forRoot([{
matcher: matcher,
component: InformedComponent
}, {
path: 'base/:parentId/child/:id',
component: InformedComponent
}, {
path: '**',
component: CatchAllComponent
}])
]
Tried this with your stacknblitz and it works. Not sure but other options could be listening to router's navigation started event or a route guard.
I am new to Angular2. I am trying to create routes as given here.
I created three components like HeaderComponent, SidebarComponent and UiElementsComponents. All of these are declared in main.module file (root module). Everything works great till now. But when I define routes it stops from displaying anything. Even doesn't display any error. Here is my code.
main.module.ts
//Main (root) module of App is defined here.
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { BrowserModule } from '#angular/platform-browser';
import { MainComponent } from './../components/main.component';
import { HeaderComponent } from './../components/header.component';
import { SidebarComponent } from './../components/sidebar.component';
import { UiElementsComponent } from './../components/ui-elements.component';
const routes: Routes = [
{ path: '', redirectTo: '/test', pathMatch: 'full' },
{ path: 'test', component: UiElementsComponent},
];
// The root module of the pratham app.
#NgModule({
imports: [
BrowserModule,
RouterModule.forRoot(routes)
],
declarations: [
MainComponent,
HeaderComponent,
SidebarComponent,
UiElementsComponent
],
bootstrap: [ MainComponent ]
})
export class MainModule { }
main.component.ts
//Main (root) component of Pratham is defined here.
import { Component } from '#angular/core';
#Component({
selector: 'prtm-main',
template: `<div class="prtm-wrapper">
<prtm-header-section></prtm-header-section>
<div class="prtm-main">
<prtm-sidebar-section></prtm-sidebar-section>
<router-outlet></router-outlet>
</div>
</div>`
})
export class MainComponent { }
I have already wasted hours on finding out the issue. Can you please tell me what am I missing?
I have browsed the other similar posts on stackoverflow, but have not found one that helps my cause, so here goes:
I am using angular2 based on the webpack "boiler-plate" from angular.io and included the routing bit.
I end up with this error even though the current setup is extremely minimal:
Unhandled Promise rejection: Template parse errors:
'Mathador' is not a known element:
1. If 'Mathador' is an Angular component, then verify that it is part of this module.
...
Here are the relevant code fragments
app/app.html
<main>
<h1>Mathador prototype</h1>
<router-outlet></router-outlet>
</main>
**app/app.routes.ts**
import { ModuleWithProviders } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { HomeComponent } from './pages/home/home'
const appRoutes: Routes = [
{
path: '', component: HomeComponent
}
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
**app/app.ts**
import { Component } from '#angular/core';
import '../../public/css/styles.css';
#Component({
selector : 'my-app',
templateUrl : './app.html',
styleUrls : ['./app.scss']
})
export class AppComponent {
}
**app/app.module.ts**
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { routing } from './app.routes';
// core
import { AppComponent } from './app';
// pages
import { HomeComponent } from './pages/home/home';
// components
import { Mathador } from './components/mathador/mathador';
#NgModule({
imports: [
BrowserModule,
routing
],
declarations: [
AppComponent,
HomeComponent,
Mathador
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
**app/pages/home/home.ts**
import { Component } from '#angular/core';
#Component({
selector : 'my-home',
templateUrl : './home.html',
styleUrls : ['./home.scss']
})
export class HomeComponent {
constructor() {
// Do stuff
}
}
**app/pages/home/home.html**
<h1>home!</h1>
<Mathador></Mathador>
**app/components/mathador.html**
<div>transclusion succesfull!</div>
**app/components/mathador.ts**
// Importing core components
import {Component} from '#angular/core';
#Component({
selector : 'mathador',
templateUrl : './mathador.html'
})
export class Mathador {
constructor() { }
}
I'm trying to get my head around Angular 2 (RC5) lazy-loading of modules by building a basic structure of a site with two sections, welcome and backend (think login page and main site). I've set it up following the Angular 2 docs on feature modules, one for the welcome section and one for the backend. It correctly defaults to the welcome component but my button in the welcome component that's supposed to link to the 'backend' route goes to 'welcome/backend' instead. Typing in the url with just /backend goes to /backend/welcome. Here's my app.routing.ts file:
import { Routes, RouterModule } from '#angular/router';
export const routes: Routes = [
{ path: '', redirectTo: 'welcome', pathMatch: 'full'},
{ path: 'backend', loadChildren: 'app/backend/backend.module' }
];
export const routing = RouterModule.forRoot(routes);
And my welcome.routing.ts:
import { RouterModule } from '#angular/router';
import { WelcomeComponent } from './welcome.component';
export const routing = RouterModule.forChild([
{ path: 'welcome', component: WelcomeComponent}
]);
And my welcome.component.ts:
import { Component } from '#angular/core';
#Component({
template: `
<h2>Welcome</h2>
<nav><a routerLink="backend">Login</a></nav>
`
})
export class WelcomeComponent { }
Anyway, here's plunk of the whole app to make it easier Plunkr. The ones that matter are in welcome and backend folders. Clicking Login should show Backend with a Logout button which takes you back to the Welcome page.
Any suggestions would be appreciated.
There were quite a few things wrong with your plunkr. Here is the working example https://plnkr.co/edit/QciaI8?p=preview
The router link was moved to app.component
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: `
<h1>Module Test</h1>
<nav><a routerLink="../backend">Logins</a></nav>
<router-outlet></router-outlet>
`
})
export class AppComponent { }
You also need backend.routing.ts
import { Routes,
RouterModule } from '#angular/router';
import { BackendComponent } from './backend.component';
const routes: Routes = [
{ path: '', redirectTo: 'backend', pathMatch: 'full'},
{ path: 'backend', component: BackendComponent }
];
export const routing = RouterModule.forChild(routes);
Backend.module was changed to
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { BackendComponent } from './backend.component';
import { routing } from './backend.routing';
#NgModule({
imports: [ routing ],
declarations: [ BackendComponent ]
})
export default class BackendModule { }
I finally go it working by figuring out that router stacks routes from nested modules (e.g. 'backend' route in app.routing and 'backend' in backend.routing results in '/backend/backend' as the url). So the solution was to have a backend.routing.ts with a single route of { path: '', component: BackendComponent }. It was also necessary to add a / to the routerLink values (e.g. /backend instead of backend). Here's my final backend.routing.ts:
import { Routes, RouterModule } from '#angular/router';
import { BackendComponent } from './backend.component';
const routes: Routes = [
{ path: '', component: BackendComponent }
];
export const routing = RouterModule.forChild(routes);
And backend.module.ts:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { BackendComponent } from './backend.component';
import { routing } from './backend.routing';
#NgModule({
imports: [ routing ],
declarations: [ BackendComponent ]
})
export default class BackendModule { }
welcome.component.ts:
import { Component } from '#angular/core';
#Component({
template: `
<h2>Welcome</h2>
<nav><a routerLink="backend">Login</a></nav>
`
})
export class WelcomeComponent { }
backend.component.ts
import { Component } from '#angular/core';
#Component({
template: `
<h2>Backend</h2>
<nav><a routerLink="welcome">Logout</a></nav>
`
})
export class BackendComponent { }
This resulted in the login button taking me to /backend and the logout button taking me to /welcome as expected. Here's a link to the plunk: Plunker
Good day to you all. Hopefully a quick question. =)
I have a login page with the route setup as /login
I also have other routes/pages set up e.g. /dashboard, /history, /sales and those pages all share a sidebar navigation.
The ploblem i am having is that i need the login page to not show the sidebar and only show the form. Once logged in i need to show the sidebar and have the right side of the page change to the content of the requested url.
for my routes i am using
import { provideRouter, RouterConfig } from '#angular/router';
import { DashboardComponent } from './components/pages/dashboard.component';
import { HistoryComponent } from './components/pages/history.component';
import { SalesComponent } from './components/pages/sales.component';
import { LoginComponent } from './components/pages/login.component';
const routes: RouterConfig = [
{ path: '', redirectTo:'/login', pathMatch: 'full'},
{ path: 'dashboard', component: DashboardComponent},
{ path: 'history', component: HistoryComponent },
{ path: 'sales', component: SalesComponent },
{ path: 'login', component: LoginComponent},
{ path: '**', component: ErrorComponent }
];
export const appRouterProviders = [
provideRouter(routes)
];
for my app.ts
import { Component, } from '#angular/core';
import { ROUTER_DIRECTIVES} from '#angular/router';
import { HTTP_PROVIDERS} from '#angular/http';
#Component({
moduleId: module.id,
selector: 'my-app',
template: '<router-outlet></router-outlet>',
directives: [ROUTER_DIRECTIVES],
providers: [HTTP_PROVIDERS]
})
export class AppComponent {
}