I am using lazyload routing in our application! I'm facing strange issue as follows
I have AppModule in side that TopModule and then DashboardModule and all are loaded in lazyload
if someone open localhost:4200/dashboard then it loads in order of Appmodule,Topmodule DashboardModule and TopComponent
but it should loads in order of Appmodule,Topmodule,TopComponent and DashboardModule
As Dashboard Module is getting loaded Before TopComponent because of it my page is getting stucked!
NOTE : I have used in all modules where routing are defined!
My code is as follows
app.module.ts
import { CommonModule } from '#angular/common';
import { NgModule } from '#angular/core';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { RouterModule, Routes} from '#angular/router';
import { AppComponent } from './app.component';
import { BrowserModule } from "#angular/platform-browser";
const appRoutes: Routes = [
{
path: '',
loadChildren: './top.module#TopModule',
}
];
#NgModule({
declarations: [
AppComponent
],
imports: [
CommonModule,
BrowserModule,
BrowserAnimationsModule,
RouterModule.forRoot(appRoutes)
],
providers: [],
entryComponents: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
app.component.html
<router-outlet></router-outlet>
top.module.ts
import { CommonModule } from '#angular/common';
import { NgModule } from '#angular/core';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { RouterModule, Routes} from '#angular/router';
import { TopComponent } from './top.component';
import { BrowserModule } from "#angular/platform-browser";
const appRoutes: Routes = [
{
path: '',
component: TopComponent,
children: [
{
path: '',
loadChildren: './first.module#FirstModule',
},
{
path: 'dashboard',
loadChildren: './dashboard.module#DashboardModule',
},
]
}
]
#NgModule({
declarations: [
TopComponent
],
imports: [
CommonModule,
BrowserModule,
BrowserAnimationsModule,
RouterModule.forChild(appRoutes)
],
providers: [],
entryComponents: [],
})
export class TopModule {
}
top.component.html
<router-outlet></router-outlet>
First of all, as you stated in comment above, if TopComponent should appear in all view, it doesn't make sense to load it lazyly. You should add TopModule to your AppModule because users will get it no matter the url they enter.
Next, to load FirstModule and DashboardModule lazyly you can do it as below:
const appRoutes: Routes = [
{
path: '',
component: OutletComponent,
children: [
{
path: '',
loadChildren: './first.module#FirstModule',
},
{
path: 'dashboard',
loadChildren: './dashboard.module#DashboardModule',
},
]
}]
And finally create a component for childrens routing:
//OutletComponent
#Component({
selector: 'outlet-component',
template: `<router-outlet></router-outlet>`,
})
export class OutletComponent {}
Related
I have an angular application with a login component
this component is under app/main/login
I want to go to it from app.component.html via the button
Here is my app-routing.module code
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { LoginComponent } from './main/login/login.component';
const routes: Routes = [
{ path: 'main', children: [{ path: 'login', component: LoginComponent }] },
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
Here is how I try to use route <button mat-raised-button class="btn-default" [routerLink]="['/main/login']">Log in</button>
Here is app.module.ts code
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {MatButtonModule} from '#angular/material/button';
import {MainModule} from './main/main.module'
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
MatButtonModule,
MainModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
and here is main.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { LoginComponent } from './login/login.component';
#NgModule({
declarations: [LoginComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [],
})
export class MainModule {}
When I click the button, the URL changing to http://localhost:4200/main/login but the view not changed.
How I can fix this?
Looking at your code it seems that you are trying to load component using lazy-loading technique.
So in AppRoutingComponent.ts file, instead of what your code replace it with :
const routes: Routes = [
{ path: 'main', loadChildren: '(path to main module)/main.module#MainModule' },
];
In layman terms this just tells the parent routing module to load the main.module when main path is encountered
Now In Main.module, configure child routes as:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { LoginComponent } from './login/login.component';
const routes: Routes = [
{ path: 'login', component: LoginComponent }
];
#NgModule({
declarations: [LoginComponent],
imports: [
BrowserModule,
RouterModule.forChild(routes) // Register routes for child module via forChild function instead of for Root
],
providers: [],
bootstrap: [],
})
export class MainModule {}
I maked my angular-app. All good works. But for deploy to server I getting error:
Uncaught (in promise): Error: Cannot match any routes. URL Segment:
'myUrl/app.aspx'
After build prod my app doesn't work either (I set base href and all files load, but I getting warning Unhandled Navigation Error).
I make difficult routing for my app.
I using submodules for routing. And I think the problem related with APP_BASE_HREF or wrong routing for my app/submodules.
My example:
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { HttpClientModule } from "#angular/common/http";
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { NbThemeModule, NbLayoutModule, NbSidebarModule, NbButtonModule, NbTabsetModule, NbCardModule } from '#nebular/theme';
import { NbEvaIconsModule } from '#nebular/eva-icons';
import { AppRoutingModule } from './app-routing.module';
import { RouterModule } from '#angular/router';
import { MainModule } from './components/main/main.module';
import { AddModule } from './components/add/add.module';
import { APP_BASE_HREF } from '#angular/common';
#NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
NbThemeModule.forRoot({ name: 'default' }),
NbLayoutModule,
NbEvaIconsModule,
NbSidebarModule.forRoot(),
NbButtonModule,
NbTabsetModule,
NbCardModule,
AppRoutingModule,
MainModule,
AddModule,
HttpClientModule,
],
providers: [{ provide: APP_BASE_HREF, useValue: '/' }],
bootstrap: [AppComponent]
})
export class AppModule { }
I don't have providers: [{ provide: APP_BASE_HREF, useValue: '/' }] and all good works. But for deploy I geted error message:
Please provide a value for the APP_BASE_HREF token or add a base
element to the document.
I add APP_BASE_HREF and error disappeared.
app-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
const routes: Routes = [
{
path: '',
loadChildren: './components/main/main.module#MainModule'
},
{
path: 'event',
loadChildren: './components/event/event.module#EventModule'
},
{
path: 'add',
loadChildren: './components/add/add.module#AddModule'
},
{
path: 'archive',
loadChildren: './components/archive/archive.module#ArchiveModule'
}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule { }
main-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { ViewEventsComponent } from './view-events/view-events.component';
const routes: Routes = [
{
path: '',
component: ViewEventsComponent,
},
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class MainRoutingModule { }
event-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { EventPageComponent } from './event-page/event-page.component';
const routes: Routes = [
{
path: ':id',
component: EventPageComponent,
},
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class EventRoutingModule { }
And I noticed:
after build app - generated files of module: archive and event, but don't generated file for main-module.
I solved this problem with fixed in app-routing.module.ts. A added { useHash: true }:
#NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true })],
exports: [RouterModule],
})
Hey I've just tried to set up lazy loading of modules in my application but I'm getting this error I was following a tutorial but obviously they didnt get the same errors
my set up is as follows
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { RouterModule, Routes, ActivatedRoute, ParamMap } from '#angular/router';
import { HttpClientModule } from '#angular/common/http';
import { environment } from '../environments/environment';
import { ServiceWorkerModule } from '#angular/service-worker';
import { OurWorkModule } from './our-work/our-work.module';
import { ourWorkRouting } from './our-work/our-work-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { FooterComponent } from './shared/footer/footer.component';
import { WhatWeDoComponent } from './what-we-do/what-we-do.component';
import { HeaderComponent } from './shared/header/header.component';
import { OurProcessComponent } from './our-process/our-process.component';
import { OurTechnologyComponent } from './our-technology/our-technology.component';
import { GetInTouchComponent } from './get-in-touch/get-in-touch.component';
export const ROUTES: Routes = [
{ path: '', component: HomeComponent, pathMatch: 'full' },
{ path: 'what-we-do', component: WhatWeDoComponent},
{ path: 'our-work', loadChildren: 'app/our-work/our-work.module#OurWorkModule' },
{ path: 'our-technology', component: OurTechnologyComponent},
{ path: 'get-in-touch', component: GetInTouchComponent },
{ path: '**', redirectTo: ''}
];
#NgModule({
declarations: [
AppComponent,
HomeComponent,
FooterComponent,
WhatWeDoComponent,
HeaderComponent,
OurProcessComponent,
OurTechnologyComponent,
GetInTouchComponent,
HeaderHomeComponent,
],
imports: [
BrowserModule,
LazyLoadImageModule,
RouterModule.forRoot(ROUTES),
FormsModule,
HttpModule,
HttpClientModule,
ourWorkRouting,
OurWorkModule,
environment.production ? ServiceWorkerModule.register('/ngsw-worker.js') : [],
],
providers: [EmailService],
bootstrap: [AppComponent]
})
export class AppModule { }
our-work-module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { RouterModule, Routes, ActivatedRoute, ParamMap } from '#angular/router';
import { OurWorkComponent } from './our-work.component';
#NgModule({
imports: [
CommonModule,
RouterModule
],
declarations: [
OurWorkComponent,
]
})
export class OurWorkModule {}
our-work-routing.module.ts
import { Routes, RouterModule } from '#angular/router';
import { OurWorkComponent } from './our-work.component';
const ourWorkRoutes: Routes = [
{ path: '', component: OurWorkComponent }
];
export const ourWorkRouting = RouterModule.forChild(ourWorkRoutes);
this is the first time Ive tried to lazyload a module or set up a feature module so any help would be appreciated!
Thanks
Here's how my lazy loaded module looks, hope it helps you
import { NgModule, ApplicationRef, APP_BOOTSTRAP_LISTENER, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
import { APP_BASE_HREF, CommonModule } from '#angular/common';
import { Http, HttpModule } from "#angular/http";
import { RouterModule } from '#angular/router';
import { FormsModule } from '#angular/forms';
import { OurWorkComponent } from './our-work.component';
#NgModule({
declarations: [
OurWorkComponent
],
imports: [
CommonModule,
FormsModule,
HttpModule,
RouterModule.forChild([
{ path: '', component: OurWorkComponent }
])
],
providers : [
//add services and other providers
],
schemas: [ NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA ]
})
export class FeaturedModule { }
I think you didn't add you ourWorkRouting in your our-work-module.ts
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.
I try to use Lazyload routes but nested. But i still get the error that it do not find the module in the 2 level route.
Here is my construct:
app.module.ts:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { routing } from './app.routes';
import { AppComponent } from './app.component';
import { RouterModule } from '#angular/router';
#NgModule({
declarations: [
AppComponent,
AuthComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
routing
],
exports: [RouterModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.routes.ts
import { Router, RouterModule} from '#angular/router';
import { AuthGuard } from './Auth/Services/auth-guard.service';
import { AuthComponent } from './Auth/auth.component';
export const routing = RouterModule.forRoot([
{ path: '', redirectTo: "portal", pathMatch: 'full'},
{ path: 'portal', loadChildren: './Portal/portal.module#PortalModule'},
{ path: '**', redirectTo: "portal"}
])
Portal/portal.module.ts:
import { NgModule } from '#angular/core';
import { routing } from './portal.routes';
import { PortalComponent } from './portal.component';
import { FormsModule,ReactiveFormsModule } from '#angular/forms';
import { RouterModule } from '#angular/router';
import { CommonModule } from '#angular/common';
#NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
routing
],
exports: [ RouterModule ],
declarations: [
PortalComponent
],
providers: [
]
})
export class PortalModule { }
Portal/portal.routes.ts:
import { Router, RouterModule} from '#angular/router';
import { PortalComponent } from './portal.component';
export const routing = RouterModule.forChild([
{ path: '', redirectTo: "reports"},
// This Part doesn't work
{ path: 'reports', component: PortalComponent, loadChildren: './Portal/Test/test.module#TestModule'},
// --
{ path: '**',component: PortalComponent, pathMatch: 'full'}
])
Portal/Test/test.module.ts:
import { NgModule } from '#angular/core';
import { routing } from './test.routes';
import { TestComponent } from './test.component';
import { FormsModule,ReactiveFormsModule } from '#angular/forms';
import { RouterModule } from '#angular/router';
import { CommonModule } from '#angular/common';
#NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
routing
],
exports: [ RouterModule ],
declarations: [
TestComponent
],
providers: [
]
})
export class TestModule { }
Portal/Test/test.routes:
import { Router, RouterModule} from '#angular/router';
import { TestComponent } from './test.component';
export const routing = RouterModule.forChild([
{ path: '', redirectTo: "reports"},
{ path: 'reports', component: TestComponent},
])
My error:
EXCEPTION: Uncaught (in promise): Error: Cannot find module './Portal/Test/test.module'.
Error: Cannot find module './Portal/Test/test.module'.
My Question is now why he do not find the Module ?
I tried also other Paths but this i the only one which can really work i think.
What i need to do to fix or is angular 2 not able to do this ?
(The error is just testet with ng serve not with build | Testet with Chrome)
Not sure if this could help but the way I do modules is to name every module file index.ts and just specify the path to the folder when referencing them. I have never had any issues with modules not being found. Have a look at https://github.com/AngularClass/angular2-webpack-starter/tree/master/src/app for an example in how to load async modules.
This issue was on the old #angular/router i updated now to the 3.2.0 befor i had 3.1.0