Re-exported modules's components not detected by the language service in HTML templates

[tsvetan-ganev]

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.

[chuckjaz]

Can you send me a link to a repository that reproduces this issue or attach a .zip file I can unzip that demonstrates this?

[jamieathans]

Verifying I encountered this exact issue in VSCode by following the same recommendation (create and app specific material module) as @tsvetan-ganev.

[tsvetan-ganev]

@chuckjaz, here is a zipped project I downloaded from plnkr because I could not figure out how to share the link to the actual project there. Sorry for the inconvenience but I literally spent 20 minutes trying to share a link to my project.
ng-material.zip

[chuckjaz]

@tsvetan-ganev I could not reproduce the issue you are experiencing with the .zip file you provided because it doesn't contain a full project. Can you include one that has valid package.json and tsconfig.json files?

I did find what might be a related bug, angular/angular#15969. This was due to @angular/animations not being installed along side @angular/material.

[mjamin]

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

[Elecweb]

@mjamin do you have any fix yet?

[Nerketur]

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.

[Nerketur]

@chuckjaz @mjamin I made a different reproduction of the issue I found that more closely (I think) matches the description https://github.com/Nerketur/shared-ng-module-test

It doesn't seem to have anything to do with compiler options, as this entire project uses default everything.

[jogit82]

When you said ALS cannot find CommonModule/your custom component, do you mean ALS auto complete does not work when you try to use the CommonModule/custom component?

[Nerketur]

Auto-complete does not work, and red error lines appear with the error:
"[Angular]
'app-testing' is not a known element:

1. If 'app-testing' is an Angular component, then verify that it is part of this module.
2. If 'app-testing' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message."

(using the repo i just provided)

[chuckjaz]

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.

[hccampos]

@chuckjaz no worries. Grateful that you are putting so much effort into it. It's getting there ;)

[tariknz]

Is there a workaround for this?

[cmeredith]

Also having this issue. Just wondering if there's any update as I'd love to continue using this plugin.

[tx8821]

I think this fixes the problem: #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.

[tariknz]

@tx8821 that worked thank you. Good enough for now! I'm just glad I can use it again, by far the best feature from v4!

[wermetal]

@tx8821 thank you for solution! But this is not a fix, this is just one more crutch in code. Will wait for real fix

[rhefner]

Having the same issue, would love to see a fix vs. using relative paths (ugh!). Thanks for your hard work thus far! :)

[Domvel]

Ionic 4 multi-app (monorepo) brought me here.
Sadly Ionic requires a package.json for each app. In other words: I have 3 projects in one. 2 apps and the root. Every package json is more or less equal. Anyway... this is my workspace structure (snippet):

root
|- apps
|  |- app1
|  |  |- package.json
|  |  |- tsconfig.json
|  |- app2
|     |- package.json
|     |- tsconfig.json
|- lib
|  |- (export stuff like components)
|- package.json
|- tsconfig.json
|- angular.json (with all apps defined)

tsconfig.json of an app:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"],
    "paths": {
      "@lib/*": ["../../lib/*"]
    }
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

I can import the HelloWorldComponent from lib.
But in html I get the error:

'app-hello-world' is not a known element:
1. If 'app-hello-world' is an Angular component, then verify that it is part of this module.
2. If 'app-hello-world' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.Angular

The Angular-Language-Service should work because the HelloWorldComponent is declared in app.module.ts. Weird. Maybe it's because the folder is outside from the app src? The alias path @lib is just a shortcut. I also tried it without and direct import of the Component. Still error.

Maybe this should be a new issue?

[kyliau]

We used to implement custom logic for discovering and parsing tsconfig.json, and missed path mappings in the process.
This is no longer the case with the new extension released today.
Since original issue is more than two years old, I'd like to close it.
Please file a new issue if similar behavior still exists in the new extension.
Thank you very much!

[kuncevic]

Related #14 (comment)

[angular-automatic-lock-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.}