This change allows the compiler options used by the TypeScript paths plugin to be updated if the TypeScript configuration file is changed during a rebuild.
This change integrates the Ivy Webpack compiler plugin into the browser builder.
When Ivy is enabled, which is the default behavior for applications, this plugin will now be used.
If needed, the previous plugin can still be used by enabling the `NG_BUILD_IVY_LEGACY` environment variable.
This change introduces a new Ivy Webpack compiler plugin. The plugin leverages the Ivy APIs from the @angular/compiler-cli package. The plugin also simplifies and reduces the amount of code within the plugin by leveraging newer TypeScript features and capabilities. The need for the virtual filesystem has also been removed. The file replacements capability was the primary driver for the previous need for the virtual filesystem. File replacements are now implemented using a two-pronged approach. The first, for TypeScript, is to hook TypeScript module resolution and adjust the resolved modules based on the configured file replacements. This is similar in behavior to TypeScript path mapping. The second, for Webpack, is the use of the NormalModuleReplacementPlugin to facilitate bundling of the configured file replacements. An advantage to this approach is that the build system (both TypeScript and Webpack) are now aware of the replacements and can operate without augmenting multiple aspects of system as was needed previously.
The plugin also introduces the use of TypeScript’s builder programs. The current primary benefit is more accurate and simplified dependency discovery. Further, they also provide for the introduction of incremental build support and incremental type checking.
The error message for when a TypeScript or JavaScript file is incorrectly used as a style or template within a component will now also provide the name of the file being incorrectly used.
The Webpack 5 filesystem watch function has a different return object type than Webpack 4. This change adjusts the behavior based on the used Webpack version.
When using CommonJs as module format TypeScript will generate unreferenced `require` when using `ts.createImportDeclaration`.
```js
const external_component_html_1 = require("!raw-loader!./external.component.html");
const core_1 = require("@angular/core");
let ExampleComponent = class ExampleComponent {
};
ExampleComponent = __decorate([
core_1.Component({
selector: 'example-compoent',
template: __NG_CLI_RESOURCE__0,
})
], ExampleComponent);
```
More context: https://github.com/microsoft/TypeScript/issues/18369#issuecomment-329852888Closes#18718
With this change we update the replace_resources transformer for styles and templates to use ES6 module import syntax instead of the CommonJs require syntax.
