Angular-cli: 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
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

[alan-agius4]

@Seemspyo as a workaround you can try to rename to @types.d.ts to @types.ts

[filipesilva]

I followed these steps and was able to reproduce:

git clone https://github.com/Seemspyo/Slacking-studio/
cd Slacking-studio
cd front-end/blog
npm i
ng build --optimization

kamik@RED-X1C6 MINGW64 /d/sandbox/Slacking-studio/front-end/blog (master)
$ ng build --optimization

chunk {} common.js, common.js.map (common) 2.59 kB  [rendered]
chunk {1} default~account-account-module~administrator-administrator-module~article-article-module.js, default~account-account-module~administrator-administrator-module~article-article-module.js.map (default~account-account-module~administrator-administrator-module~article-article-module) 70.6 kB  [rendered]
chunk {2} runtime.js, runtime.js.map (runtime) 2.5 kB [entry] [rendered]
chunk {3} default~account-account-module~administrator-administrator-module.js, default~account-account-module~administrator-administrator-module.js.map (default~account-account-module~administrator-administrator-module) 146 kB  [rendered]
chunk {4} account-account-module.js, account-account-module.js.map (account-account-module) 67.7 kB  [rendered]
chunk {5} administrator-administrator-module.js, administrator-administrator-module.js.map (administrator-administrator-module) 48.8 kB  [rendered]
chunk {6} article-article-module.js, article-article-module.js.map (article-article-module) 140 kB  [rendered]
chunk {7} main.js, main.js.map (main) 17.3 kB [initial] [rendered]
chunk {8} polyfills.js, polyfills.js.map (polyfills) 65 kB [initial] [rendered]
chunk {9} styles.js, styles.js.map (styles) 176 kB [initial] [rendered]
chunk {10} vendor.js, vendor.js.map (vendor) 491 kB [initial] [rendered]
Date: 2020-02-14T16:36:40.707Z - Hash: 80f8eb49dfef7eaa8167 - Time: 26623ms

ERROR in ./src/app/account/my-account/my-account.component.ts
Module not found: Error: Can't resolve '../@types' in 'D:\sandbox\Slacking-studio\front-end\blog\src\app\account\my-account'
ERROR in ./src/app/account/sign-up/sign-up.component.ts
Module not found: Error: Can't resolve '../@types' in 'D:\sandbox\Slacking-studio\front-end\blog\src\app\account\sign-up'

[filipesilva]

I can also confirm that renaming the file from @types.d.ts to @types.ts removes the error.

But I can't reproduce this without --optimization or in a new project, which is interesting. Also interesting is that this app contains a bunch of other @types.d.ts files that don't seem to be a problem at all. Odd stuff.

[filipesilva]

Seems to be related specifically to the AccountComponentChild interface that is implemented in both the failing files:

export class SignUpComponent implements AccountComponentChild, OnInit, OnDestroy {

export class MyAccountComponent implements AccountComponentChild, OnInit, OnDestroy {

Removing the reference also removes the error.

[filipesilva]

Tried to get the compilation result for sign-up.component.ts by printing it in the write method inside node_modules/@ngtools/webpack/src/compiler_host.js and saw these imports:

import { __awaiter } from "tslib";
/** Native Modules */
import { OnInit, OnDestroy } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { HttpErrorResponse } from '@angular/common/http';
/** Types */
import { AccountComponentChild } from '../@types';
/** Services */
import { AuthService } from 'src/app/services/ajax/auth.service';
/** Variables */
import { unknownErrorContext, getHttpErrorContext, DuplicationError } from 'src/app/helpers/error.helper';
/** Custom Modules */
import { matchValidator } from 'src/app/helpers/validator.helper';
import * as i0 from "@angular/core";
import * as i1 from "src/app/services/ajax/auth.service";
import * as i2 from "src/app/services/util/sticky-bar.service";
import * as i3 from "@angular/router";
import * as i4 from "@angular/material/dialog";
import * as i5 from "@angular/forms";
import * as i6 from "../../modules/input/file-input.directive";
import * as i7 from "@angular/common";
import * as i8 from "../../modules/button/button.directive";
import * as i9 from "../../modules/input/input.directive";

OnInit, OnDestroy, and AccountComponentChild are referenced but not used. They stay there though, and really shouldn't, because unused imports should be removed by in this transformer:
https://github.com/angular/angular-cli/blob/2f1a9db87235907b86a6cb21977427ba415903bf/packages/ngtools/webpack/src/transformers/elide_imports.ts#L18

@alan-agius4 could the changes in https://github.com/angular/angular-cli/pull/16822 have caused this behaviour?

[alan-agius4]

@filipesilva that change takes only effect when emitDecoratorMetadata Is set to true which doesn’t seem to be the case here.

That being said, I’ll need to take a deeper look in the coming days to confirm if this is indeed ta regression caused by that change.

[alan-agius4]

Looked a bit at this and it seems that this regression has been caused by the introduction of https://github.com/angular/angular-cli/blob/2f1a9db87235907b86a6cb21977427ba415903bf/packages/ngtools/webpack/src/transformers/remove-ivy-jit-support-calls.ts

When the transformer runs the ./@types import is not elided.

[alan-agius4]

I digged a bit deeper and the issue seems to be caused that the remove-ivy-jit-support-calls.ts transformer is causing the following TS bug https://github.com/microsoft/TypeScript/issues/17552 which is why the elide-imports transformer exists in the first place.

However, when having a syntax like the below;

import { AccountComponentChild } from '../@types';
export class SignUpComponent implements AccountComponentChild{}

The implements parts of the class is called a HeritageClause with child statements of ExpressionWithTypeArguments however the elide imports transformer doesn't know how to handle these and it will keep marking AccountComponentChild as used.

[filipesilva]

Great work getting to the bottom of this @alan-agius4! Maybe our elider should ignore type args, if that's feasible.

[alan-agius4]

@filipesilva seeing the TS implementation of their internal helpers it should be

/* @internal */
function isTypeReferenceType(node) {
    return node.kind === 168 /* TypeReference */ || node.kind === 215 /* ExpressionWithTypeArguments */;
}
ts.isTypeReferenceType = isTypeReferenceType;

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}