ng-annotate-loader Typescript processing order

Describe the bug I’m upgrading an AngularJS 1.6 project with ngUpgrade to run both ng+ and AngularJS code in the same project.

The AngularJS code requires ng-annotate-loader for DI annotations.

ng-annotate-loader should run AFTER the Angular CLI webpack rules have parsed TypeScript, as ng-annotate-loader cannot parse TypeScript.

angular.json

"customWebpackConfig": {
  "path": "src/extra-webpack.config.ts"
},

webpack.config.ts

const path = require('path');

module.exports = {
  // @todo ng-annotate-loader is trying to annotate TypeScript before it has been processed by ts-loader.
  module: {
    rules: [
      {
        // Do we target TypeScript that has been processed by ts-loader?
        test: /\.ts?$/,
        // Or do we somehow target JS after ts-loader has finished processing?
        // test: /\.js?$/,
        // Only parse the AngularJS scripts (that require DI annotations).
        include: [
          path.resolve(__dirname, 'legacy'),
        ],
        use: [
          {
            loader: 'ng-annotate-loader',
            options: {
              ngAnnotate: 'ng-annotate-patched',
            }
          },
        ]
      },
    ]
  }
};

Error:

ERROR in ./src/legacy/shared/components/app-version/app-version.component.ts
Module build failed (from ./node_modules/ng-annotate-loader/loader.js):
NonErrorEmittedError: (Emitted value instead of an instance of Error) error: couldn't process source due to parse error,Unexpected token (5:25)
    at runLoaders (/Users/mastone/Work/Everwealth.WebAppMigration/node_modules/webpack/lib/NormalModule.js:283:13)
    at /Users/mastone/Work/Everwealth.WebAppMigration/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /Users/mastone/Work/Everwealth.WebAppMigration/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at Object.context.callback (/Users/mastone/Work/Everwealth.WebAppMigration/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.module.exports (/Users/mastone/Work/Everwealth.WebAppMigration/node_modules/ng-annotate-loader/loader.js:87:10)

To Reproduce Steps to reproduce the behavior:

1. Go to ‘…’
2. Click on ‘…’
3. Scroll down to ‘…’
4. See error

OR (preferred way)

a link to a repository with minimal reproduction

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Builder:

• The name of the builder
• The version of the builder

Libraries

"@angular-builders/custom-webpack": "^7.1.1",
"@angular-builders/dev-server": "^7.1.1",
"@angular-devkit/build-angular": "^0.11.4",
"ng-annotate-loader": "^0.6.1",
"ng-annotate-patched": "^1.7.0",

Additional context Add any other context about the problem here.

[nandastone]

@meltedspark Both options have solved my issue. I was trying to merge loaders as outlined in the documentation:

"mergeStrategies": { "loaders": "prepend" },

Thank you for your help!

[alexmacavei]

Hey! My extended.webpack.config file is something like:

const path = require('path');
const webpack = require('webpack');

module.exports = (config) => {
  config.plugins.push(new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery'
  }));
  config.module.rules.filter(rule => rule.test.test('.scss'))[0].exclude.push(path.resolve(__dirname, 'src/app/angularjs'));

  config.module.rules.push({
    test: /\.ts$/,
    include: path.resolve(__dirname, 'src/app/angularjs'),
    loader: 'ng-annotate-loader',
    options: { ngAnnotate: 'ng-annotate-patched', es6: true }
  }, {
    test: /\.html$/,
    use: ['raw-loader']
  }, {
    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
    loader: 'file-loader'
  });

  return config;
};

Errors I’m getting are something like:

Module build failed (from ./node_modules/ng-annotate-loader/loader.js):
NonErrorEmittedError: (Emitted value instead of an instance of Error) error: couldn't process source due to parse error,Unexpected token (9:10)

Should ng-annotate run before Angular’s webpack-loader ?