4

angular 2 ngmoduleのapp-routing.moduleファイルでloadchildrenに正しいパス名を付ける方法、角度メインWebサイトのngmoduleの概念に従いましたが、そのような情報は提供していません。app-routing.module パスに関する問題が発生しています。パス名で指定する必要があるのは何ですか。この問題により、遅延読み込みが機能しません。すべてのファイルが 1 回ずつ読み込まれます。パス 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 { }
4

1 に答える 1

3

正しい解決策を見つけました。

ダッシュボード モジュールを除いて app.module.ts ファイルからビデオ モジュール インポート モジュールを削除する必要があります。これは、最初にロードされ、loadChildren の概念を使用して app.routing.ts ファイルにビデオ モジュールが既にインポートされているためです。ビデオ モジュールをインポートする必要はありません。 app.module.ts は、その遅延ロードのため、現在は正常に機能している遅延ロード、およびパス名は、あなたが望むものは何でも、あなたが与えることができ、ルーターリンクでそのパスを呼び出すことができます.リンクの下にある https://devblog.dymel .pl/2016/10/06/lazy-loading-angular2-modules/ ありがとう

于 2017-01-26T07:27:23.407 に答える