使用angular-cli webpack創建多個包

Question

當我使用angular-cli構建項目時，它將所有項目文件捆綁到一個大主包中。

我已經在應用程序中使用了lazy routing，並且一旦應用程序加載完成，我就可以很好地導航。

有沒有一種方法可以根據延遲加載的路由模塊將主包分成多個文件？下面

在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/

，我們需要做的第一件事是消除家庭成分的每提及或App組件HomeModule和主路由配置：

我們可以在這裏看到，應用程序組件不再導入HomeModule，而是路由配置使用loadChildren來說，如果/ home或任何其他以它開頭的url被命中，那麼應該加載文件home.module通過Ajax調用。

不久，以移動懶惰模塊中的一些邏輯和組件，可以運行下面的命令：

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

如果您將您想要延遲的區域分割成單獨的模塊，則應該能夠生成多個捆綁包。看看這個plnkr關於直接從angular.io網站獲取的路由和導航。 如果你這樣配置你的路由，你應該能夠在運行ng服務時產生一個內部服務，類似於：
注意塊文件。在我的項目中，這些塊文件在導航到「危機」和「英雄」路線時異步加載。

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' } 
];