When I build a project using angular-cli, it bundles all project files into a main main package.
I'm using lazy routing in the app and once the app loads, I can navigate.
Is there a way to split the main package into multiple files based on lazy loading routing modules?
Below is the configuration in the angle-
{
"project": {
"version": "1.0.0-beta.15",
"name": "maddy-test-project"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": "styles/content",
"index": "",
"main": "",
"test": "",
"tsconfig": "",
"prefix": "",
"mobile": false,
"styles": [
""
],
"scripts": [
"styles/"
],
"environments": {
"source": "environments/",
"dev": "environments/",
"prod": "environments/"
}
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "./"
}
},
"test": {
"karma": {
"config": "./"
}
},
"defaults": {
"styleExt": "less",
"prefixInterfaces": false
}
}
Below is
{
"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",
"": "^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"
}
}
Thanks in advance! !
It's what NgModule and() do. This is a very good article for starting large angle 2 modular application development:/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 should be loaded via an Ajax call.
Soon, in order to move some logic and components in a lazy module, you can run the following command:
ng g module child --routing
angular-cli will then generate an NgModule (app/child/) and a subrouter configuration (app/child/).
The routes that delay loading this subrouter will be:
{ path: 'child', loadChildren: 'app/child/#ChildModule' }
Finally move the ChildModule you want with a constraint: other modules (as AppModule) will not be able to use any ChildModule dependencies (such as services). If you need it, a good practice is to create a shared module.
/questions/39619003/creating-multiple-bundles-using-angular-cli-webpack
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.