How to give correct path names for loadchildren in app-routing.module file in the angular 2 ngmodule, I followed the ngmodule concept in angular main website but its not giving such informations. I am getting the issue with app-routing.module paths,what i need to specify in the path names, with this issue, lazy loading is not working.all files are loading once yet a time ,can anyone help ? what i miss in the paths loadchildrens ? followed this Angular NgModule
app-routing.module file.
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {DashboardModule} from './dashboard/dashboard.module';
import {VideosModule} from './videos/videos.module';
export const routes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: '', redirectTo: 'home/dashboard', pathMatch: 'full', canActivate: [AuthGuard] },
{
path: 'home', component: HomeComponent, canActivate: [AuthGuard],
children: [
{ path: '', loadChildren: 'app/dashboard/dashboard.module#DashboardModule' },
{ path: 'videos', loadChildren: 'app/videos/videos.module#VideosModule' },
]
},
];
app.module file
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule, FormGroup, ReactiveFormsModule} from '@angular/forms';
import { CommonModule} from '@angular/common';
import {AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthGuard } from './auth.guard';
import { AuthenticationService } from './shared/services/authentication.service';
import {LoginComponent} from './login/login.component';
import {SharedModule} from './shared/share.module';
import {DashboardModule} from './dashboard/dashboard.module';
import {VideosModule} from './videos/videos.module';
@NgModule({
imports: [
BrowserModule, FormsModule, AppRoutingModule, DashboardModule,
SharedModule, VideosModule,
ReactiveFormsModule, CommonModule
],
declarations: [AppComponent, LoginComponent
],
exports: [],
providers: [
AuthGuard,
AuthenticationService,
],
bootstrap: [AppComponent]
})
export class AppModule { }
videos-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {FileUploadComponent} from './upload_videos/uploadvideo.component';
import {ManageVideosComponent} from './manage_videos/managevideos.component';
export const routes: Routes = [
{ path: ' ', redirectTo:'fileupload',pathMatch:'full'},
{ path: 'fileupload', component: FileUploadComponent },
{ path: 'manage_videos', component: ManageVideosComponent },
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class VideosRoutingModule {}
videos.module file
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {SharedModule} from '../shared/share.module';
import {VideoFileService} from './services/videofile.service';
import { FileSelectDirective, FileDropDirective } from 'ng2-file-upload';
import {FileUploadModule} from 'ng2-file-upload/ng2-file-upload';
import {ManageVideosComponent} from './manage_videos/managevideos.component';
import {VideosRoutingModule} from './videos-routing.module';
@NgModule({
imports: [ VideosRoutingModule,SharedModule,CommonModule,
FormsModule,ReactiveFormsModule ,FileUploadModule],
declarations: [ManageVideosComponent,
FileUploadComponent],
exports: [ FileSelectDirective,FileDropDirective ],
providers: [ VideoFileService ]
})
export class VideosModule { }
I found the correct solution.
we need to remove the video module import module from the app.module.ts file except dashboard module because its loading first and we already import video module in the app.routing.ts file with loadChildren concepts.so no need import the video module in the app.module.ts ,because its lazy load,now its working lazy loading fine, and path names,whatever you want,you can give ,and call that paths with router link .just followed below link https://devblog.dymel.pl/2016/10/06/lazy-loading-angular2-modules/ thanks