Forcing TypeScript to output commonjs modules instead of es2015 modules drastically improves rebuild speeds, especially for AOT.
This PR forces this option on the following modes:
- `ng build --watch --target=development`
- `ng serve --target=development`
- `ng test --code-coverage=false`
Please note that `--target=development` and `--code-coverage=false` are the defaults.
See https://github.com/webpack/webpack/issues/5863 for the webpack issue.
This should fix errors like the one below for 0.6.0:
```
URL Loader Invalid Options
options['name'] should NOT have additional properties
options.limit should be number
```
We feel build `--build-optimizer` is stable enough to not be experimental anymore.
This PR defaults `build-optimizer` when using Angular 5+ on a production build with `--aot`.
It can still be turned off with `--no-build-optimizer` (or `--build-optimizer=false`).
Fix#8050
This flag allows people who know what theyre doing to bundle the
server build together with all dependencies. It should only be
used when the whole rendering process is part of the main.ts
or one of its dependencies.
Fixes#7903.
Aim to resolve#7514 by including postcss-custom-properties. This will generate extra rules in CSS when a `var()` is used to allow for compatibility with older IE browsers that do not support the feature.
This adds the new parameter `missingTranslation` for AoT that was added in angular/angular/pull/15987 and that lets you define the MissingTranslationStrategy
Adds sourcemap and minification to javascript added via the `scripts` array in `.angular-cli.json`.
`script-loader` is no longer used, which should help with CSP since it used `eval`.
Scripts will no longer appear in the console output for `ng build`, as they are now assets instead of webpack entry points.
It's no longer possible to have the `output` property of both a `scripts` and a `styles` entry pointing to the same file. This wasn't officially supported or listed in the docs, but used to be possible.
Fix#2796Fix#7226Fix#7290
Related to #6872
This PR doesn't change new projects to use 2.4 since I have seen some reports of possible problems in `@angular/*`.
Instead, it:
- removes the dependency restrictions on <2.3
- bumps related dependencies to the minimum that supports 2.4 (`rxjs@^5.4.2`, `ts-node@~3.2.0`)
- builds the CLI itself using 2.4
So if you want to install ts 2.4 in your new project, the CLI itself won't stop you.
Fix#6827
Followup to #6881
Allow controlling chunk naming via the `--named-chunks` flag, which can be set on `.angular-cli.json` as well.
Defaults to true in development, false in production.
Adds the new flag `--build-optimizer` (`--bo`), usable only with `--aot` (or `--prod` since it auto enables `--aot`).
This feature is experimental, and may not work correctly on your project. Should it work, total bundle size should go down. Savings are heavily dependent on the project.
See https://github.com/angular/devkit/tree/master/packages/angular_devkit/build_optimizer for details about all the optimizations applied.
Usage: `ng build --prod --build-optimizer`. Disabling the vendor chunk has been shown to improve total savings, and is done automatically when `--bo` is specified unless `--vendor-chunk` has a value.
Please let us know if using `--build-optimizer` breaks your project so we can improve it further. Repos are very welcome.
Adds following defaults to `.angular-cli.json` under `defaults`: `sourcemaps`, `baseHref`, `progress`, `poll`, `deleteOutputPath`, `preserveSymlinks`, `showCircularDependencies`.
They can be set via `ng set defaults.build.KEY = VALUE`.
Also removes `apps.0.showCircularDependencies`. This is not a breaking chance since it was only added in 1.3.0-beta.0.
Followup to https://github.com/angular/angular-cli/pull/6884#discussion_r125533830.
Circular dependencies, like `app.module.ts` importing `app.component.ts` which in turn imports `app.module.ts`, now display a warning during builds:
```
kamik@T460p MINGW64 /d/sandbox/master-project (master)
$ ng build
Hash: 3516b252f4e32d6c5bb8
Time: 8693ms
chunk {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 160 kB {4} [initial] [rendered]
chunk {1} main.bundle.js, main.bundle.js.map (main) 5.95 kB {3} [initial] [rendered]
chunk {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered]
chunk {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 1.88 MB [initial] [rendered]
chunk {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
WARNING in Circular dependency detected:
src\app\app.module.ts -> src\app\app.component.ts -> src\app\app.module.ts
WARNING in Circular dependency detected:
src\app\app.component.ts -> src\app\app.module.ts -> src\app\app.component.ts
```
It is important to detect and eliminate circular dependencies because leaving them in might lead to `Maximum call stack size exceeded` errors, or imports being `undefined` at runtime.
To remove these warnings from your project you can factor out the circular dependency into a separate module.
For instance, if module A imports `foo` from module B, and module B imports `bar` from module A, it is enough to extract `foo` into module C.
You can turn off these warnings by running ng set apps.0.hideCircularDependencyWarnings=true. This will add the "hideCircularDependencyWarnings": true value to your .angular-cli.json and disable the warnings.
Fix#6309Fix#6739
A previous change broke the logic which brings an application ngsw-manifest.json into the Webpack build for merging with the auto-generated configuration. It caused the GlobCopyWebpackPlugin to look in the wrong directory for the existing manifest. This change sets the working directory for the copy plugin explicitly.
Fixes#6654.
