Angular-builders: Cannot find module package.json

[muuvmuuv]

Describe the Bug

I would like to use a custom webpack typescript config with the define plugin but cannot import package.json. Which tsconfig is taken by angular-builders for the webpack config compilation? I tried adding that file to every webpack config without success.

webpack.config.ts:7:22 - error TS2732: Cannot find module './package.json'. Consider using '--resolveJsonModule' to import module with '.json' extension

7 import * as pkg from './package.json'

Minimal Reproduction

1. Create a start
2. Include @angular-builders/custom-webpack:browser
3. Create a webpack.config.ts
4. Add package.json as a module
5. Run npm run build

https://github.com/muuvmuuv/angular-builders-issues-816

Expected Behavior

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

Screenshots

If applicable, add screenshots to help explain your problem.

Environment

Libs
- @angular/core version: 10.0.10
- @angular-devkit/build-angular version: 0.1000.6
- @angular-builders/custom-webpack version: 10

For Tooling issues:
- Node version: 12.18.0
- Platform: latest macOS

Others:

Additional Context

Add any other context about the problem here.

[muuvmuuv]

I fixed it by adding resolveJsonModule to the ts-node config in utils. Additionally I created this webpack tsconfig to make sure it does error (if it errors) before the production build in our pipeline. Maybe this should be added as an option to pass a custom tsconfig to ts-node our by default take tsconfig.webpack.json if it exists.

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./out-tsc/webpack",
    "strictFunctionTypes": false,
    "resolveJsonModule": true,
    "declaration": false,
    "module": "ESNext",
    "moduleResolution": "node",
    "target": "ES2015",
    "lib": [
      "ESNext"
    ],
    "types": [
      "node"
    ]
  },
  "include": [
    "webpack.*.ts"
  ]
}

[muuvmuuv]

Oh wait, adding this to ts-node still errors for @angular-builders/custom-webpack:karma.

I will try to setup a repl with all cases and the possible fix.

[muuvmuuv]

Repl: https://github.com/muuvmuuv/angular-builders-issues-816

[just-jeb]

Thanks for reporting, I'll take a look. Would you like to create a PR with a fix for custom-webpack:browser?
Have you tried using require instead of import?

[muuvmuuv]

I may not find any time this week but will put it on my schedule next week :)

[muuvmuuv]

Just fyi with require the error is gone and it works as expected.

[muuvmuuv]

So I got some time this week and have some questions:

1. How do I start? I tried cloning and installing the project through lerna but just get millions of errors when running test after that. A contribution's readme would be great here.
2. Shouldn't the ts-node itself find the correct tsconfig (if present as tsconfig.webpack.json and inside tsconfig.json)?

[just-jeb]

1. Fair point, I never got to write one and it's definitely needed. The hard part is to find time for this.
   As for your question, basically following the install and script steps from Travis config should get you going.
2. I'm not sure it's a good idea to have a separate tsconfig for webpack config build. The setup is complicated even without it and setting up a separate config is just gonna be annoying IMO. It should be either a hardcoded config or a default tsconfig which is used for building the project. WDYT?

[muuvmuuv]

@just-jeb oh, wait, sorry! I might accidentally published a new version.

[muuvmuuv]

For 2. I think you are right. Might be better to hardcode it and later add that it is using the app's tsconfig.