Error on Sub Component "Not a Known Element"

[thesaadmirza]

On Sub Components, if you try to add a child component in the parent component, it will give you an error that this is not a know Element even if you defined those in-app module declarations.

To Reproduce

Steps to reproduce the behavior:

1. Create a Component
2. Create its 1st Child Component
3. Now Create Another child under 1st Child Component, naming it as 1.1st Child.
4. Now try to add 1st child component in the parent Component

Expected behavior It Should not give Error

Logs

'app-recipe-list' is not a known element:

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

Screenshots

[ghost]

Does it transpile?

What is the definition of RecipeListComponent? Do you have an attribute selector on it? selector: 'app-recipe-list[someAttribute]',

[thesaadmirza]

[ayazhafiz]

Can you copy/paste code snippets for the NgModules all of these components/directives are defined in?

[thesaadmirza]

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";
import { HeaderComponent } from "./header/header.component";

import { RecipeListComponent } from "./recipes/recipe-list/recipe-list.component";
import { RecipesComponent } from "./recipes/recipes.component";
import { RecipeDetailComponent } from "./recipes/recipe-detail/recipe-detail.component";
import { RecipeItemComponent } from "./recipes/recipe-list/recipe-item/recipe-item.component";
import { ShoppingListComponent } from "./shopping-list/shopping-list.component";
import { ShoppingEditComponent } from "./shopping-list/shopping-edit/shopping-edit.component";
import { DropdownDirective } from "./shared/dropdown.directives";
import { shoppingListService } from "./shopping-list/shopping-list.service";

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    RecipeListComponent,
    RecipesComponent,
    RecipeDetailComponent,
    RecipeItemComponent,
    ShoppingListComponent,
    ShoppingEditComponent,
    DropdownDirective
  ],
  imports: [BrowserModule],
  providers: [shoppingListService],
  bootstrap: [AppComponent]
})
export class AppModule {}

edit ayazhafiz -- formatting

[ayazhafiz]

I cannot reproduce this issue. @thesaadmirza can you make a version of this issue that uses a small number, e.g. 2 or 3 components? If we have all the code and it is a small example it will be easier to debug the problem.

Also, what versions of the language service and typescript are you using? (see https://github.com/angular/vscode-ng-language-service/blob/master/.github/ISSUE_TEMPLATE/bug_report.md for how to get this)

[ayazhafiz]

Friendly ping @thesaadmirza -- can you provide the details above?

[ayazhafiz]

Closing due to a lack of activity. If you are still experiencing this issue, feel free to comment and we can re-open, or open a new issue.

[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.}