It’s very easy to inadvertently import toplevel css in component styles. Since component css is standalone and self-contained, it will never be shared between components and remains as a single large bundle for each component. This in turn adds a large amount of code that must be processed and increases bundle size.
Related to: TOOL-949
This allows the output path of an application's index HTML file to be controlled independently of the input file. The output path for the file will be considered relative to the application's configured output path. This allows an application to contain multiple input index files for different configurations and allow the output file to remain constant. This also enables the placement of the index file in a subdirectory within the output path or change the name of the output index file neither of which was previously possible.
The lazy option inside the script and style option is confusing as this option doesn't lazy load a bundle but rather it doesn't inject/reference the script in the HTML. While this option is an enabler for lazy loading, the users will still need to handle on how how this bundle will be lazy loaded. There are also potential use cases beyond lazy loading for the option.
Closes#14814
i18n is not yet implemented in Ivy, we should emit a warning stating this and exit gracefully.
This also swaps the readTsConfig logic to use `@angular/compiler-cli` instead of `typescript`. This is needed because when parsing the tsconfig, typescript is not aware of `angularCompilerOptions` and will not merged them if they are at un upper level tsconfig file when using `extends`.
Closes#14225
10.1 and iOS Safari 10.3
The nomodule polyfill needs to be loaded prior to any script and be
outside of webpack compilation because otherwise webpack will cause the
script to be wrapped in `window["webpackJsonp"]` which causes it to
fail.
This polyfill will only be injected when the either Safari 10.1 or iOS
Safari 10.3 support is required, which is based on the browsers defined in browserslist file.
Fixes#14680
We only use it for a few things but have a strict peerdep.
This strictness causes errors when updating the CLI from 7.x to 8.x projects:
```
Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.1.1 <3.2", would install "3.4.5").
```
`build-angular` did not have a peerdep in 7.x so this never was a problem.
This PR relaxes the peerdep to `">=3.1 < 3.5"`, which covers the 3.1 used in initial CLI 7.0 projects.
When using differential loading with targets ES5 and ES2016+, the
browser with ESM support will pick `script[type="module"]` scripts even
without supporting ES2016+ syntax.
We want to warn users in this case.
Before, the build tasks ran in parallel and so the different webpack
instances competed over the same lines on the console.
To fail fast and to prevent to show the same errors twice, the second
build step is not executed if the first one fails.
As running these tasks in sequence causes issues with watch mode, this
PR also disables differential loading when watch mode is requested.
With this change we turn on differential loading for projects that has es2015 as script target and still want to support browsers which that don't support ES2015.
Supported browsers are defined in the browserlist file.
This change wires up the index generation for multiple bundles, we however don't enable differential loading for users just yet. As this will be done in a separate PR to change over specs to conform with the new files
This PR adds differential loading to the browser builder. First, it checks if differential loading is needed. This is the case if the compilation target is ES2015 while the browserslist points to ES5 browsers.
For providing differential loading, it calls the methods for creating the webpack config for each compilation target (e. g. ES5 and ES2015). The needed differences between those configurations are defined using parameters also added by this PR. Then it calls webpack for each of them and merges the results
This feature is currently hidden behind a flag. To activate it, set the differentialLoading flag in browser/index.ts.
