Issue
What is the best method to bundle Angular (version 2, 4, 6, ...) for production on a live web server.
Please include the Angular version within answers so we can track better when it moves to later releases.
Solution
2 to 14
(TypeScript) with Angular CLI
OneTime Setup
npm install -g @angular/cli
ng new projectFolder
creates a new application
Bundling Step
ng build
(run in command line when directory isprojectFolder
).flag
prod
bundle for production is now the default (see the Angular documentation to customize it if needed).Compress using Brotli compression the resources using the following command
for i in dist/*/*; do brotli $i; done
bundles are generated by default to projectFolder/dist(/$projectFolder
for v6+)**
Output
Sizes with Angular 14.0.2
with CLI 14.0.2
and option CSS without Angular routing
dist/main.[hash].js
Your application bundled [ size: 118 KB for new Angular CLI application empty, 36 KB compressed].dist/polyfill-[es-version].[hash].bundle.js
the polyfill dependencies (@angular, RxJS...) bundled [ size: 34 KB for new Angular CLI application empty, 11 KB compressed].dist/index.html
entry point of your application.dist/runtime.[hash].bundle.js
webpack loaderdist/style.[hash].bundle.css
the style definitionsdist/assets
resources copied from the Angular CLI assets configuration
Deployment
You can get a preview of your application using the ng serve --prod
command that starts a local HTTP server such that the application with production files is accessible using http://localhost:4200. This is not safe to use for production usage.
For a production usage, you have to deploy all the files from the dist
folder in the HTTP server of your choice.
Answered By - Nicolas Henneaux
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.