npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@tarunc/ngtools

v9.0.2

Published

Webpack plugin that AoT compiles your Angular components and modules.

Downloads

1

Readme

Angular Ahead-of-Time Webpack Plugin

Webpack 4.0 plugin that AoT compiles your Angular components and modules.

Usage

In your webpack config, add the following plugin and loader.

Angular version 5 and up, use AngularCompilerPlugin:

import { AngularCompilerPlugin } from '@ngtools/webpack';

exports = { /* ... */
  module: {
    rules: [
      {
        test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
        loader: '@ngtools/webpack'
      }
    ]
  },

  plugins: [
    new AngularCompilerPlugin({
      tsConfigPath: 'path/to/tsconfig.json',
      entryModule: 'path/to/app.module#AppModule',
      sourceMap: true,
      i18nInFile: 'path/to/translations.en.xlf',
      i18nInFormat: 'xlf',
      i18nOutFile: 'path/to/translations.xlf',
      i18nOutFormat: 'xlf',
      locale: 'en',
      hostReplacementPaths: {
        'path/to/config.development.ts': 'path/to/config.production.ts'
      }
    })
  ]
};

The loader works with webpack plugin to compile your TypeScript. It's important to include both, and to not include any other TypeScript compiler loader.

Options

  • 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 class name 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.
  • skipCodeGeneration. Optional, defaults to false. Disable code generation 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.
  • sourceMap. Optional. Include sourcemaps.
  • compilerOptions. Optional. Override options in tsconfig.json.
  • contextElementDependencyConstructor. Optional. Set to require('webpack/lib/dependencies/ContextElementDependency') if you are having No module factory available for dependency type: ContextElementDependency errors.
  • directTemplateLoading. Optional. It 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.
  • forkTypeChecker. Optional, defaults to true. Run the TypeScript type checker in a forked process.
  • hostReplacementPaths. Optional. It allows replacing resources with other resources in the build.
  • platform. Optional, defaults to 0. Possible values are 0 and 1. 0 stands for browser and 1 for server.
  • logger. Optional. A custom logger that sends information to STDOUT and STDERR.
  • nameLazyFiles. Optional. If true then uses the [request] placeholder to set dynamic chunk names.
  • missingTranslation. Optional and only used for View Engine compilations. defaults to warning. Possible values are warning, error or ignore. Determines how to handle missing translations for i18n.
  • i18nInFile. Optional and only used for View Engine compilations. Localization file to use for i18n.
  • i18nInFormat. Optional and only used for View Engine compilations. The format of the localization file.
  • i18nOutFile. Optional and only used for View Engine compilations. The name of the file to write extractions to.
  • i18nOutFormat. Optional and only used for View Engine compilations. The format of the localization file where extractions will be written to.
  • locale. Optional and only used for View Engine compilations. Locale to use for i18n.

Features

The benefits and ability of using @ngtools/webpack standalone from the Angular CLI as presented in Stephen Fluin's Angular CLI talk at Angular Connect 2016:

  • Compiles Sass/Less into CSS
  • TypeScript transpilation
  • Bundles JavaScript, CSS
  • Asset optimization
  • Virtual filesystem for assets
  • For serving local assets and compile versions.
  • Live-reload via websockets
  • Code splitting
  • Recognizing the use of loadChildren in the router, and bundling those modules separately so that any dependencies of those modules are not going to be loaded as part of your main bundle. These separate bundles will be pulled out of the critical path of your application, making your total application bundle much smaller and loading it much more performant.