Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Webpack complain about d.ts #16907

Closed
13 tasks
Seemspyo opened this issue Feb 10, 2020 · 17 comments · Fixed by #16995
Closed
13 tasks

Webpack complain about d.ts #16907

Seemspyo opened this issue Feb 10, 2020 · 17 comments · Fixed by #16995

Comments

@Seemspyo
Copy link

Seemspyo commented Feb 10, 2020

🐞 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
Copy link

fredjeck commented Feb 10, 2020

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
Copy link
Collaborator

@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.

@alan-agius4 alan-agius4 added the needs: repro steps We cannot reproduce the issue with the information given label Feb 10, 2020
@Toso82
Copy link

Toso82 commented Feb 10, 2020

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

tsconfig.app.json

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

@Seemspyo
Copy link
Author

Seemspyo commented Feb 11, 2020

@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
Copy link
Collaborator

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
Copy link
Author

Seemspyo commented Feb 11, 2020

@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
Copy link
Collaborator

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

@filipesilva
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Contributor

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:

@alan-agius4 could the changes in #16822 have caused this behaviour?

@alan-agius4
Copy link
Collaborator

@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
Copy link
Collaborator

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
Copy link
Collaborator

alan-agius4 commented Feb 17, 2020

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 microsoft/TypeScript#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.

@alan-agius4 alan-agius4 removed the needs: repro steps We cannot reproduce the issue with the information given label Feb 17, 2020
@filipesilva
Copy link
Contributor

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

@alan-agius4
Copy link
Collaborator

@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;

kyliau pushed a commit that referenced this issue Feb 19, 2020
Running the `remove-ivy-jit-support-calls` and `remove_decorators` transformers causes the following TS bug microsoft/TypeScript#17552 which is why the `elide-imports` transformer exists in the first place.

However, when having a syntax like the below;
```ts
import { AccountComponentChild } from '../@types';
export class SignUpComponent implements AccountComponentChild{}
```

The `implements` parts of the class is called a `HeritageClause` with child statements of `ExpressionWithTypeArguments` also the same is for `abstract`. With this change we check the token of the `HeritageClause` and if it's an `ImplementsKeyword` we elide the import.

Closes #16907
kyliau pushed a commit that referenced this issue Feb 19, 2020
Running the `remove-ivy-jit-support-calls` and `remove_decorators` transformers causes the following TS bug microsoft/TypeScript#17552 which is why the `elide-imports` transformer exists in the first place.

However, when having a syntax like the below;
```ts
import { AccountComponentChild } from '../@types';
export class SignUpComponent implements AccountComponentChild{}
```

The `implements` parts of the class is called a `HeritageClause` with child statements of `ExpressionWithTypeArguments` also the same is for `abstract`. With this change we check the token of the `HeritageClause` and if it's an `ImplementsKeyword` we elide the import.

Closes #16907
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Mar 21, 2020
ikjelle pushed a commit to ikjelle/angular-cli that referenced this issue Mar 26, 2024
Running the `remove-ivy-jit-support-calls` and `remove_decorators` transformers causes the following TS bug microsoft/TypeScript#17552 which is why the `elide-imports` transformer exists in the first place.

However, when having a syntax like the below;
```ts
import { AccountComponentChild } from '../@types';
export class SignUpComponent implements AccountComponentChild{}
```

The `implements` parts of the class is called a `HeritageClause` with child statements of `ExpressionWithTypeArguments` also the same is for `abstract`. With this change we check the token of the `HeritageClause` and if it's an `ImplementsKeyword` we elide the import.

Closes angular#16907
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants