Security News
JSR Working Group Kicks Off with Ambitious Roadmap and Plans for Open Governance
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
@ngtools/webpack
Advanced tools
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 plugin that AoT compiles your Angular components and modules.
In your webpack config, add the following plugin and loader:
import {AotPlugin} from '@ngtools/webpack'
exports = { /* ... */
module: {
rules: [
{
test: /\.ts$/,
loader: '@ngtools/webpack',
}
]
},
plugins: [
new AotPlugin({
tsConfigPath: 'path/to/tsconfig.json',
entryModule: 'path/to/app.module#AppModule'
})
]
}
The loader works with the webpack plugin to compile your TypeScript. It's important to include both, and to not include any other TypeScript compiler loader.
tsConfigPath
. The path to the tsconfig.json
file. This is required. In your tsconfig.json
, you can pass options to the Angular Compiler with angularCompilerOptions
.basePath
. Optional. The root to use by the compiler to resolve file paths. By default, use the tsConfigPath
root.entryModule
. Optional if specified in angularCompilerOptions
. The path and classname of the main application module. This follows the format path/to/file#ClassName
.mainPath
. Optional if entryModule
is specified. The main.ts
file containing the bootstrap code. The plugin will use AST to determine the entryModule
.genDir
. Optional. The output directory of the offline compiler. The files created by the offline compiler will be in a virtual file system, but the import paths might change. This can also be specified in angularCompilerOptions
, and by default will be the same as basePath
.typeChecking
. Optional, defaults to true. Enable type checking through your application. This will slow down compilation, but show syntactic and semantic errors in webpack.FAQs
Webpack plugin that AoT compiles your Angular components and modules.
The npm package @ngtools/webpack receives a total of 2,572,079 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
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.