वेबपैक

Question

के साथ कोणीय-क्ली का उपयोग करके आलसी लोड फीचर मॉड्यूल का प्रयास करते समय त्रुटि हाय मैं अपने कोणीय 2 ऐप को बनाने के लिए वेबपैक (+ उत्पादकता) के साथ कोणीय-क्ली का उपयोग करने की कोशिश कर रहा हूं लेकिन मुझे आलसी लोड मॉड्यूल की कोशिश करते समय समस्याएं आ रही हैं संस्करण beta.10 साथ काम कर रहे थे जो ...

परियोजना संरचना:

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

मॉड्यूल/घर/घर। 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] } 
]); 

मॉड्यूल/घर/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 {} 

कंसोल त्रुटि संदेश:

क्या मैं यहाँ भूल रहा है? मैं इस पर आगे बढ़ने के तरीके पर कहीं भी कोई दस्तावेज नहीं ढूंढ पाया ... अग्रिम धन्यवाद!

Answer 1

इस के लिए एक लोडर है (angular2-router-loader)। हालांकि आप कॉन्फ़िगरेशन हैक किए बिना सीएलआई के साथ इसका उपयोग नहीं कर सकते हैं। सौभाग्य से, es6-promise-loader सीएलआई आउट-ऑफ-द-बॉक्स के साथ काम करता है।

यह वही मेरे लिए बाहर काम किया है:

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

तो इस तरह से अपने मार्ग को परिभाषित:

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

पहले हम ES6-वादा-लोडर की आवश्यकता होगी

es6-promise-loader उपरोक्त को इसके साथ बदल देता है:

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

जो वेबपैक के साथ मॉड्यूल लोड करने का उचित तरीका है, लेकिन हर मार्ग में बोझिल करने के लिए बोझिल है।

अपने app.routers.ts पर ऐसे ही एक समारोह बनाने के लिए::

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') 

    } 
]; 

काम ठीक मेरे लिए

Answer 2

मैं एक समाधान है।

Answer 3

कोणीय-CLI SystemJS से Webpack के लिए, beta.10 और beta.14 के बीच निर्माण प्रणाली बदल दिया है।

मैं कोणीय CLI (beta.17) के साथ आलसी लोड हो रहा है उपयोग करने की कोशिश और यह मेरे लिए काम किया।

मेरी समझ के अनुसार,

SystemJs - हम आलसी लोड हो रहा है पूर्व के लिए पूरा पथ देने की आवश्यकता: ./app/dashboard/dashboard.module#DashboardModule

Webpack - हमें आलसी लोडिंग के लिए सापेक्ष पथ देने की आवश्यकता है पूर्व: ./dashboard/dashboard.module#DashboardModule

नोट: प्रतिबिंबित परिवर्तन देखने के लिए सर्वर को पुनरारंभ करना न भूलें। (एनजी सेवा)

इस मामूली अवलोकन ने मेरी समस्या को ठीक किया। कृपया देखें कि यह उपयोगी है या मुझे कुछ भी सही है।