Lỗi khi cố gắng mô-đun tính năng tải lười bằng cách sử dụng angular-cli với webpack

Question

Xin chào! Tôi đang cố gắng sử dụng angular-cli với webpack (+ năng suất) để xây dựng ứng dụng angular2 của mình nhưng tôi gặp sự cố khi cố gắng tải mô-đun lười mà đã làm việc với phiên bản beta.10 ...

cấu trúc dự án:

package.json

{ 
    "name": "my-app", 
    "version": "0.0.0", 
    "license": "MIT", 
    "angular-cli": {}, 
    "scripts": { 
    "start": "ng serve", 
    "lint": "tslint \"src/**/*.ts\"", 
    "test": "ng test", 
    "pree2e": "webdriver-manager update", 
    "e2e": "protractor" 
    }, 
"private": true, 
"dependencies": { 
    "@angular/common": "2.0.0-rc.7", 
    "@angular/compiler": "2.0.0-rc.7", 
    "@angular/core": "2.0.0-rc.7", 
    "@angular/forms": "^2.0.0-rc.7", 
    "@angular/http": "2.0.0-rc.7", 
    "@angular/platform-browser": "2.0.0-rc.7", 
    "@angular/platform-browser-dynamic": "2.0.0-rc.7", 
    "@angular/router": "3.0.0-rc.2", 
    "angular2-cookie": "1.2.3", 
    "core-js": "2.4.0", 
    "material-design-icons": "2.2.3", 
    "material-design-lite": "1.2.0", 
    "reflect-metadata": "0.1.3", 
    "rxjs": "5.0.0-beta.12", 
    "ts-helpers": "^1.1.1", 
    "zone.js": "0.6.21" 
    }, 
    "devDependencies": { 
    "@types/jasmine": "2.2.30", 
    "@types/protractor": "1.5.16", 
    "angular-cli": "^1.0.0-beta.11-webpack.9-4", 
    "codelyzer": "0.0.26", 
    "jasmine-core": "2.4.1", 
    "jasmine-spec-reporter": "2.5.0", 
    "karma": "0.13.22", 
    "karma-chrome-launcher": "0.2.3", 
    "karma-coverage": "1.0.0", 
    "karma-jasmine": "0.3.8", 
    "protractor": "3.3.0", 
    "ts-node": "1.2.1", 
    "tslint": "3.13.0", 
    "typescript": "2.0.0" 
    } 
} 

angular- cli.json

{ 
    "project": { 
    "version": "1.0.0-beta.11-webpack", 
    "name": "my-app" 
    }, 
    "apps": [ 
    { 
     "main": "main.ts", 
     "test": "test.ts", 
     "tsconfig": "tsconfig.json", 
     "prefix": "app", 
     "index": "index.html", 
     "root": "src", 
     "mobile": false, 
     "scripts": [ 
     "polyfills.ts", 
     "../node_modules/material-design-lite/material.min.js" 
     ], 
     "styles": [ 
     "../node_modules/material-design-icons/iconfont/material-icons.css", 
     "../node_modules/material-design-lite/material.css" 
     ], 
     "assets": "assets", 
     "environments": { 
     "source": "environments/environment.ts", 
     "dev": "environments/environment.ts", 
     "prod": "environments/environment.prod.ts" 
     } 
    } 
    ], 
    "addons": [], 
    "packages": [], 
    "e2e": { 
    "protractor": { 
     "config": "config/protractor.conf.js" 
    } 
    }, 
    "test": { 
    "karma": { 
     "config": "config/karma.conf.js" 
    } 
    }, 
    "defaults": { 
    "styleExt": "scss", 
    "prefixInterfaces": false 
    } 
} 

tsconfig.json

{ 
    "compilerOptions": { 
    "declaration": false, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "lib": [ 
     "es6", 
     "dom" 
    ], 
    "mapRoot": "./", 
    "module": "es6", 
    "moduleResolution": "node", 
    "outDir": "../dist/out-tsc", 
    "sourceMap": true, 
    "target": "es5", 
    "typeRoots": [ 
     "../node_modules/@types" 
    ], 
    "types": [ 
     "jasmine" 
    ] 
    } 
} 

app.routes.ts

import {Routes, RouterModule} from "@angular/router"; 
import {PageNotFoundComponent} from "./404.component"; 
import {AuthenticationGuard} from "./base/security"; 

const routes: Routes = [ 
    { path: '', redirectTo: 'home', pathMatch: 'full', canActivate: [AuthenticationGuard] }, 
    { path: 'home', loadChildren: 'app/modules/home/home.module#HomeModule' }, 
    { path: '**', component: PageNotFoundComponent } 
]; 

export const routing = RouterModule.forRoot(routes, { useHash: true }); 

app.module.ts

import {NgModule} from "@angular/core"; 
import {BrowserModule} from "@angular/platform-browser"; 
import {routing} from "./app.routes"; 
import {AppComponent} from "./app.component"; 
import {PageNotFoundComponent} from "./404.component"; 
import {CoreModule} from "./core"; 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    routing, 
    CoreModule 
    ], 
    declarations: [ 
    AppComponent, 
    PageNotFoundComponent 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule {} 

module/home/home. routes.ts

import {RouterModule} from '@angular/router'; 
import {HomeComponent} from './home.component'; 

import {AuthenticationGuard} from '../../base/security'; 

export const routing = RouterModule.forChild([ 
    { path: '', component: HomeComponent, canActivate: [AuthenticationGuard] } 
]); 

modules/home/home.module.ts

import {NgModule} from '@angular/core'; 
import {BaseModule} from '../../base/base.module'; 
import {routing} from './home.routes'; 
import {HomeComponent} from './home.component'; 
import {NavigationMenuComponent} from '../../base/components'; 

@NgModule({ 
    imports: [ 
    BaseModule, 
    routing 
    ], 
    declarations: [ 
    HomeComponent, 
    NavigationMenuComponent 
    ], 
    exports: [], 
    providers: [] 
}) 
export class HomeModule {} 

thông báo lỗi giao diện điều khiển:

Có điều gì tôi quên đây? Tôi không thể tìm thấy bất kỳ tài liệu nào ở bất cứ đâu về cách tiến hành ... Cảm ơn bạn trước!

Answer 1

Có bộ nạp cho điều này (angular2-router-loader). Tuy nhiên bạn không thể sử dụng nó với CLI mà không cần hack cấu hình. May mắn thay, es6-promise-loader không hoạt động với CLI out-of-the-box.

Đây là những gì làm việc ra cho tôi:

Đầu tiên chúng ta sẽ cần es6-hứa-loader:

npm i --save-dev es6-promise-loader

Sau đó, xác định lộ trình của bạn như thế này:

{path:"lazy", loadChildren:() => require('es6-promise!./path/to/module')('ClassName')}

các es6-promise-loader thay thế các điều trên bằng cách này:

loadChildren:() => new Promise(function (resolve) { 
     require.ensure([], function (require) { 
      resolve(require('./path/to/module')['ClassName'])); 
     }); 
     }); 

đó là cách thích hợp để tải mô-đun với gói webpack, nhưng cồng kềnh để đưa vào mọi tuyến đường.

Answer 2

tôi có một giải pháp:

trên app.routers.ts bạn tạo một hàm như thế:

let loadAoTModule = (path, module) => { 

    let result =() => new Promise(function (resolve) { 
    (require as any).ensure([], function (require: any) { 
     resolve(require(path)[module]); 
    }); 
    }); 

    return result; 
} 

const routes: Routes = [ 
    { path: '', redirectTo: 'customer', pathMatch: 'full'}, 

    { path   : 'customer' , 
    // for a file locate on 'src/app/customer/customer.module' 
    // and a module 'CustomerModule' 
    loadChildren : loadAoTModule('./customer/customer.module', 'CustomerModule') 

    } 
]; 

làm việc tốt cho tôi.

Answer 3

Angular-cli đã thay đổi hệ thống xây dựng giữa beta.10 và beta.14, từ SystemJS thành Webpack.

Tôi đã thử sử dụng tải chậm với angular-cli (beta.17) và nó hoạt động với tôi.

Theo hiểu biết của tôi,

SystemJs - chúng ta cần phải cung cấp cho đường dẫn đầy đủ để tải lười biếng Ex: ./app/dashboard/dashboard.module#DashboardModule

Webpack - chúng tôi cần phải cung cấp đường dẫn tương đối tương đối để tải chậm: Ví dụ: ./dashboard/dashboard.module#DashboardModule

Lưu ý: Đừng quên khởi động lại máy chủ để xem các thay đổi phản ánh. (Ng phục vụ)

Quan sát nhỏ này đã khắc phục được sự cố của tôi. Xin vui lòng xem nếu điều này là hữu ích hoặc sửa tôi trên bất cứ điều gì.