2017-12-18 264 views
1

我跟着this教程向我的應用添加了延遲加載。一切正常,本地服務器上的罰款,但是當我發表我的應用程序,我得到錯誤模塊不能found.I我採用了棱角分明的編譯器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" }無法在生產中的Angular 5 + ASP.NET Core 2應用中添加延遲加載

我也試圖加載我的部件用difrent辦法像這個:

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

但是然後我得到錯誤對象類型的索引簽名隱式地有一個'任何'類型。

回答

0

我創建了4個模塊,所有都是你必須刪除您從app.module.ts文件要延遲加載的模塊角

第一件事就是懶加載,這裏是例子,我懶加載主頁模塊

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 {} 

的MODUL Ë要延遲加載會在應用程序的路由模塊

應用路由-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 { } 

負載孩子是我們使用屬性時,我們要延遲加載任何模塊中我們的應用程序和#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] 

它顯示了你的模塊已經懶加載成功

我希望這將有助於你