Webpack complain about d.ts

[Seemspyo]

🐞 Bug report

Command (mark with an x)

ng build --prod

• new
• [ x ] build
• serve
• test
• e2e
• generate
• add
• [ x ] update
• lint
• xi18n
• run
• config
• help
• version
• doc

Is this a regression?

Yes, the previous version in which this bug was not present was: 8.2.14

Description

I have updated my project to 9.0.0 and this happend.

I have component with type imports from '../@types.d.ts', but when run build, CLI throw an error that can't resolve '../@types'(+ Field 'browser' doesn't contain a valid alias configuration). If I fixed it like '../@types.d' it passes, but throw another error which '../@types.d.ts' is missing from typescript compilation and I should include it's path.

But things doesn't workout even though I add path to both tsconfig.json and tsconfig.app.json.
Is it because of the ivy typescript and webpack configuration?

🔬 Minimal Reproduction

🔥 Exception or Error

Module not found: Error: Can't resolve '../@types' in '{{ project root }}\src\app\account\sign-up'
resolve '../@types' in '{{ project root }}\src\app\account\sign-up'
  using description file: {{ project root }}\package.json (relative path: ./src/app/account/sign-up)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: {{ project root }}\package.json (relative path: ./src/app/account/@types)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        {{ project root }}\src\app\account\@types doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        {{ project root }}\src\app\account\@types.ts doesn't exist
      .tsx
        Field 'browser' doesn't contain a valid alias configuration
        {{ project root }}\src\app\account\@types.tsx doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        {{ project root }}\src\app\account\@types.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        {{ project root }}\src\app\account\@types.js doesn't exist
      as directory
        {{ project root }}\src\app\account\@types doesn't exist
[{{ project root }}\src\app\account\@types]
[{{ project root }}\src\app\account\@types.ts]
[{{ project root }}\src\app\account\@types.tsx]
[{{ project root }}\src\app\account\@types.mjs]
[{{ project root }}\src\app\account\@types.js]
 @ ./src/app/account/sign-up/sign-up.component.ts 7:0-50
 @ ./src/app/account/account-routing.module.ts
 @ ./src/app/account/account.module.ts
 @ ./src/app/app-routing.module.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

🌍 Your Environment

@angular-devkit/architect         0.900.1
@angular-devkit/build-angular     0.900.1
@angular-devkit/build-optimizer   0.900.1
@angular-devkit/build-webpack     0.900.1
@angular-devkit/core              9.0.1
@angular-devkit/schematics        9.0.1
@angular/cdk                      8.2.3
@angular/cli                      9.0.1
@angular/material                 8.2.3
@ngtools/webpack                  9.0.1
@schematics/angular               9.0.1
@schematics/update                0.900.1
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

Anything else relevant?

[fredjeck]

Hello,

Sameish issue here, my ambiant typings file is not found anymore when compiling.
Looks similar to this issue, however not sure if I should be posting here.

I am using the ambiant definition file below :

 interface JQuery {
    select2(p?: any): JQuery;
    trumbowyg(options?: TrumbowygOptions | any, ...any): JQuery;
  }

  interface TrumbowygOptions {
    btns: string[][];
    autogrow?: boolean;
    autogrowOnEnter?: boolean;
    svgPath?: string;
    resetCss: boolean;
  }

This file is referenced in my top level tsconfig file
"typeRoots": ["node_modules/@types", "src/app/vendor.d.ts"],

Everything worked fine with the latest 8.x version but is not working anymore since the migration.
I initially thought that this was linked to TS3.6 changes, so I wrapped my interfaces within a declare global statement. Strange thing, building the app using the cli did not work however this was immediately picked up by vscode (intellisense started and displayed the references correctly).

[alan-agius4]

@Seemspyo, Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[Toso82]

I think there is my same problem try to add this in

tsconfig.app.json

"include": [
   "**/*.d.ts"
]

[Seemspyo]

@alan-agius4
I have push my project here.

The weird thing is, I have simular project that have type definitions in subdirectory here. But in that project build command working fine. So my wild guess is this might be a lazy loading module issue in route setting.

@Toso82
I already have include setting in my tsconfig.app.json.

"include": [
    "src/**/*.d.ts"
]

Also I have added "**/*.d.ts" and even direct path, the same error occured.

[alan-agius4]

Hi @Seemspyo, I tried to build both your applications and I didn't manage to replicate the error

front-end/blog $ ng build
$ ng build
0% compiling
Compiling @angular/core : es2015 as esm2015

Compiling @angular/common : es2015 as esm2015

Compiling @angular/platform-browser : es2015 as esm2015

Compiling @angular/platform-browser-dynamic : es2015 as esm2015

Compiling @angular/common/http : es2015 as esm2015

Compiling @angular/animations : es2015 as esm2015

Compiling @angular/animations/browser : es2015 as esm2015

Compiling @angular/platform-browser/animations : es2015 as esm2015

Compiling @angular/router : es2015 as esm2015

Compiling @angular/forms : es2015 as esm2015

Compiling @angular/cdk/portal : es2015 as esm2015

Compiling @angular/cdk/keycodes : es2015 as esm2015

Compiling @angular/cdk/platform : es2015 as esm2015

Compiling @angular/cdk/coercion : es2015 as esm2015

Compiling @angular/cdk/observers : es2015 as esm2015

Compiling @angular/cdk/a11y : es2015 as esm2015

Compiling @angular/cdk/bidi : es2015 as esm2015

Compiling @angular/cdk/collections : es2015 as esm2015

Compiling @angular/cdk/scrolling : es2015 as esm2015

Compiling @angular/cdk/overlay : es2015 as esm2015

Compiling @angular/cdk : es2015 as esm2015

Compiling @angular/material/core : es2015 as esm2015

Compiling @angular/material/dialog : es2015 as esm2015

Compiling @fortawesome/angular-fontawesome : es2015 as esm2015

Compiling @tinymce/tinymce-angular : es2015 as esm2015
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.

chunk {runtime} runtime-es2015.js, runtime-es2015.js.map (runtime) 9.48 kB [entry] [rendered]
chunk {runtime} runtime-es5.js, runtime-es5.js.map (runtime) 9.47 kB [entry] [rendered]
chunk {polyfills} polyfills-es2015.js, polyfills-es2015.js.map (polyfills) 281 kB [initial] [rendered]
chunk {common} common-es2015.js, common-es2015.js.map (common) 11.1 kB  [rendered]
chunk {common} common-es5.js, common-es5.js.map (common) 13.9 kB  [rendered]
chunk {styles} styles-es2015.js, styles-es2015.js.map (styles) 192 kB [initial] [rendered]
chunk {styles} styles-es5.js, styles-es5.js.map (styles) 193 kB [initial] [rendered]
chunk {main} main-es2015.js, main-es2015.js.map (main) 80 kB [initial] [rendered]
chunk {main} main-es5.js, main-es5.js.map (main) 109 kB [initial] [rendered]
chunk {account-account-module} account-account-module-es2015.js, account-account-module-es2015.js.map (account-account-module) 279 kB  [rendered]
chunk {account-account-module} account-account-module-es5.js, account-account-module-es5.js.map (account-account-module) 305 kB  [rendered]
chunk {administrator-administrator-module} administrator-administrator-module-es2015.js, administrator-administrator-module-es2015.js.map (administrator-administrator-module) 219 kB  [rendered]
chunk {administrator-administrator-module} administrator-administrator-module-es5.js, administrator-administrator-module-es5.js.map (administrator-administrator-module) 243 kB  [rendered]
chunk {default~account-account-module~administrator-administrator-module~article-article-module} default~account-account-module~administrator-administrator-module~article-article-module-es2015.js, default~account-account-module~administrator-administrator-module~article-article-module-es2015.js.map (default~account-account-module~administrator-administrator-module~article-article-module) 485 kB  [rendered]
chunk {default~account-account-module~administrator-administrator-module~article-article-module} default~account-account-module~administrator-administrator-module~article-article-module-es5.js, default~account-account-module~administrator-administrator-module~article-article-module-es5.js.map (default~account-account-module~administrator-administrator-module~article-article-module) 586 kB  [rendered]
chunk {article-article-module} article-article-module-es2015.js, article-article-module-es2015.js.map (article-article-module) 1.03 MB  [rendered]
chunk {article-article-module} article-article-module-es5.js, article-article-module-es5.js.map (article-article-module) 1.11 MB  [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 661 kB [initial] [rendered]
chunk {default~account-account-module~administrator-administrator-module} default~account-account-module~administrator-administrator-module-es2015.js, default~account-account-module~administrator-administrator-module-es2015.js.map (default~account-account-module~administrator-administrator-module) 661 kB  [rendered]
chunk {default~account-account-module~administrator-administrator-module} default~account-account-module~administrator-administrator-module-es5.js, default~account-account-module~administrator-administrator-module-es5.js.map (default~account-account-module~administrator-administrator-module) 785 kB  [rendered]
chunk {vendor} vendor-es2015.js, vendor-es2015.js.map (vendor) 3.97 MB [initial] [rendered]
chunk {vendor} vendor-es5.js, vendor-es5.js.map (vendor) 4.58 MB [initial] [rendered]
Date: 2020-02-11T07:30:53.442Z - Hash: d84b8c5f9e339f6b0b62 - Time: 149242ms
Done in 154.83s.

front-end/gate $ yarn ng build
$ ng build
0% compiling
Compiling @angular/core : es2015 as esm2015

Compiling @angular/common : es2015 as esm2015

Compiling @angular/platform-browser : es2015 as esm2015

Compiling @angular/platform-browser-dynamic : es2015 as esm2015

Compiling @angular/animations : es2015 as esm2015

Compiling @angular/animations/browser : es2015 as esm2015

Compiling @angular/platform-browser/animations : es2015 as esm2015

Compiling @angular/router : es2015 as esm2015
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.

chunk {polyfills} polyfills-es2015.js, polyfills-es2015.js.map (polyfills) 140 kB [initial] [rendered]
chunk {runtime} runtime-es2015.js, runtime-es2015.js.map (runtime) 6.16 kB [entry] [rendered]
chunk {runtime} runtime-es5.js, runtime-es5.js.map (runtime) 6.16 kB [entry] [rendered]
chunk {styles} styles-es2015.js, styles-es2015.js.map (styles) 14.9 kB [initial] [rendered]
chunk {styles} styles-es5.js, styles-es5.js.map (styles) 16.2 kB [initial] [rendered]
chunk {main} main-es2015.js, main-es2015.js.map (main) 96.8 kB [initial] [rendered]
chunk {main} main-es5.js, main-es5.js.map (main) 113 kB [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 647 kB [initial] [rendered]
chunk {vendor} vendor-es2015.js, vendor-es2015.js.map (vendor) 2.98 MB [initial] [rendered]
chunk {vendor} vendor-es5.js, vendor-es5.js.map (vendor) 3.51 MB [initial] [rendered]
Date: 2020-02-11T07:33:34.027Z - Hash: a912c12ebf132b289dd5 - Time: 57772ms
Done in 63.41s.

[Seemspyo]

@alan-agius4 First, I have to say thank you for your affort.

Both ng serve and ng build commands either works fine for my environment. This is problem in production build. When I run ng build --prod above error occured after build all dependency modules.

$ ng build --prod

ERROR in ./src/app/account/my-account/my-account.component.ts
Module not found: Error: Can't resolve '../@types' in 'D:\Projects\eunsatio.io\front-end\blog\src\app\account\my-account'
resolve '../@types' in 'D:\Projects\eunsatio.io\front-end\blog\src\app\account\my-account'
  using description file: D:\Projects\eunsatio.io\front-end\blog\package.json (relative path: ./src/app/account/my-account)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: D:\Projects\eunsatio.io\front-end\blog\package.json (relative path: ./src/app/account/@types)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        D:\Projects\eunsatio.io\front-end\blog\src\app\account\@types doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        D:\Projects\eunsatio.io\front-end\blog\src\app\account\@types.ts doesn't exist
      .tsx
        Field 'browser' doesn't contain a valid alias configuration
        D:\Projects\eunsatio.io\front-end\blog\src\app\account\@types.tsx doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        D:\Projects\eunsatio.io\front-end\blog\src\app\account\@types.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        D:\Projects\eunsatio.io\front-end\blog\src\app\account\@types.js doesn't exist
      as directory
        D:\Projects\eunsatio.io\front-end\blog\src\app\account\@types doesn't exist
[D:\Projects\eunsatio.io\front-end\blog\src\app\account\@types]
[D:\Projects\eunsatio.io\front-end\blog\src\app\account\@types.ts]
[D:\Projects\eunsatio.io\front-end\blog\src\app\account\@types.tsx]
[D:\Projects\eunsatio.io\front-end\blog\src\app\account\@types.mjs]
[D:\Projects\eunsatio.io\front-end\blog\src\app\account\@types.js]
 @ ./src/app/account/my-account/my-account.component.ts 8:0-50
 @ ./src/app/account/account-routing.module.ts
 @ ./src/app/account/account.module.ts
 @ ./src/app/app-routing.module.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi ./src/main.ts
ERROR in ./src/app/account/sign-up/sign-up.component.ts
Module not found: Error: Can't resolve '../@types' in 'D:\Projects\eunsatio.io\front-end\blog\src\app\account\sign-up'
resolve '../@types' in 'D:\Projects\eunsatio.io\front-end\blog\src\app\account\sign-up'
  using description file: D:\Projects\eunsatio.io\front-end\blog\package.json (relative path: ./src/app/account/sign-up)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: D:\Projects\eunsatio.io\front-end\blog\package.json (relative path: ./src/app/account/@types)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        D:\Projects\eunsatio.io\front-end\blog\src\app\account\@types doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        D:\Projects\eunsatio.io\front-end\blog\src\app\account\@types.ts doesn't exist
      .tsx
        Field 'browser' doesn't contain a valid alias configuration
        D:\Projects\eunsatio.io\front-end\blog\src\app\account\@types.tsx doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        D:\Projects\eunsatio.io\front-end\blog\src\app\account\@types.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        D:\Projects\eunsatio.io\front-end\blog\src\app\account\@types.js doesn't exist
      as directory
        D:\Projects\eunsatio.io\front-end\blog\src\app\account\@types doesn't exist
[D:\Projects\eunsatio.io\front-end\blog\src\app\account\@types]
[D:\Projects\eunsatio.io\front-end\blog\src\app\account\@types.ts]
[D:\Projects\eunsatio.io\front-end\blog\src\app\account\@types.tsx]
[D:\Projects\eunsatio.io\front-end\blog\src\app\account\@types.mjs]
[D:\Projects\eunsatio.io\front-end\blog\src\app\account\@types.js]
 @ ./src/app/account/sign-up/sign-up.component.ts 7:0-50
 @ ./src/app/account/account-routing.module.ts
 @ ./src/app/account/account.module.ts
 @ ./src/app/app-routing.module.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi ./src/main.ts