vscode-ng-language-service: Re-exported modules's components not detected by the language service in HTML templates
Since angular/material2-2.0.0-beta.3 announced that the MaterialModule which exported all of the material components is going to get deprecated in the next version, I decided to follow their advice and create my own application specific AppMaterialModule where I included only the material modules which I use one by one.
// app-material.module.ts
import { NgModule } from '@angular/core';
import {
MdInputModule,
etc...
} from '@angular/material'
@NgModule({
imports: [],
exports: [
MdInputModule,
etc...
],
declarations: [],
providers: [],
})
export class AppMaterialModule { }
Here is my app.module.ts file as well:
@NgModule({
imports: [
CoreModule,
AppMaterialModule,
BrowserModule,
BrowserAnimationsModule,
HttpModule,
AppRoutingModule,
SharedModule.forRoot()
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
I tested my application and it works just the same way as it used to before replacing the MaterialModule. However, when I opened an HTML template file I noticed that there are errors shown on all the material components used.
They are all with the same error:
[Angular]
'md-input-container' is not a known element:
1. If 'md-input-container' is an Angular component, then verify that it is part of this module.
2. If 'md-input-container' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
I hope this is a helpful explanation to the problem I experience. If you need more information I will be glad to provide it.
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 7
- Comments: 22 (4 by maintainers)
I think the language service doesn’t correctly apply the tsconfig compilerOptions. I have a path mapping there and modules imported using that mapping are not recognized which for me results in the same issue described here.
@chuckjaz: i have reproduced the issue here: https://github.com/mjamin/vscode-ng-language-service-repro
The tsconfig.json defines a path mapping which is used in app.module.ts to import the
BarModule. The component declared in that module is not recognized by the language service in app.component.htmlHaving the same issue, would love to see a fix vs. using relative paths (ugh!). Thanks for your hard work thus far! 😃
I am in the process of converting this project to use the new typescript plugin architecture and have been slow in fielding this bugs. Sorry about that.
I will get through the backlog once we have the plugin architecture sorted.
I think this fixes the problem: https://github.com/angular/vscode-ng-language-service/issues/108
Just use relative paths when importing everything, including shared modules, and imports into those shared modules themselves, i.e. all imports should have relative paths. And then the re-exports will be recognized.
Is there a workaround for this?
I’m having this issue too,. It seems to occur whenever there are shared modules that you import into each component as well. It looks like the service ignores definitions provided by imported modules that are re-exported. I made a shared module that re-exports items that it imports and declares (including CommonModule, one module in question), and when I import this module into other modules, Angular (4) understands the imports, but the Angular Language Service cannot find CommonModule or my custom component, even though they are exported in my shared module.
@mjamin do you have any fix yet?
Also having this issue. Just wondering if there’s any update as I’d love to continue using this plugin.
Auto-complete does not work, and red error lines appear with the error: "[Angular] ‘app-testing’ is not a known element:
(using the repo i just provided)
Verifying I encountered this exact issue in VSCode by following the same recommendation (create and app specific material module) as @tsvetan-ganev.