Angular: The AngularCompilerPlugin was not found

[wmarques]

Hi, I'm trying to setup this plugin on my app. It's an hybrid Angular 10 / AngularJS with a custom Webpack config.

I followed all the instructions but when I try to start the app using webpack-dev-server I have the following trace:

ERROR in Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: The AngularCompilerPlugin was not found. The @ngtools/webpack loader requires the plugin.
    at Object.ngcLoader (/Users/wmarques/workspace/artel/telematics-services/telematics-fo-web/node_modules/@ngtools/webpack/src/loader.js:28:15)

Here is a snippet of my configuration:

  resolve: {
    extensions: ['.ts', '.js'],
    alias: {
      '../assets': resolve('src/assets'),
      // Use the same moment package for each lib (remove duplicates)
      moment: resolve('node_modules/moment')
    }
  },

  module: {
    rules: [
      {
        test: /\.([tj])s$/,
        use: [BabelMultiTargetPlugin.loader(), '@ngtools/webpack']
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
        options: {
          minimize: false
        },
        exclude: /index.html/
      },
      {
        test: /\.yml/,
        loader: 'yaml-import-loader'
      },
      {
        test: /\.(png|jpg|gif|ico|ttf|otf|eot|svg|woff(2)?)$/,
        loader: 'file-loader',
        options: {
          esModule: false
        }
      },
      {
        test: /\.(scss|css)$/,
        use: [
          'to-string-loader',
          'css-loader',
          'sass-loader',
          {
            loader: 'sass-resources-loader',
            options: {
              // Or array of paths
              resources: [
                resolve('node_modules/@artel/commons/variables.scss'),
                resolve('src/sass/bourbon/dist/settings/*.scss'),
                resolve('src/sass/bourbon/dist/functions/*.scss'),
                resolve('src/sass/bourbon/dist/addons/_font-family.scss'),
                resolve('src/sass/auto-generated/_style-vars.scss'),
                resolve('src/sass/base/_variables.scss')
              ]
            }
          }
        ],
        exclude: /(styles|vendors)\.scss/
      },
      { test: /[/\\]@angular[/\\].+\.js$/, parser: { system: true } }
    ]
  },

  plugins: [
    new BabelMultiTargetPlugin({
      babel: {
        presetOptions: {
          modules: false,
          useBuiltIns: 'entry',
          corejs: 3
        },
        plugins: [
          'angularjs-annotate',
          '@babel/plugin-proposal-object-rest-spread'
        ]
      }
    }),
    new AngularCompilerPlugin({
      tsConfigPath: resolve('tsconfig.app.json'),
      mainPath: resolve('src/app/main.ts')
    }),

Thanks for your help 😄

[DanielSchaffer]

Hi William,

First off, you should know that I'm planning on removing support for Angular since the Angular CLI includes its own differential loading mechanism. Angular support will be deprecated in the next major version (3.0.0), and removed in the following major version (4.0.0).

Second, I've had very mixed experiences with trying to use the Angular compiler outside of the CLI (e.,g. using @ngtools/webpack) for the last several major Angular releases. It tends to be very particular about how it gets set up, and if the configuration isn't exactly what it wants, the error messages tend to be pretty ambiguous.

I realize that if you're working with a hybrid app, your options may be limited - but I'd definitely recommend looking into setting up your application such that the main app is using the Angular 10 CLI, and you use that to host the AngularJS app, likely using NgUpgrade.

That said, if you'd still like to try and get this working as you originally described - does this configuration work when you leave out BabelMultiTargetPlugin and its loader?

[wmarques]

Hi Daniel, First thanks for your very quick answer :) I agree that using a custom Webpack config is becoming quite difficult... But for now we don't have the time to fully switch to the Angular CLI, our project structure would need to be completely changed so that's not an easy task. By the way if we switch to the CLI I would probably go with Nx as we have 2 Angular apps in a monorepo.

Yes I'm already using NgUpgrade.

Yes without BabelMultiTargetPlugin (and thus with the classic babel-loader it worked with Angular 9, then when I upgraded to Angular 10 it seems that the dropping of esm5 broke the IE11 support (I see that I have ES6 classes in my bundle), that's why I tried to use your lib in order to support IE11 which is mandatory for my project

[DanielSchaffer]

@wmarques IE11! Oof, I'm sorry on your behalf.

To clarify, does your configuration work with Angular 10 when you leave out BabelMultiTargetPlugin?

[wmarques]

Yes, client requirements, I will hopefully get rid of it once windows 7 becomes deprecated !

Yes it compiles and works fine in any recent browser, however my app doesn't show up on IE11 because I still have ES6 code in my final bundle and it looks like it comes from Angular. that's why I'm interested in your plugin :)

[DanielSchaffer]

Can you include the full configuration file? If there are proprietary things you need to omit, that's fine, just annotate in the text where things are removed.

[DanielSchaffer]

Also, can you post the output of running npm ls @ngtools/webpack?