कोणीय-क्ली वेबपैक का उपयोग करके कई बंडल बनाना

Question

जब मैं कोणीय-क्ली का उपयोग करके प्रोजेक्ट का निर्माण करता हूं, तो यह सभी प्रोजेक्ट फ़ाइलों को एक बड़े मुख्य बंडल में बंडल करता है।

मैंने एप्लिकेशन में आलसी रूटिंग का उपयोग किया है और एप्लिकेशन लोड होने के बाद मैं ठीक से नेविगेट कर सकता हूं।

क्या कोई तरीका है जिसमें मुख्य बंडल आलसी लोड किए गए मार्ग मॉड्यूल के आधार पर एकाधिक फ़ाइलों में विभाजित है?

नीचे angular-cli.json

{ 
    "project": { 
    "version": "1.0.0-beta.15", 
    "name": "maddy-test-project" 
    }, 
    "apps": [ 
    { 
     "root": "src", 
     "outDir": "dist", 
     "assets": "styles/content", 
     "index": "default.htm", 
     "main": "main.ts", 
     "test": "test.ts", 
     "tsconfig": "tsconfig.json", 
     "prefix": "", 
     "mobile": false, 
     "styles": [ 
     "styles.less" 
     ], 
     "scripts": [ 
     "styles/wfa-myriad-pro-typekit.js" 
     ], 
     "environments": { 
     "source": "environments/environment.ts", 
     "dev": "environments/environment.ts", 
     "prod": "environments/environment.prod.ts" 
     } 
    } 
    ], 
    "addons": [], 
    "packages": [], 
    "e2e": { 
    "protractor": { 
     "config": "./protractor.conf.js" 
    } 
    }, 
    "test": { 
    "karma": { 
     "config": "./karma.conf.js" 
    } 
    }, 
    "defaults": { 
    "styleExt": "less", 
    "prefixInterfaces": false 
    } 
} 

में विन्यास नीचे पहले से package.json

{ 
    "name": "maddy-test-project", 
    "version": "0.0.1", 
    "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", 
    "@angular/compiler": "2.0.0", 
    "@angular/core": "2.0.0", 
    "@angular/forms": "2.0.0", 
    "@angular/http": "2.0.0", 
    "@angular/platform-browser": "2.0.0", 
    "@angular/platform-browser-dynamic": "2.0.0", 
    "@angular/router": "3.0.0", 
    "d3": "^4.2.3", 
    "jquery": "^3.1.0", 
    "lodash": "^4.15.0", 
    "moment": "^2.15.0", 
    "core-js": "^2.4.1", 
    "rxjs": "5.0.0-beta.12", 
    "toastr": "^2.1.2", 
    "ts-helpers": "^1.1.1", 
    "zone.js": "^0.6.23", 
    "bootstrap-daterangepicker": "^2.1.24" 
    }, 
    "devDependencies": { 
    "@types/d3": "^3.5.35", 
    "@types/google-maps": "^3.1.27", 
    "@types/jasmine": "^2.2.30", 
    "@types/jquery": "^1.10.31", 
    "@types/lodash": "^4.14.34", 
    "@types/toastr": "^2.1.29", 
    "angular-cli": "1.0.0-beta.15", 
    "codelyzer": "~0.0.26", 
    "jasmine-core": "2.4.1", 
    "jasmine-spec-reporter": "2.5.0", 
    "karma": "1.2.0", 
    "karma-chrome-launcher": "^2.0.0", 
    "karma-cli": "^1.0.1", 
    "karma-jasmine": "^1.0.2", 
    "karma-remap-istanbul": "^0.2.1", 
    "protractor": "4.0.5", 
    "ts-node": "1.2.1", 
    "tslint": "3.13.0", 
    "typescript": "2.0.2" 
    } 
} 

धन्यवाद है !!

Answer 1

यह NgModule और RouterModule.forChild() की भूमिका है। यहाँ बड़ा कोणीय 2 मॉड्यूलर aplications developpement शुरू करने के लिए एक बहुत अच्छा लेख है: http://blog.angular-university.io/angular2-ngmodule/

पहली बात यह है कि हम क्या करने की जरूरत या होम घटक के हर उल्लेख अनुप्रयोग घटक से HomeModule और मुख्य मार्ग को दूर करने के लिए है कॉन्फ़िगरेशन:

हम यहां देख सकते हैं कि ऐप घटक अब होम मॉड्यूल आयात नहीं करता है, इसके बजाय रूटिंग कॉन्फ़िगर लोड चाइल्डरेन का उपयोग करता है यह कहने के लिए कि अगर/घर या इसके साथ शुरू होने वाला कोई अन्य यूआरएल हिट हो जाता है, तो फ़ाइल home.module लोड किया जाना चाहिए एक अजाक्स कॉल के माध्यम से।

ng g module child --routing 

फिर कोणीय CLI एक NgModule (app/child/child.module.ts) और एक बच्चे रूटर विन्यास उत्पन्न होगा (app/child/child-routing.module.ts:

शीघ्र ही, कुछ तर्क और एक आलसी मॉड्यूल में घटकों को स्थानांतरित करने के लिए, आप इस आदेश को चला सकते हैं)।

आलसी लोड करने के लिए मार्ग इस बच्चे रूटर हो जाएगा:

{ path: 'child', loadChildren: 'app/child/child.module#ChildModule' } 

और अंत में एक बाधा के साथ आप क्या चाहते हैं के लिए कदम अपने ChildModule में: (AppModule के रूप में) अन्य मॉड्यूल नहीं किसी भी ChildModule निर्भरता का उपयोग करने में सक्षम हो जाएगा (उदाहरण के लिए, एक सेवा की तरह)। यदि आपको इसकी आवश्यकता है, तो साझा मॉड्यूल बनाना एक अच्छा अभ्यास है।

Answer 2

यदि आप उन क्षेत्रों को विभाजित करते हैं जिन्हें आप अलग मॉड्यूल में आलसी होना चाहते हैं, तो आप कई बंडलों का उत्पादन करने में सक्षम होना चाहिए। कोणीय.io वेबसाइट से सीधे रूटिंग और नेविगेशन पर इस plnkr पर एक नज़र डालें। आप अपने मार्गों इस तरह से आप जब के लिए इसी तरह की सेवा एनजी चल रहे निर्माण का उत्पादन करने में सक्षम होना चाहिए कॉन्फ़िगर करते हैं:
सूचना हिस्सा फ़ाइलें। मेरी परियोजना में, 'संकट' और 'नायकों' मार्गों पर नेविगेट करते समय, इन खंड फ़ाइलों को अतुल्यकालिक रूप से लोड किया जाता है।

export const routes: Routes = [ 
    { path: '', redirectTo: 'contact', pathMatch: 'full'}, 
    { path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' }, 
    { path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule' } 
];