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
Related
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 {}
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 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],
})
I am currently attempting to add routing to my Angular 2 project. All of the components work, but when I add 'appRoutes' to my imports on app.module.ts , an error gets thrown saying
Uncaught TypeError: Cannot set property 'stack' of undefined
Here is my code:
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 { appRoutes } from './app.router';
import { AppComponent } from './app.component';
import { NavigationComponent } from './navigation/navigation.component';
import { AboutComponent } from './about/about.component';
import { ResumeComponent } from './resume/resume.component';
import { WorkComponent } from './work/work.component';
import { BlogComponent } from './blog/blog.component';
import { HomeComponent } from './home/home.component';
#NgModule({
declarations: [
AppComponent,
NavigationComponent,
AboutComponent,
ResumeComponent,
WorkComponent,
BlogComponent,
HomeComponent
],
imports: [
appRoutes,
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent, NavigationComponent, AboutComponent,
ResumeComponent, WorkComponent, BlogComponent, HomeComponent]
})
export class AppModule { }
app.router.ts
import { ModuleWithProviders } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { ResumeComponent } from './resume/resume.component';
import { WorkComponent } from './work/work.component';
import { BlogComponent } from './blog/blog.component';
import { HomeComponent } from './home/home.component';
export const appRoutes: Routes =[
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'about', component: AboutComponent },
{ path: 'resume', component: ResumeComponent },
{ path: 'work', component: WorkComponent },
{ path: 'blog', component: BlogComponent },
{ path: 'home', component: HomeComponent }
];
export const routes: ModuleWithProviders = RouterModule.forRoot(appRoutes);
Any help would be appreciated. The page works until I add the appRoutes import, then it just sits on Loading...
You should not need ModuleWithProviders. Remove that from:
export const routes: ModuleWithProviders = RouterModule.forRoot(appRoutes);
i.e.
export const routes: RouterModule.forRoot(appRoutes);
and see if it works. (Also clean up by removing the import).
I was able to find the solution to my own problem. I deleted every component from bootstrap: [...] besides the AppComponent, but kept the other components in the declarations and it fixed the problem.
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