spinjs/src/plugins/AngularPlugin.ts

[](https://gitter.im/sysgears/spinjs?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![npm version](https://badge.fury.io/js/spi

import * as fs from 'fs';
import { Builder } from '../Builder';
import { ConfigPlugin } from '../ConfigPlugin';
import Spin from '../Spin';
import JSRuleFinder from './shared/JSRuleFinder';

export default class AngularPlugin implements ConfigPlugin {
  public configure(builder: Builder, spin: Spin) {
    const stack = builder.stack;

    if (stack.hasAll(['angular', 'webpack'])) {
      const webpack = builder.require('webpack');

      const jsRuleFinder = new JSRuleFinder(builder);
      const tsRule = jsRuleFinder.findAndCreateTSRule();
      builder.config = spin.merge(builder.config, {
        module: {
          rules: [
            {
              test: tsRule.test,
              use: { loader: 'angular2-template-loader', options: spin.createConfig(builder, 'angular2Template', {}) }
            },
            /**
             * Enabling the SystemJS parser for the .js files under @angular/core/ will disable
             * the deprecation warnings.
             * See https://prntscr.com/lezfmd
             *
             * SystemJS is disabled by default for webpack.
             * See https://webpack.js.org/configuration/module/#rule-parser
             *
             * Note that the webpack.ContextReplacementPlugin must also be properly configured (see below).
             */
            {
              test: /[\\\/]@angular[\\\/]core[\\\/].+\.js$/,
              parser: { system: true }
            }
          ]
        },
        plugins: [
          // Workaround for angular/angular#11580
          new webpack.ContextReplacementPlugin(
            /**
             * Override the initial configuration for ContextReplacementPlugin.
             * The argument /angular[\\\/]core[\\\/]@angular/ causes several warnings.
             * See https://prnt.sc/lezevh
             *
             * It's necessary to remove the @angular part and fix the issue by enabling
             * the proper module.rules.Rule for @angular/core/*.js files(see above).
             */
            /angular[\\\/]core/
          )
        ]
      });

      if (!stack.hasAny('dll') && stack.hasAny('web')) {
        /**
         * Creating a virtual file for webpack in memory in the desired path inside the project
         *
         * Required for local testing
         */
        const VirtualModules = builder.require('webpack-virtual-modules');
        const polyfillCode = fs.readFileSync(require.resolve('./angular/angular-polyfill.js')).toString();
        builder.config = spin.merge(builder.config, {
          module: {
            rules: [
              {
                test: /\.html$/,
                loader: 'html-loader',
                options: spin.createConfig(builder, 'html', {})
              }
            ]
          },
          plugins: [new VirtualModules({ 'node_modules/@virtual/angular-polyfill.js': polyfillCode })]
        });

        builder.config = spin.merge(
          {
            entry: {
              index: ['@virtual/angular-polyfill']
            }
          },
          builder.config
        );
      }
    }
  }
}