angular-cli webpackを使用して複数のバンドルを作成する

Question

私はangle-cliを使ってプロジェクトをビルドすると、すべてのプロジェクトファイルを1つの大きなメインバンドルにまとめます。

私はアプリケーションで遅延ルーティングを使用していますが、アプリケーションがロードされるとうまく移動できます。

メインバンドルを遅延ロードモジュールに基づいて複数のファイルに分割する方法はありますか？

は、以下の以下の事前に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" 
    } 
} 

おかげで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 
    } 
} 

で構成です!!

Answer 1

それは、NgModuleとRouterModule.forChild（）の役割です。ここでは、大きな角度2つのモジュラーのaplicationsの者協会を開始するために非常に良い記事です：http://blog.angular-university.io/angular2-ngmodule/

私たちが行う必要がある最初の事は、アプリケーションコンポーネントおよびメインルーティングからホームコンポーネントまたはHomeModuleのすべての言及を削除することです設定：

ここで、AppコンポーネントはHomeModuleをインポートしなくなりました。代わりに、ルーティング設定はloadChildrenを使用して、/ homeや他のURLからヒットした場合、home.moduleファイルをロードする必要がありますAjaxコールを介して。

ng g module child --routing 

その後NgModule（app/child/child.module.ts）と子ルータの設定を生成します角度-CLI（app/child/child-routing.module.ts：

まもなく、怠惰なモジュール内のいくつかのロジックとコンポーネントを移動するには、このコマンドを実行することができます）。

遅延読み込みのためのルートこの子ルータは次のようになります。

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

そして最後には、1つの制約を使用してChildModuleに欲しいものを移動します（AppModuleなど）他のモジュールは、任意のChildModuleの依存関係を使用することはできません（例えば、サービスのように）。必要な場合は、共有モジュールを作成することをお勧めします。

Answer 2

あなたが分割したい領域を別々のモジュールに分割する場合は、複数のバンドルを生成できるはずです。このplnkrを、angle.ioのウェブサイトから直接取得したルーティングとナビゲーションについて見てみましょう。 このようにルートを設定すると、ngを実行するときにbuildを生成できるはずです。
チャンクファイルに注目してください。私のプロジェクトでは、これらのチャンクファイルは、「危機」と「ヒーローズ」ルートに移動するときに非同期にロードされます。

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