首页 > 语言 > JavaScript > 正文

使用angular-cli webpack创建多个包的方法

2024-05-06 15:28:41
字体:
来源:转载
供稿:网友

当我使用angular-cli构建项目时,它会将所有项目文件捆绑到一个主要的主包中.

我在应用程序中使用了懒惰路由,一旦应用程序加载,我就可以导航.

有没有一种方法可以将主包分为多个基于懒惰加载的路由模块的文件?

下面是角度-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" }}

提前致谢!!

它是NgModule和RouterModule.forChild()的作用.这是一个非常好的文章,用于启动大型角度2模块化应用开发: http://blog.angular-university.io/angular2-ngmodule/

The first thing that we need to do is to remove every mention of the Home component or the HomeModule from the App component and the main routing configuration:
We can see here that the App component no longer imports HomeModule, instead the routing config uses loadChildren to say that if /home or any other url starting with it gets hit, then the file home.module should be loaded via an Ajax call.

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选