I read this post - http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/ and I want to include the first step Simple build with minification. into my application. I have configured it like this so far:
system.config.js
(function (global) { System.config({ paths: { 'npm:': 'node_modules/' }, map: { app: 'js', // angular bundles '@angular/core': 'npm:@angular/core/bundles/core.umd.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.js', '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js', // other libraries 'rxjs': 'npm:rxjs', 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js', '@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js' }, packages: { app: { main: './main.js', defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, primeng: { defaultExtension: 'js' } } }); })(this); index.html
<script src="systemjs.config.js"></script> <script src="app.config.js"></script> <script> System.import('app').then( function(module) { return module.start(appConfig, messagePropsData); }).catch(function(err){ console.error(err); }); </script> </head> <!-- 3. Display the application --> <body> <my-app>Loading...</my-app> </body> tsconfig.json
{ "compilerOptions": { "target": "ES5", "module": "CommonJS", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false, "inlineSourceMap": false, "inlineSources": false, "outDir": "js" }, "exclude": [ "node_modules", "typings/main", "typings/main.d.ts" ], "compileOnSave": true } main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic' import { ValueProvider } from '@angular/core'; import { AppModule } from './app.module'; import { AppConfig, APP_CONFIG, CONFIG_PROVIDER } from './app.config'; export function start(config: any) { CONFIG_PROVIDER.provider = { provide:APP_CONFIG, useValue: config } return platformBrowserDynamic([CONFIG_PROVIDER.provider]).bootstrapModule(AppModule); } As you can see when I work with this command "start": "tsc && concurrently \"tsc -w\" \"lite-server\" " all my generated .js files from the .ts files are created in the js directory. Now I can use the build_prod command from the article (change it to js directory ofcourse) to make the bundle and minified bundle in that directory. The problem is that I've told my app to look for the main.js file in that directory and I don't want to name the bundled file main.js as well (app.bundle.minified.js is quite better) (the command will first remove all the other files from the js directory and put only the bundled files), so how can I tell my app that for starting it should look for the app.bundle.minified.js file to start, then for the app.bundle.js file and after that for the main.js.
Basically I wan't the app to start with the bundled minified version and if that version isn't found it should start with the main.js file. What should I change in system.config.js and index.html. How can I do this?
2 Answers
Answers 1
I think, you could use angular-cli for angular2 project generation and building
ng-build can be used for building the project for different environments.
Answers 2
how can I tell my app that for starting it should look for the app.bundle.minified.js file to start, then for the app.bundle.js file and after that for the main.js.
I think, the answer is quit simple.
When you made the application using Typescript and anything it transpile it to js. so there at the very top of the page you can do
<script src="app.bundle.minified.min.js"></script> <script src="app.bundle.js"></script> <script src="main.js"></script> But, these files are called automatically, based on your source code. So, I guess you need first make sure your app is working fine before running ng build
0 comments:
Post a Comment