[英]How to give correct path names for loadchildren in lazy loading angular 2 NgModule?
如何在angular 2 ngmodule的app-routing.module文件中為loadchildren提供正確的路徑名,我遵循了angular主要網站中的ngmodule概念,但未提供此類信息。 我遇到了app-routing.module路徑的問題,我需要在路徑名中指定該問題,此問題導致延遲加載不起作用。所有文件一次都加載一次,有人可以幫忙嗎? 我在loadchildrens的路徑中想念什么? 關注了這個Angular NgModule
app-routing.module文件。
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文件
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文件
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 { }
我找到了正確的解決方案。
我們需要從app.module.ts文件中刪除視頻模塊導入模塊,但儀表板模塊除外,因為它首先加載,並且我們已經使用loadChildren概念將視頻模塊導入了app.routing.ts文件中,因此無需在以下位置導入視頻模塊app.module.ts,因為它的延遲加載,現在可以正常工作的延遲加載,以及路徑名,無論您想要什么,都可以給出,並使用路由器鏈接來調用該路徑。僅在鏈接https://devblog.dymel之后.pl / 2016/10/06 / lazy-loading-angular2-modules /謝謝
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.