So I have four modules as below:
|-app.module
|-Home.module
|-private.module
|-public.module
AppModule lazy loads HomeModule and HomeModule Lazy Loads PrivateModule & PublicModule.
I have defined my routing for those modules as below:
app.routing.ts
import { NgModule} from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
const routes: Routes = [
{ path: '', loadChildren: './home/home.module#HomeModule' }
];
#NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule { }
Home.routing.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
{ path: '', component: HomeComponent},
{ path: 'private', loadChildren: './../private/private.module#PrivateModule'},
{ path: 'public', loadChildren: './../public/public.module#PublicModule' }
];
#NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [RouterModule]
})
export class HomeRoutingModule { }
private.routing.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { PrivateComponent } from './private/private.component';
export const privateRoutes: Routes = [
{ path: '',component:PrivateComponent}
];
#NgModule({
imports: [
RouterModule.forChild(privateRoutes)
],
exports: [RouterModule]
})
export class PrivateRoutingModule { }
public.routing.ts is same as private.routing.ts.
Now when I visit localhost:4200 it loads Home Component Correctly. but when I try to visit localhost:4200/private or localhost:4200/public it reloads the browser & only loads privateComponent.
I have used two router-outlets. one inside app.component and another in home.component.
I want to load private component inside HomeModules RouterOutlet but it loads it in AppModules RouterOutlet.
Any Inputs?
Thanks.
I think you could define private and public routes as the children of your homeModule.
Home.routing.ts
const routes: Routes = [
{
path: '',
component: HomeComponent,
children: [
{ path: 'private', loadChildren: './../private/private.module#PrivateModule'},
{ path: 'public', loadChildren: './../public/public.module#PublicModule' }
]
}
]
then your private/public route configuration will be like
const publicRoutes: Routes = [
{
path: '',
component: PublicComponent
}
]
I'm not sure which part you did wrong, that's why I was asking for an example.
But here one that works.
Good luck.
Related
I have a Simple Angular 2 App with a Module(InformationPagesModule module) that contains two lazy load components (Info1 Component and Info2 Component). I want to load that components when entering the following routes in the browser:
http://localhost:4200/info1 - Loads the Info1Component
http://localhost:4200/info2 - Loads the Info2Component
here the interest classes:
app.component.html
<router-outlet></router-outlet>
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { InformationPagesModule } from './information-pages/information-pages.module';
#NgModule({
declarations: [
AppComponent,
HomeComponent
],
imports: [
BrowserModule,
AppRoutingModule,
SharedModule,
InformationPagesModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule, Router } from '#angular/router';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
{path:'', component: HomeComponent},
{path:'info1', loadChildren: './information-pages/information-pages.module#InformationPagesModule'},
{pathMatch:'full', path:'info2', loadChildren: './information-pages/information-pages.module#InformationPagesModule'},
{ path: '**', redirectTo: '' }
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule { }
information-pages.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { InformationPagesRoutingModule } from './information-pages-routing.module';
import { Info1Component } from './info1/info1.component';
import { Info2Component } from './info2/info2.component';
#NgModule({
imports: [
CommonModule,
InformationPagesRoutingModule
],
declarations: [Info1Component, Info2Component]
})
export class InformationPagesModule { }
information-pages-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { Info1Component } from './info1/info1.component';
import { Info2Component } from './info2/info2.component';
const routes: Routes = [
{path:'info1', component: Info1Component},
{path:'info2', component: Info2Component}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class InformationPagesRoutingModule { }
My question is, why when entering some of the routes / info1 or / info2, a blank page is displayed?
How should I configure the routes in my application so that it works?
Many Thanks!
In your app-routing.module.ts you want to declare one parent route to all routes of one lazy loaded module. That means you might want to map all routes starting with /info to your information-pages-routing.module.ts. The routes to your components (info1 and info2) you'll declare inside the lazy loaded module.
app-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule, Router } from '#angular/router';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
{ path:'', component: HomeComponent },
{ path: 'info', loadChildren: './information-pages/information-pages.module#InformationPagesModule' },
{ path: '**', redirectTo: '' }
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule { }
The file information-pages-routing.module.ts stays the same
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { Info1Component } from './info1/info1.component';
import { Info2Component } from './info2/info2.component';
const routes: Routes = [
{path:'info1', component: Info1Component},
{path:'info2', component: Info2Component}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class InformationPagesRoutingModule { }
You'll now be able to access the Info1Component by the route /info/info1 and the Info2Component by the route /info/info2. If you wish to access your compoents by the routes /info1 and /info2 you can either create two lazy loaded modules or just redirect /info1 to /info/info1
You might also consider loading child modules like this:
{ path: 'info', loadChildren: () => import('./information-pages/information-pages.module').then(m => m.InformationPageModule) }
Rather than
{ path: 'info', loadChildren: './information-pages/information-pages.module#InformationPagesModule' }
For more information please refer to the official documentation https://angular.io/guide/lazy-loading-ngmodules
Use this way instead of using module level routing, use AppRoutingModule for routing your components.
import { NgModule } from '#angular/core';
import { Routes, RouterModule, Router } from '#angular/router';
import { HomeComponent } from './home/home.component';
import { Info1Component } from './info1/info1.component';
import { Info2Component } from './info2/info2.component';
const routes: Routes = [
{path:'', component: HomeComponent},
{path:'info1', component: Info1Component},
{path:'info2', component: Info2Component},
{ path: '**', redirectTo: '' }
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule { }
If you use this information-pages-routing.module.ts is not required any more.
I have a problem and I don't know what I'm not seeing.
I have equis Modules
ComponentsHomeModule, a file where I have a component that I would like to share
import { NgModule } from '#angular/core';
import { ElementComponent } from './element/element.component';
import { CommonModule } from '#angular/common';
#NgModule({
imports: [CommonModule],
declarations: [ElementComponent],
exports: [ElementComponent],
})
export class ComponentsHomeModule {}
In this case, the component is ElementComponent, that's the component I want to share.
Then I have my ElementsModule where I want to use the ElementComponent
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { ElementsRoutingModule } from './elements-routing.module';
import { ElementsComponent } from './elements.component';
import { ComponentsHomeModule } from '../../components/components-home.module';
#NgModule({
imports: [CommonModule, ComponentsHomeModule, ElementsRoutingModule],
declarations: [ElementsComponent],
})
export class ElementsModule {}
an then inside the ElementsComponent I'm trying to render the ElementComponent but when I make in my html
ElementsComponent html:
<app-element></app-element>
In the console I see the error of
ERROR in src/app/home/pages/elements/elements.component.html:15:7 - error TS8001: 'app-element' is not a known element:
1. If 'app-element' is an Angular component, then verify that it is part of this module
I don't know where is the error because if I have my component imported and exported into the ComponentsHomeModule and then I'm importing that module all should work.
By the way I tried with import the ComponentsHomeModule into the App.Module and nothing and the Module where I'm using the ComponentsHomeModule is used in a lazy load:
import { Routes, RouterModule } from '#angular/router';
import { HomeComponent } from './home.component';
import { ElementsRoutingModule } from './pages/elements/elements-routing.module';
const routes: Routes = [
{
path: '',
component: HomeComponent,
children: [
{
path: '',
redirectTo: 'elements',
},
{
path: 'elements',
loadChildren: () => ElementsRoutingModule,
}
],
},
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class HomeRoutingModule {}
SOLVED::
The problem was in the importing of the lazy loading.
I was importing the RoutingMoudule instead of only the module
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { HomeComponent } from './home.component';
import { ElementsModule } from './pages/elements/elements.module';
const routes: Routes = [
{
path: '',
component: HomeComponent,
children: [
{
path: '',
redirectTo: 'elements',
},
{
path: 'elements',
loadChildren: () => ElementsModule,
}
],
},
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class HomeRoutingModule {}
Your ElementsComponent is part of ElementsModule, so if you want to use ElementsComponent in ComponentsHomeModule then you need to exports ElementsComponent form ElementsModule, not from ComponentsHomeModule.
I am beginner with angular and I have the followings routes.
app.routing.module.ts
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router';
import { FrameComponent } from './ui/frame/frame.component';
import { NotFoundComponent } from './common/not-found/not-found.component';
const routes = [
{
path: 'login',
loadChildren: 'src/app/login/login.module#LoginModule'
},
{
path: 'dashboard',
component: FrameComponent,
loadChildren: 'src/app/dashboard/dashboard.module#DashboardModule'
},
{
path: "**",
component: NotFoundComponent,
}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
dashboard.routing.module.ts
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router';
import { OverviewComponent } from '../overview/overview.component';
const routes = [
{
path: '',
children:[
{
path: 'overview',
component: OverviewComponent,
//outlet: 'dashboard-inside'
}
]
},
];
#NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [RouterModule]
})
export class DashboardRoutingModule { }
When navigating to /dashboard it loads the FrameComponent from the AppRoutingModule.
But when navigating to /dashboard/overview it loads NotFoundComponent instead of OverviewComponent from second router.
I am still a beginner with Angular. What am I doing wrong?
I think you didn't define your routes correctly
{
path: 'dashboard',
component: FrameComponent,
loadChildren: 'src/app/dashboard/dashboard.module#DashboardModule'
}
This piece of code doesn't load lazily - you are not loading the childern over here you are just loading the component FrameComponent so angular does it for you
If your FrameComponent is part of AppModule you can just remove the loadChildren from the path and the angular will do the same routing for you
If it is not the part of AppModule then try something like this
app-routing.module.ts
{
path: 'dashboard',
loadChildren: 'src/app/dashboard/dashboard.module#DashboardModule'
}
Just load another module from the path and load the component you want from that module
dashboard-routing.module.ts
{
path: '',
component: FrameComponent,
children:[
{
path: 'overview',
component: OverviewComponent,
//outlet: 'dashboard-inside'
}
]
}
Make sure you have declared the FrameComponemt inside the DashboardModule and that will make you to load the route you want
Now if the path is /dashboard angular will load the dashboard module and check for the path '' next to the /dashboard so it will load the FrameComponent then when you try to access path /dashboard/overview routing will load the child route and OverviewComponet will be loaded
Hope everything will work good - please feel free to reach me if you have any doubts - Happy coding :)
You can remove component: FrameComponent from the dashboard route and move it into the dashboard routing module.
{
path: 'dashboard',
loadChildren: 'src/app/dashboard/dashboard.module#DashboardModule'
},
{
path: '',
component: FrameComponent,
children:[
{
path: 'overview',
component: OverviewComponent,
}
]
},
And I guess you should import your modules in core one.
Your definition in dashboard.routing.module.ts is wrong.
Try this instead:
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router';
import { OverviewComponent } from '../overview/overview.component';
const routes = [
{
path: 'overview', // <-- should be in root.
component: OverviewComponent,
},
];
#NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [RouterModule]
})
export class DashboardRoutingModule { }
I need to make a angular application to work with same url for multiple routes. Example:
Route 1. Instead of navigating to:
/partner/urlparameter
Navigate to:
/partnerurlparameter
Route 2. Instead of navigating to:
/user/urlparameter
Navigate to:
/userurlparameter
Where the path is "/" followed by a dynamic value which is the parameter.
Is there a way do achieve that?
Here is how my route is configured:
{ path: '/partner/:partnerId', component: PartnerComponent },
{ path: '/customer/:customerId', component: CustomerComponent },
I want to have something like this:
{ path: '/partner/:partnerId', component: PartnerComponent },
{ path: '/:customerId', component: CustomerComponent },
Here is an example of what you want to achieve, follow the link for same.
Let me know if there are any changes.
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { RouterModule, Routes } from '#angular/router';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { CustomerComponent } from '../customer/customer.component';
import {PartnerComponent} from '../partner/partner.component';
export const routes: Routes = [
{ path: 'partner/:partnerId', component: PartnerComponent },
{ path: ':customerId', component: CustomerComponent },
{ path: '', component: HelloComponent, pathMatch:'full' },
];
#NgModule({
imports: [BrowserModule, FormsModule, RouterModule.forRoot(routes)],
declarations: [AppComponent, HelloComponent, CustomerComponent, PartnerComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
I want to lazy load a module in the angular 2+ application.For that in 'app-routing.module' file I have following code.
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { AbcdComponent } from './abcd/abcd.component';
const routes: Routes = [
{ path: 'portfolio', loadChildren: './lazy.module#LazyModule'},
{ path: 'dashboard', loadChildren: './lazy.module#LazyModule'},
{ path: 'abcd', component:AbcdComponent}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
declarations: [
AbcdComponent
]
})
export class AppRoutingModule { }
Now, in Lazy Module I have the following code:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { LazyParentComponent } from './lazy-parent/lazy-parent.component';
import { LazyChildComponent } from './lazy-child/lazy-child.component';
import { Routes, RouterModule } from '#angular/router';
const routes: Routes = [
{ path: 'load-me', component: DashBoardComponent },
{ path: 'load-you', component: PortfolioComponent }
];
#NgModule({
imports: [
CommonModule,
RouterModule.forChild(routes)
],
declarations: [
LazyParentComponent,
LazyChildComponent,
]
})
export class LazyModule { }
This is good enough to route https://example.com/portfolio/load-me to DashBoardComponent and https://example.com/portfolio/load-you to PortfolioComponent.
But the issue is I want to have a lazy module and for route like this https://example.com/portfolio I want to point to PortfolioComponent and https://example.com/dashboard to DashBoardComponent. Both components should be lazily loaded .Also, both components are in same module.I searched through internet but could not get any solution.Any help is appreciated.
That won't work. For each route inside of the AppRoutingModule, there needs to be its own module & and routing. So for example:
Dashboard Routes:
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { DashboardComponent } from 'some path';
export const DashboardRoutes: Routes = [
{ path: '', component: DashboardComponent }
];
#NgModule({
imports: [
RouterModule.forChild(DashboardRoutes)
],
exports: [RouterModule],
declarations: [],
providers: [],
})
export class DashboardRoutingModule { }
Dashboard Module:
#NgModule({
imports: [DashboardRoutingModule]
})
export class DashboardModule { }
App Routes:
export const routes: Routes = [
{ path: 'portfolio', loadChildren: './PathTooPortfolio#PortfolioModule'},
{ path: 'dashboard', loadChildren: './PathToDashboard#DashboardModule'},
{ path: 'abcd', component:AbcdComponent}
];
Just setup Portfolio the same way as I have Dashboard.