Socket
Socket
Sign inDemoInstall

@ngtools/webpack

Package Overview
Dependencies
Maintainers
2
Versions
835
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ngtools/webpack

Webpack plugin that AoT compiles your Angular components and modules.


Version published
Weekly downloads
2.8M
increased by3.53%
Maintainers
2
Weekly downloads
 
Created

What is @ngtools/webpack?

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.

What are @ngtools/webpack's main functionalities?

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']
    })
  ]
};

Other packages similar to @ngtools/webpack

Keywords

FAQs

Package last updated on 09 Oct 2024

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc