无法在生产中的Angular 5 + ASP.NET Core 2应用程序中添加延迟加载

Question

我按照this教程添加延迟加载到我的应用程序。一切都在本地服务器上工作正常，但当我发布我的应用程序时，我得到错误模块无法找到。我正在使用Angular Compiler Plugin.Here是我的package.json

  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/cdk": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/material": "^5.0.0",
    "@angular/material-moment-adapter": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/platform-server": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@ngtools/webpack": "^1.9.0",
    "@types/webpack-env": "1.13.0",
    "angular-router-loader": "^0.8.0",
    "angular2-infinite-scroll": "^0.3.5",
    "angular2-template-loader": "0.6.2",
    "aspnet-prerendering": "^3.0.1",
    "aspnet-webpack": "^2.0.1",
    "awesome-typescript-loader": "3.2.1",
    "bootstrap": "^3.3.7",
    "bootstrap-select": "^1.12.4",
    "css": "2.2.1",
    "css-loader": "0.28.4",
    "es6-shim": "0.35.3",
    "event-source-polyfill": "0.0.9",
    "expose-loader": "0.7.3",
    "extract-text-webpack-plugin": "2.1.2",
    "file-loader": "0.11.2",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "html-loader": "0.4.5",
    "isomorphic-fetch": "2.2.1",
    "jquery": "^3.2.1",
    "json-loader": "0.5.4",
    "moment": "^2.19.4",
    "ng2-auto-complete": "^0.12.0",
    "ngx-bootstrap": "^1.9.3",
    "preboot": "4.5.2",
    "raw-loader": "0.5.1",
    "reflect-metadata": "0.1.10",
    "rxjs": "^5.5.2",
    "select2": "^4.0.4",
    "style-loader": "0.18.2",
    "to-string-loader": "1.1.5",
    "typescript": "2.4.2",
    "url-loader": "0.5.9",
    "webpack": "2.5.1",
    "webpack-hot-middleware": "2.18.2",
    "webpack-merge": "4.1.0",
    "zone.js": "0.8.12"
  }

我还尝试使用不同的方法加载我的组件，如下所示：

path: 'hero', loadChildren: () => {
    return Promise.resolve(require('./components/hero/hero.module')['HeroModule']);
} 

但后来我得到错误对象类型的索引签名隐式具有“任何”类型。

Answer 1

我创建了4个模块，这些模块都是在Angular中加载的

首先你必须从app.module.ts文件中删除你想要延迟加载的模块，这里是示例，我懒得加载HomePage模块

app.module.ts

   import { NgModule} from '@angular/core';


//modules

   import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
   import { BrowserModule } from '@angular/platform-browser';



  //routing modules

    import { AppRoutingModule } from './app-routing.module';



   @NgModule({
     declarations: [ ],

     imports: [
     BrowserModule,
     BrowserAnimationsModule,
     AppRoutingModule, ],

      bootstrap: [AppComponent] 
      })
     export class AppModule {}

您想要延迟加载的模块将出现在app-routing-module中

APP-路由module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';



 const routes: Routes = [
 { path: "", component: LandingComponent },

 {
  path: "homepage",
  loadChildren: "./homepage/homepage.module#HomePageModule"
 },

 ];

 @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
 export class AppRoutingModule { }

load children是我们在我们的应用程序中延迟加载任何模块时使用的属性，而#HomePageModule是我想要延迟加载的模块的名称

要检查该模块是否已延迟加载，当您构建角度应用程序时，它将为您提供这样的块

chunk {homepage.module} homepage.module.chunk.js, 
homepage.module.chunk.js.map () 6.41 kB  [rendered]
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB 
[entry] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map 
(polyfills) 215 kB [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 177 kB 
[initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 5.31 MB 
[initial] [rendered]

它显示您的模块已成功延迟加载

我希望这能帮到您