如何为延迟加载angular 2 NgModule中的loadchildren提供正确的路径名？ [英] 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

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文件。

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文件

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

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文件

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.

我们需要从app.module.ts文件中删除视频模块导入模块，但仪表板模块除外，因为它首先加载，并且我们已经使用loadChildren概念将视频模块导入app.routing.ts文件中，因此无需导入视频app.module.ts中的模块，因为它的延迟加载，现在可以正常工作的延迟加载，以及路径名，无论您想要什么，都可以给出，并使用路由器链接调用该路径。仅在链接
<之后a href = https://devblog.dymel.pl/ 2016/10/06 / lazy-loading-angular2-modules / rel = nofollow noreferrer>> https://devblog.dymel.pl/2016/10/06/lazy-loading-angular2-modules/
谢谢

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

这篇关于如何为延迟加载angular 2 NgModule中的loadchildren提供正确的路径名？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！