Angular 2 with CLI - build for production

问题:

I have freshly installed angular-cli 1.0.0.beta.17 (latest one), start new project, able to serve project on port 4200 with no problems - just standard "app works!" message.

However when I try to build for production this empty and generic application by using command ng build --prod I do not have main.*.js file created at all and have a few screens of warnings like:

• Dropping unused function...
• Site effects in initialization...
• etc

This is a brand new empty project - I did not have a chance to break anything yet...

How to build production version ?

回答1:

Per Angular-cli's github wiki, these are the most common ways to initiate a dev and production build

# these are equivalent
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod
# and so are these
ng build --target=development --environment=dev
ng build --dev --e=dev
ng build --dev
ng build

There are different default flags that will affect --dev vs --prod builds.

Flag                 --dev      --prod
--aot                false      true
--environment        dev        prod
--output-hashing     media      all
--sourcemaps         true       false
--extract-css        false      true

--prod also sets the following non-flaggable settings:

• Adds service worker if configured in .angular-cli.json.
• Replaces process.env.NODE_ENV in modules with the production value (this is needed for some libraries, like react).
• Runs UglifyJS on the code.

---

I need to do some troubleshooting in order to get AOT working. When I ran:

ng build --prod --aot=false

I would get will return a error similar to

Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory'

Originally, I had to do some project refactoring to get AOT to work. However, they may be a fix if you are encountering this error. Try

npm i enhanced-resolve@3.3.0

https://github.com/angular/angular-cli/issues/7113

回答2:

Try using: ng build --target=production This should work.

回答3:

try this

 ng build --env=prod

The build system defaults to the dev environment which uses environment.ts, but if you do ng build --env=prod then environment.prod.ts will be used instead.

sample result if your project is new angular cli app.

 10% building mod3439ms building modules                                                                     1ms add01564ms 917ms asset45ms emittingHash: 9216e76d6f10637c945c                  
Version: webpack 2.1.0-beta.22
Time: 6358ms
            Asset       Size  Chunks             Chunk Names
   main.bundle.js     2.6 MB    0, 2  [emitted]  main
 styles.bundle.js    10.2 kB    1, 2  [emitted]  styles
        inline.js    5.53 kB       2  [emitted]  inline
         main.map    2.61 MB    0, 2  [emitted]  main
       styles.map    14.2 kB    1, 2  [emitted]  styles
       inline.map    5.59 kB       2  [emitted]  inline
       index.html  482 bytes          [emitted]  
assets/.npmignore    0 bytes          [emitted]  
chunk    {0} main.bundle.js, main.map (main) 2.06 MB {1} [initial] [rendered]
chunk    {1} styles.bundle.js, styles.map (styles) 9.96 kB {2} [initial] [rendered]
chunk    {2} inline.js, inline.map (inline) 0 bytes [entry] [rendered]
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  2.82 kB       0       
    chunk    {0} index.html 350 bytes [entry] [rendered]

Done and it's under /dist unless you have changed outDir in angular-cli.json

回答4:

With the cli version (1.0.1) use :

ng build --prod

This will give you the dist folder with the index.html and all the bundled js file ready for production.

回答5:

You must update latest version angular-cli, typescript. If you use command:

ng build --prod --aot=false

Your project compile JIT compilation and must be work if you use angular-cli.

if you want build with command

ng build --prod --aot=true

then it be AOT compilation and you must update main.ts file into:

import { enableProdMode } from '@angular/core';
import { platformBrowser }    from '@angular/platform-browser';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowser().bootstrapModuleFactory(AppModule);

回答6:

Whether Aot is or is not implemented.

If Aot is implemented :

ng build --prod

If Aot is not implemented :

ng build --prod --aot=false

回答7:

You want the AOT, which is implied by the use of the -prod switch. Unfortunately, when Angular CLI itself breaks, the error messages are not helpful. This is how I solved it:

npm install enhanced-resolve@3.3.0

I found the solution a long, long way down this page: https://github.com/angular/angular-cli/issues/7113

I've seen some mention that updating Angular CLI version to at least 1.2.6. gets around the problem as well, but haven't tested it yet.

回答8:

There are a lot of commands to build the angular application to production mode using angular cli.

ng build --env=prod

Once you will execute this command on cmd dist default folder will create that will contain all the minified files related to prod build, but it will not set the base path in the index.html. To change in index.html either go and do the manual change like adding the (.) ie.

<base href="./">

You can also pass the parameter while building the code in prod mode using angular/CLI command.

ng build --base-href=./ --env=prod

There are other commands as well to build like passing the AOT and build-optimizer ( to reduce bundle sizes).

ng build --prod --build-optimizer

If you want to change the default folder name (dist) after build then you can change the outDir value in the .angular-cli.json.

回答9:

These are uglify js warnings either from your java-script source code or from the third party libraries you are using in your project.For now you can ignore them.

Angular cli team is working on suppressing this for the prod build https://github.com/angular/angular-cli/pull/1609