How do i overwrite the typescript loader in Angular 6/7?

1.8k Views Asked by At

I am trying to implement a custom webpack configuration for my Angular 7 application that overwrites the typescript loader so i can use a customerTransformer (see ts-loader/getCustomTransformer or awesome-typescript-loader/getCustomTransformer) in the TypeScript compiler pipeline.

Since the command ng eject is not possible since Angular 6, i use the following approach https://codeburst.io/customizing-angular-cli-6-build-an-alternative-to-ng-eject-a48304cd3b21 to use a custom webpack configuration. I use this extra-webpack.config.js.

const methodOverloading = require("../../../built/transformer/method-overloading").methodOverloading;

module.exports = {
  module: {
    rules: [
      {
        test: /\.ts/,
        loader: 'ts-loader', // or 'awesome-typescript-loader'
        exclude: /node_modules/,
        options: {
          getCustomTransformers: (program) => ({
            before: [methodOverloading(program)]
          }),
        }
      }
    ]
  }
};

When i run npm run start or npm run build it runs without errors and also executes the code from the customTransformer. But the final build does not include the transformations from the customTransformer.

I suspect, that Angular 6/7 uses a different way to compile its TypeScript. But i don't know what this way is (tried ts-loader and awesome-typescript-loader). Also i don't know where i can see the used webpack.config of Angular. This would help, because then i could use the exact same configuration as Angular for extra-webpack.config.js. How can i overwrite the typescript loader in Angular 6/7?

I also tried different merge strategies, but this also failed.

0

There are 0 best solutions below