An unhandled exception occurred: Unknown file extension ".ts"

[houdass]

Hi,

I am using @angular-builders/custom-webpack, I wanted to provide some helper methods to simplify the webpack config (to avoid duplicated code between different web clients).

But I am facing a problem:

Case 1:
With the following extra-webpack.config.ts file:

import { SomeClass } from 'dummy-lib-angular-twelve';
const someClass = new SomeClass();

export default {
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'footer.html',
      template: 'src/footer-template.html',
    }),
    new DefinePlugin({
      APP_VERSION: JSON.stringify(version),
    }),
  ],
} as Configuration;

Everything works just fine because dummy-lib-angular-twelve was generated using Angular 12, that produce UMD bundles for us.

Case 2:
If I use a 3rd party library (created with Angular13) I got the following error:
⠋ Generating browser application bundles (phase: setup)...An unhandled exception occurred: Unknown file extension ".ts" for /Users/yhoudass/Downloads/angular-builders-master/examples/custom-webpack/full-cycle-app/extra-webpack.config.ts

import { SomeClass } from 'dummy-lib-angular-thirteen';
const someClass = new SomeClass();

export default {
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'footer.html',
      template: 'src/footer-template.html',
    }),
    new DefinePlugin({
      APP_VERSION: JSON.stringify(version),
    }),
  ],
} as Configuration;

Conclusion:
If the helper 3rd party lib is generated with Angular 13 (ESM Format) the build crashes
if I generated with Angular 12 (contains UMD format too) it works just fine.

I made this repo based on your examples, please check it, in order to reproduce the error: https://github.com/houdass/full-cycle-app

Thanks in advance.

[just-jeb]

If you want to continue using Typescript, while using ESM you'll have to use ts-node/esm loader (as mentioned in the docs).
Even then, you'll have troubles loading your lib inside the webpack config, because your app type is CommonJs, therefore the js imports are treated as CommonJs modules.
In order to make this import work you'll also have to set "type": "module" in your package.json.