@ngtools/webpack
Advanced tools
Webpack plugin that AoT compiles your Angular components and modules.
The @ngtools/webpack package is an Angular compiler plugin for Webpack. It allows developers to use the Angular compiler within a Webpack build process. This integration facilitates tasks such as Ahead-of-Time (AOT) compilation, lazy loading, and other Angular-specific optimizations directly within a Webpack workflow.
Ahead-of-Time (AOT) Compilation
This feature enables the Angular compiler to compile the application components ahead of time, converting Angular HTML and TypeScript code into efficient JavaScript code during the build process. This reduces the runtime processing by pre-compiling templates and components.
const { AngularCompilerPlugin } = require('@ngtools/webpack');
module.exports = {
entry: './src/main.ts',
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.ts$/,
loader: '@ngtools/webpack'
}
]
},
plugins: [
new AngularCompilerPlugin({
tsConfigPath: './tsconfig.json',
entryModule: './src/app/app.module#AppModule',
sourceMap: true
})
]
};Lazy Loading
Lazy loading is a technique to initialize components or modules only when they are needed, which can significantly reduce the initial load time of an application. The @ngtools/webpack package supports lazy loading by integrating with Angular's routing mechanism.
const { AngularCompilerPlugin } = require('@ngtools/webpack');
module.exports = {
// Configuration options...
plugins: [
new AngularCompilerPlugin({
// Plugin options...
lazyModules: ['/path/to/lazy/module#ModuleName']
})
]
};Similar to @ngtools/webpack, awesome-typescript-loader is a loader for Webpack that allows you to transpile TypeScript into JavaScript. While it provides TypeScript compilation like @ngtools/webpack, it lacks the deep integration with Angular's compiler for features like AOT compilation and lazy loading.
This loader for Webpack enables lazy loading for Angular applications by allowing asynchronous loading of Angular modules through the router. It's similar to the lazy loading feature of @ngtools/webpack but is more focused and does not include other Angular-specific optimizations.
Webpack 5.x plugin for the Angular Ahead-of-Time compiler. The plugin also supports Angular JIT mode. When this plugin is used outside of the Angular CLI, the Ivy linker will also be needed to support the usage of Angular libraries. An example configuration of the Babel-based Ivy linker is provided in the linker section. For additional information regarding the linker, please see: https://angular.dev/tools/libraries/creating-libraries#consuming-partial-ivy-code-outside-the-angular-cli
In your webpack config, add the following plugin and loader.
import { AngularWebpackPlugin } from '@ngtools/webpack';
exports = {
/* ... */
module: {
rules: [
/* ... */
{
test: /\.[jt]sx?$/,
loader: '@ngtools/webpack',
},
],
},
plugins: [
new AngularWebpackPlugin({
tsconfig: 'path/to/tsconfig.json',
// ... other options as needed
}),
],
};
The loader works with webpack plugin to compile the application's TypeScript. It is important to include both, and to not include any other TypeScript loader.
tsconfig [default: tsconfig.json] - The path to the application's TypeScript Configuration file. In the tsconfig.json, you can pass options to the Angular Compiler with angularCompilerOptions. Relative paths will be resolved from the Webpack compilation's context.compilerOptions [default: none] - Overrides options in the application's TypeScript Configuration file (tsconfig.json).jitMode [default: false] - Enables JIT compilation and do not refactor the code to bootstrap. This replaces templateUrl: "string" with template: require("string") (and similar for styles) to allow for webpack to properly link the resources.directTemplateLoading [default: true] - Causes the plugin to load component templates (HTML) directly from the filesystem. This is more efficient if only using the raw-loader to load component templates. Do not enable this option if additional loaders are configured for component templates.fileReplacements [default: none] - Allows replacing TypeScript files with other TypeScript files in the build. This option acts on fully resolved file paths.inlineStyleFileExtension [default: none] - When set inline component styles will be processed by Webpack as files with the provided extension.The Ivy linker can be setup by using the Webpack babel-loader package.
If not already installed, add the babel-loader package using your project's package manager.
Then in your webpack config, add the babel-loader with the following configuration.
If the babel-loader is already present in your configuration, the linker plugin can be added to
the existing loader configuration as well.
Enabling caching for the babel-loader is recommended to avoid reprocessing libraries on
every build.
For additional information regarding the babel-loader package, please see: https://github.com/babel/babel-loader/tree/main#readme
import linkerPlugin from '@angular/compiler-cli/linker/babel';
exports = {
/* ... */
module: {
rules: [
/* ... */
{
test: /\.[cm]?js$/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
compact: false,
plugins: [linkerPlugin],
},
},
},
],
},
};
19.0.0 (2024-11-19)
The browserTarget option has been removed from the DevServer and ExtractI18n builders. buildTarget is to be used instead.
Protractor is no longer supported.
Protractor was marked end-of-life in August 2023 (see https://protractortest.org/). Projects still relying on Protractor should consider migrating to another E2E testing framework, several support solid migration paths from Protractor.
The deprecated fileBuffer function is no longer available. Update your code to use stringToFileBuffer instead to maintain compatibility.
Note: that this change does not affect application developers.
@angular/localize/init polyfill will no longer be added automatically to projects. To prevent runtime issues, ensure that this polyfill is manually included in the "polyfills" section of your "angular.json" file if your application relies on Angular localization features.The CommonEngine API now needs to be imported from @angular/ssr/node.
Before
import { CommonEngine } from '@angular/ssr';
After
import { CommonEngine } from '@angular/ssr/node';
| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | ---- | --------------------------------------------- | | 37693c40e | feat | add package manager option to blank schematic |
| Commit | Type | Description |
| --------------------------------------------------------------------------------------------------- | ---- | -------------------------------------------------------------------------- |
| a381a3db1 | feat | add option to export component as default |
| 755f3a07f | feat | add option to setup new workspace or application as zoneless mode |
| cfca5442e | feat | integrate withEventReplay() in provideClientHydration for new SSR apps |
| 292a4b7c2 | feat | update app-shell and ssr schematics to adopt new Server Rendering API |
| b1504c3bc | fix | component spec with export default |
| 4b4e000dd | fix | don't show server routing prompt when using browser builder |
| 4e2a5fe15 | fix | enable opt-in for new @angular/ssr feature |
| fcf7443d6 | fix | explicitly set standalone:false |
| 7992218a9 | fix | remove declaration and sourceMap from default tsconfig |
| 9e6ab1bf2 | fix | use default import for express |
| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | ---- | ----------------------------------------------------------------- | | 201b60e1d | feat | handle string key/value pairs, e.g. --define | | b847d4460 | fix | recommend optional application update migration during v19 update | | f249e7e85 | perf | enable Node.js compile code cache when available | | ecc107d83 | perf | enable Node.js compile code cache when available |
| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | ---- | ----------------------------- | | 78f76485f | feat | merge object options from CLI |
| Commit | Type | Description |
| --------------------------------------------------------------------------------------------------- | -------- | --------------------------------------------------------- |
| 0a4ef3026 | feat | karma-coverage w/ app builder |
| dcbdca85c | feat | karma+esbuild+watch |
| 54594b5ab | feat | support karma with esbuild |
| ea5ae68da | fix | bring back style tags in browser builder |
| 476f94f51 | fix | fix --watch regression in karma |
| 25d928b4f | fix | fix hanging terminal when browser-sync is not installed |
| 2ec877dd0 | fix | handle basename collisions |
| ab6e19e1f | fix | handle main field |
| 43e7aae22 | fix | remove double-watch in karma |
| 1e37b5939 | fix | serve assets |
| 9d7613db9 | fix | zone.js/testing + karma + esbuild |
| e40384e63 | refactor | remove deprecated browserTarget |
| 62877bdf2 | refactor | remove Protractor builder and schematics |
| Commit | Type | Description |
| --------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------ |
| 0d8a1006d | refactor | remove deprecated fileBuffer function in favor of stringToFileBuffer |
| Commit | Type | Description |
| --------------------------------------------------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------- |
| b6951f448 | feat | add sass to stylePreprocessorOptions in application builder |
| efb434136 | feat | Auto-CSP support as a part of angular.json schema |
| 816e3cb86 | feat | enable component stylesheet hot replacement by default |
| 3b00fc908 | feat | introduce outputMode option to the application builder |
| 7d883a152 | feat | introduce ssr.experimentalPlatform option |
| c48d6947e | feat | set development/production condition |
| f63072668 | feat | utilize ssr.entry during prerendering to enable access to local API routes |
| bbc290133 | feat | utilize ssr.entry in Vite dev-server when available |
| 5a7a2925b | fix | add missing redirect in SSR manifest |
| 06e5176c2 | fix | add warning when --prerendering or --app-shell are no-ops |
| ecaf870b5 | fix | always clear dev-server error overlay on non-error result |
| f8677f6a9 | fix | always record component style usage for HMR updates |
| 099e477a8 | fix | avoid hashing development external component stylesheets |
| 3602bbb77 | fix | avoid overwriting inline style bundling additional results |
| 71534aadc | fix | check referenced files against native file paths |
| fed31e064 | fix | correctly use dev-server hmr option to control stylesheet hot replacement |
| b86bb080e | fix | disable dev-server websocket when live reload is disabled |
| 7c50ba9e2 | fix | ensure index.csr.html is always generated when prerendering or SSR are enabled |
| efb2232df | fix | ensure accurate content size in server asset metadata |
| 18a8584ea | fix | ensure SVG template URLs are considered templates with external stylesheets |
| 7502fee28 | fix | Exclude known --import from execArgv when spawning workers |
| 2551df533 | fix | fully disable component style HMR in JIT mode |
| c41529cc1 | fix | handle APP_BASE_HREF correctly in prerendered routes |
| 87a90afd4 | fix | incomplete string escaping or encoding |
| 1bb68ba68 | fix | move lmdb to optionalDependencies |
| a995c8ea6 | fix | prevent prerendering of catch-all routes |
| 1654acf0f | fix | relax constraints on external stylesheet component id |
| 0d4558ea5 | fix | set ngServerMode during vite prebundling |
| 55d7f01b6 | fix | simplify disabling server features with --no-server via command line |
| cf0228b82 | fix | skip wildcard routes from being listed as prerendered routes |
| af52fb49b | fix | synchronize import/export conditions between bundler and TypeScript |
| 6c618d495 | fix | update logic to support both internal and external SSR middlewares |
| bfa8fec9b | fix | use named export reqHandler for server.ts request handling |
| c8e1521a2 | fix | workaround Vite CSS ShadowDOM hot replacement |
| d6a34034d | refactor | remove automatic addition of @angular/localize/init polyfill and related warnings |
| Commit | Type | Description |
| --------------------------------------------------------------------------------------------------- | ---- | ---------------------------------------------------------------------------------------------------------- |
| 92209dd2e | feat | add createRequestHandler and createNodeRequestHandler utilities |
| 41fb2ed86 | feat | Add getHeaders Method to AngularAppEngine and AngularNodeAppEngine for handling pages static headers |
| f346ee8a8 | feat | add isMainModule function |
| d66aaa3ca | feat | add server routing configuration API |
| bca568389 | feat | dynamic route resolution using Angular router |
| 30c25bf68 | feat | export AngularAppEngine as public API |
| 455b5700c | feat | expose writeResponseToNodeResponse and createWebRequestFromNodeRequest in public API |
| 9692a9054 | feat | improve handling of aborted requests in AngularServerApp |
| 576ff604c | feat | introduce AngularNodeAppEngine API for Node.js integration |
| 3c9697a8c | feat | introduce new hybrid rendering API |
| 4b09887a9 | feat | move CommonEngine API to /node entry-point |
| d43180af5 | fix | add missing peer dependency on @angular/platform-server |
| 74b3e2d51 | fix | add validation to prevent use of provideServerRoutesConfig in browser context |
| 2640bf7a6 | fix | correct route extraction and error handling |
| 44077f54e | fix | designate package as side-effect free |
| df4e1d360 | fix | enable serving of prerendered pages in the App Engine |
| 0793c78cf | fix | ensure wildcard RenderMode is applied when no Angular routes are defined |
| 65b6e75a5 | fix | export RESPONSE_INIT, REQUEST, and REQUEST_CONTEXT tokens |
| 4ecf63a77 | fix | export PrerenderFallback |
| 50df63196 | fix | improve handling of route mismatches between Angular server routes and Angular router |
| 3cf7a5223 | fix | initialize the DI tokens with null to avoid requiring them to be set to optional |
| 85df4011b | fix | resolve bootstrap is not a function error |
| e9c9e4995 | fix | resolve circular dependency issue from main.server.js reference in manifest |
| 64c52521d | fix | show error when multiple routes are set with RenderMode.AppShell |
| 280ebbda4 | fix | support for HTTP/2 request/response handling |
| fb05e7f0a | fix | use wildcard server route configuration on the '/' route when the app router is empty |
| 12ff37adb | perf | cache generated inline CSS for HTML |
| 1d70e3b46 | perf | cache resolved entry-points |
| f460b91d4 | perf | integrate ETags for prerendered pages |
| e52ae7f6f | perf | prevent potential stampede in entry-points cache |
<a name="18.2.12"></a>
FAQs
Webpack plugin that AoT compiles your Angular components and modules.
The npm package @ngtools/webpack receives a total of 2,399,454 weekly downloads. As such, @ngtools/webpack popularity was classified as popular.
We found that @ngtools/webpack demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.