vscode-ng-language-service: language service does not support re-exports in source code

First, thanks for the new update and all the hard work behind it! It’s really appreciated.

Describe the bug In our project we import all the material components we’re using into a single shared module, that module is then imported into our app.module.ts. It seems like the new Angular Language Services is unable to detect this. The shared module is not compiled. It’s just imported from another folder in our monorepo.

To Reproduce

Steps to reproduce the behavior:

Import any @angular/material component into a module
Import that module into your main module for the application
Use said material component in any component’s template
See error

Expected behavior

I expect no errors since the code actually works when compiled, also it worked until latest update.

Logs

Please attach two logs:

[Info  - 06:28:08] Angular language server process ID: 14968
[Info  - 06:28:08] Using typescript v3.6.4 from c:\Users\me\.vscode-insiders\extensions\angular.ng-template-0.900.0\node_modules\typescript\lib\tsserverlibrary.js
[Info  - 06:28:08] Using @angular/language-service v9.0.0-rc.3 from c:\Users\me\.vscode-insiders\extensions\angular.ng-template-0.900.0\server\node_modules\@angular\language-service\bundles\language-service.umd.js
[Info  - 06:28:08] Log file: c:\Users\me\AppData\Roaming\Code - Insiders\logs\20191125T115615\exthost1\Angular.ng-template\nglangsvc.log

Info 0    [6:28:8.138] Format host information updated
Info 1    [6:28:8.140] reload projects.
Info 2    [6:28:8.141] Structure before ensureProjectForOpenFiles:
Info 3    [6:28:8.141] Structure after ensureProjectForOpenFiles:
Info 4    [6:28:8.141] Host file extension mappings updated
Info 5    [6:28:8.155] Search path: c:/Users/me/repo/project-web/packages/web-app-edit/src/app/components/row-type-components/single-reference-field
Info 6    [6:28:8.158] For info: c:/Users/me/repo/project-web/packages/web-app-edit/src/app/components/row-type-components/single-reference-field/single-reference-field.edit.component.html :: Config file name: c:/Users/me/repo/project-web/packages/web-app-edit/tsconfig.json
Info 7    [6:28:8.159] Opened configuration file c:/Users/me/repo/project-web/packages/web-app-edit/tsconfig.json
Info 8    [6:28:8.536] Loading global plugin @angular/language-service
Info 9    [6:28:8.537] Enabling plugin @angular/language-service from candidate paths: c:/Users/me/.vscode-insiders/extensions/angular.ng-template-0.900.0/node_modules/typescript/lib/tsserverlibrary.js/../../..,c:\Users\me\.vscode-insiders\extensions\angular.ng-template-0.900.0\server\node_modules\@angular\language-service\bundles\language-service.umd.js
Info 10   [6:28:8.537] Loading @angular/language-service from c:/Users/me/.vscode-insiders/extensions/angular.ng-template-0.900.0/node_modules/typescript/lib/tsserverlibrary.js/../../.. (resolved to c:/Users/me/.vscode-insiders/extensions/angular.ng-template-0.900.0/node_modules/node_modules)
Info 11   [6:28:8.551] Loading @angular/language-service from c:\Users\me\.vscode-insiders\extensions\angular.ng-template-0.900.0\server\node_modules\@angular\language-service\bundles\language-service.umd.js (resolved to c:/Users/me/.vscode-insiders/extensions/angular.ng-template-0.900.0/server/node_modules/@angular/language-service/bundles/language-service.umd.js/node_modules)
Info 12   [6:28:8.622] Plugin validation succeded
Info 13   [6:28:8.944] Starting updateGraphWorker: Project: c:/Users/me/repo/project-web/packages/web-app-edit/tsconfig.json
Info 14   [6:28:22.7] Finishing updateGraphWorker: Project: c:/Users/me/repo/project-web/packages/web-app-edit/tsconfig.json Version: 1 structureChanged: true Elapsed: 13063ms
Info 15   [6:28:22.7] Project 'c:/Users/me/repo/project-web/packages/web-app-edit/tsconfig.json' (Configured) 
Info 16   [6:28:22.7] 	Files (1287)

Info 17   [6:28:22.7] -----------------------------------------------
Info 18   [6:28:22.13] Starting updateGraphWorker: Project: c:/Users/me/repo/project-web/packages/web-app-edit/tsconfig.json
Info 19   [6:28:22.86] Finishing updateGraphWorker: Project: c:/Users/me/repo/project-web/packages/web-app-edit/tsconfig.json Version: 2 structureChanged: false Elapsed: 73ms
Info 20   [6:28:22.86] Different program with same set of files:: oldProgram.structureIsReused:: 2
Info 21   [6:28:22.731] Search path: c:/Users/me/repo/project-web/packages/web-app-edit/src/app/components/row-type-components/single-reference-field
Info 22   [6:28:22.732] For info: c:/Users/me/repo/project-web/packages/web-app-edit/src/app/components/row-type-components/single-reference-field/single-reference-field.component.ts :: Config file name: c:/Users/me/repo/project-web/packages/web-app-edit/tsconfig.json
Info 23   [6:29:0.358] Search path: c:/Users/me/repo/project-web/packages/web-app-edit/src/app/components/row-type-components/base
Info 24   [6:29:0.359] For info: c:/Users/me/repo/project-web/packages/web-app-edit/src/app/components/row-type-components/base/component-base.ts :: Config file name: c:/Users/me/repo/project-web/packages/web-app-edit/tsconfig.json
Info 25   [6:29:0.447] Search path: c:/Users/me/repo/project-web/packages/web-app-edit/src/app/components/row-type-components/base
Info 26   [6:29:0.447] For info: c:/Users/me/repo/project-web/packages/web-app-edit/src/app/components/row-type-components/base/component-base.ts :: Config file name: c:/Users/me/repo/project-web/packages/web-app-edit/tsconfig.json
Info 27   [6:29:0.548] Search path: c:/Users/me/repo/project-web/packages/web-app-edit/src/app/components/row-type-components/base
Info 28   [6:29:0.549] For info: c:/Users/me/repo/project-web/packages/web-app-edit/src/app/components/row-type-components/base/component-base.ts :: Config file name: c:/Users/me/repo/project-web/packages/web-app-edit/tsconfig.json
Info 29   [6:29:0.650] Search path: c:/Users/me/repo/project-web/packages/web-app-edit/src/app/components/row-type-components/base
Info 30   [6:29:0.650] For info: c:/Users/me/repo/project-web/packages/web-app-edit/src/app/components/row-type-components/base/component-base.ts :: Config file name: c:/Users/me/repo/project-web/packages/web-app-edit/tsconfig.json
Info 31   [6:30:7.35] Search path: c:/Users/me/repo/project-web/packages/web-app-edit/node_modules/@fortawesome/angular-fontawesome/icon
Info 32   [6:30:7.36] For info: c:/Users/me/repo/project-web/packages/web-app-edit/node_modules/@fortawesome/angular-fontawesome/icon/icon.component.d.ts :: Config file name: c:/Users/me/repo/project-web/packages/web-app-edit/tsconfig.json
Info 33   [6:30:10.68] Search path: c:/Users/me/repo/project-web/packages/web-app-edit/node_modules/@fortawesome/angular-fontawesome/icon
Info 34   [6:30:10.69] For info: c:/Users/me/repo/project-web/packages/web-app-edit/node_modules/@fortawesome/angular-fontawesome/icon/icon.component.d.ts :: Config file name: c:/Users/me/repo/project-web/packages/web-app-edit/tsconfig.json
Info 35   [6:30:10.348] Search path: c:/Users/me/repo/project-web/packages/web-app-edit/node_modules/@fortawesome/angular-fontawesome/icon
Info 36   [6:30:10.349] For info: c:/Users/me/repo/project-web/packages/web-app-edit/node_modules/@fortawesome/angular-fontawesome/icon/icon.component.d.ts :: Config file name: c:/Users/me/repo/project-web/packages/web-app-edit/tsconfig.json
Info 37   [6:31:18.599] Search path: c:/Users/me/repo/project-web/packages/web-app-edit/src/app
Info 38   [6:31:18.599] For info: c:/Users/me/repo/project-web/packages/web-app-edit/src/app/app.module.ts :: Config file name: c:/Users/me/repo/project-web/packages/web-app-edit/tsconfig.json
Info 39   [6:31:23.608] Starting updateGraphWorker: Project: c:/Users/me/repo/project-web/packages/web-app-edit/tsconfig.json
Info 40   [6:31:23.816] Finishing updateGraphWorker: Project: c:/Users/me/repo/project-web/packages/web-app-edit/tsconfig.json Version: 3 structureChanged: false Elapsed: 208ms
Info 41   [6:31:23.817] Different program with same set of files:: oldProgram.structureIsReused:: 2
Info 42   [6:31:24.205] Starting updateGraphWorker: Project: c:/Users/me/repo/project-web/packages/web-app-edit/tsconfig.json
Info 43   [6:31:24.342] Finishing updateGraphWorker: Project: c:/Users/me/repo/project-web/packages/web-app-edit/tsconfig.json Version: 4 structureChanged: false Elapsed: 137ms
Info 44   [6:31:24.342] Different program with same set of files:: oldProgram.structureIsReused:: 2
Info 45   [6:31:24.660] Starting updateGraphWorker: Project: c:/Users/me/repo/project-web/packages/web-app-edit/tsconfig.json
Info 46   [6:31:24.779] Finishing updateGraphWorker: Project: c:/Users/me/repo/project-web/packages/web-app-edit/tsconfig.json Version: 5 structureChanged: false Elapsed: 119ms
Info 47   [6:31:24.779] Different program with same set of files:: oldProgram.structureIsReused:: 2
Info 48   [6:31:25.526] Starting updateGraphWorker: Project: c:/Users/me/repo/project-web/packages/web-app-edit/tsconfig.json
Info 49   [6:31:25.625] Finishing updateGraphWorker: Project: c:/Users/me/repo/project-web/packages/web-app-edit/tsconfig.json Version: 6 structureChanged: false Elapsed: 99ms
Info 50   [6:31:25.625] Different program with same set of files:: oldProgram.structureIsReused:: 2
Info 51   [6:31:26.966] Starting updateGraphWorker: Project: c:/Users/me/repo/project-web/packages/web-app-edit/tsconfig.json
Info 52   [6:31:27.195] Finishing updateGraphWorker: Project: c:/Users/me/repo/project-web/packages/web-app-edit/tsconfig.json Version: 7 structureChanged: true Elapsed: 229ms
Info 53   [6:31:27.195] Different program with same set of files:: oldProgram.structureIsReused:: 1
Info 54   [6:31:31.291] Starting updateGraphWorker: Project: c:/Users/me/repo/project-web/packages/web-app-edit/tsconfig.json
Info 55   [6:31:31.399] Finishing updateGraphWorker: Project: c:/Users/me/repo/project-web/packages/web-app-edit/tsconfig.json Version: 8 structureChanged: false Elapsed: 107ms
Info 56   [6:31:31.400] Different program with same set of files:: oldProgram.structureIsReused:: 2
Info 57   [6:31:33.261] Starting updateGraphWorker: Project: c:/Users/me/repo/project-web/packages/web-app-edit/tsconfig.json
Info 58   [6:31:33.648] Finishing updateGraphWorker: Project: c:/Users/me/repo/project-web/packages/web-app-edit/tsconfig.json Version: 9 structureChanged: true Elapsed: 387ms
Info 59   [6:31:33.648] Different program with same set of files:: oldProgram.structureIsReused:: 1
Info 60   [6:31:33.981] Starting updateGraphWorker: Project: c:/Users/me/repo/project-web/packages/web-app-edit/tsconfig.json
Info 61   [6:31:34.71] Finishing updateGraphWorker: Project: c:/Users/me/repo/project-web/packages/web-app-edit/tsconfig.json Version: 10 structureChanged: false Elapsed: 90ms
Info 62   [6:31:34.71] Different program with same set of files:: oldProgram.structureIsReused:: 2
Info 63   [6:31:34.593] Starting updateGraphWorker: Project: c:/Users/me/repo/project-web/packages/web-app-edit/tsconfig.json
Info 64   [6:31:34.751] Finishing updateGraphWorker: Project: c:/Users/me/repo/project-web/packages/web-app-edit/tsconfig.json Version: 11 structureChanged: false Elapsed: 158ms
Info 65   [6:31:34.751] Different program with same set of files:: oldProgram.structureIsReused:: 2
Info 66   [6:31:42.107] Search path: c:/Users/me/repo/project-web/packages/web-lib-angular/src
Info 67   [6:31:42.108] For info: c:/Users/me/repo/project-web/packages/web-lib-angular/src/web-lib-angular.module.ts :: Config file name: c:/Users/me/repo/project-web/packages/web-lib-angular/tsconfig.json
Info 68   [6:31:42.109] Opened configuration file c:/Users/me/repo/project-web/packages/web-lib-angular/tsconfig.json
Info 69   [6:31:42.175] Loading global plugin @angular/language-service
Info 70   [6:31:42.176] Enabling plugin @angular/language-service from candidate paths: c:/Users/me/.vscode-insiders/extensions/angular.ng-template-0.900.0/node_modules/typescript/lib/tsserverlibrary.js/../../..,c:\Users\me\.vscode-insiders\extensions\angular.ng-template-0.900.0\server\node_modules\@angular\language-service\bundles\language-service.umd.js
Info 71   [6:31:42.176] Loading @angular/language-service from c:/Users/me/.vscode-insiders/extensions/angular.ng-template-0.900.0/node_modules/typescript/lib/tsserverlibrary.js/../../.. (resolved to c:/Users/me/.vscode-insiders/extensions/angular.ng-template-0.900.0/node_modules/node_modules)
Info 72   [6:31:42.179] Loading @angular/language-service from c:\Users\me\.vscode-insiders\extensions\angular.ng-template-0.900.0\server\node_modules\@angular\language-service\bundles\language-service.umd.js (resolved to c:/Users/me/.vscode-insiders/extensions/angular.ng-template-0.900.0/server/node_modules/@angular/language-service/bundles/language-service.umd.js/node_modules)
Info 73   [6:31:42.181] Plugin validation succeded
Info 74   [6:31:42.223] Starting updateGraphWorker: Project: c:/Users/me/repo/project-web/packages/web-lib-angular/tsconfig.json
Info 75   [6:31:49.344] Finishing updateGraphWorker: Project: c:/Users/me/repo/project-web/packages/web-lib-angular/tsconfig.json Version: 1 structureChanged: true Elapsed: 7121ms
Info 76   [6:31:49.344] Project 'c:/Users/me/repo/project-web/packages/web-lib-angular/tsconfig.json' (Configured) 
Info 77   [6:31:49.344] 	Files (864)

Info 78   [6:31:49.344] -----------------------------------------------
Info 79   [6:31:49.349] Starting updateGraphWorker: Project: c:/Users/me/repo/project-web/packages/web-lib-angular/tsconfig.json
Info 80   [6:31:49.377] Finishing updateGraphWorker: Project: c:/Users/me/repo/project-web/packages/web-lib-angular/tsconfig.json Version: 2 structureChanged: false Elapsed: 28ms
Info 81   [6:31:49.377] Different program with same set of files:: oldProgram.structureIsReused:: 2

Screenshots

Additional context

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 5
Comments: 24 (8 by maintainers)

Most upvoted comments

@lincolnthree The situation I explained earlier is inherently a limitation with View Engine, the current backend for the vscode extension. By switching to Ivy, I meant the backend of the extension, not the user project. It is too big of a change to fix this in View Engine, and it’s probably not worthwhile since View Engine will be deprecated soon. I understand this is inconvenient, but please bear with us. We are close to releasing the Ivy version of language service, which will be a lot more powerful than the View Engine version, and it’ll fix architectural issues like this one.

kyliau on Nov 11, 2020

I finally got to the bottom of this.

tldr; Language service does not support re-exports in source code.

In this case, I investigated the package web-app-prime.

When libraries are imported from node_modules, the language service expects that it is compiled code, not source code. This means the language service expects the presence of metadata.json to tell it about re-exports.
web-app-prime has a root AppModule, and it imports WebLibAngularModule from @aos/web-lib-angular.
Even though @aos/web-lib-angular is in node_modules, it is not actually compiled code. When the language service resolves this module, it only sees src/index.ts. There is no src/index.metadata.json.
Language service effectively ignored the entire module since it could not find any relevant Angular information.

Solutions:

Short term: Compile any dependencies / libraries instead of copying the source into node_modules. This will generate proper metadata.json files.

Long term: With Ivy integration, we’ll completely remove the requirement for metadata.json, and instead just get all information from either the .ts or .d.ts file. This will inherently solve the problem with re-exports.

kyliau on Nov 27, 2019

This has been fixed by the new Ivy-native language service, released in v11.1.0.

kyliau on Jan 21, 2021

@kyliau Ah! Thank you for clearing up that issue. I didn’t realize that the language service actually still used ViewEngine. This makes sense. I’m looking forward to the update 😃

As an added benefit, I’m assuming it should also reduce overhead since it shouldn’t be required to build both with Ivy for ng-serve and V.E. in the IDE/tools. But I digress.

Thanks for the update. I’ll stop bugging you 😃

lincolnthree on Nov 11, 2020

@JonWallsten can you confirm that the example here compiles with the AOT compilation strategy (ng build --aot if you’re using the CLI)? For me, it only compiles if I re-export the material component from the wrapper module it was imported in.

ayazhafiz on Nov 26, 2019