If selector is an Angular component then verify that it is part of this module

Question

I am new in Angular2  I have tried to create a component but showing an error   This is the app component ts file   import   Component   from   angular core   import   MyComponentComponent   from    my-component component     Component     selector   my-app     template         lt h1 gt Hello   name   lt  h1 gt       lt h4 gt Something lt  h4 gt       lt my-component gt  lt  my-component gt         directives   MyComponentComponent     export class AppComponent   name    Sam      This is the component which i want to create   import   Component   from   angular core     Component   selector   my-component   template         lt p gt This is my article lt  p gt        export class MyComponentComponent        Showing the two errors    If my-component is an Angular component  then verify that it is part of this module  If my-component is a Web Component then add CUSTOM ELEMENTS SCHEMA to the  NgModule schemas of this component to suppress this message     Please Help

User · Answer

In my case I had a component in a Shared module.

The component was loading and worked well but typescript was highlighting the html tag with red line and showed this error message.

Inside this component, I noticed I didn't import a rxjs operator.

import {map} from 'rxjs/operators';

When I added this import the error message disappeared.

Check all imports inside the component.

Hope it helps someone.

User · Answer

Had the same issue  found that the template component tags worked with  lt app- component-name  gt  lt  app- component-name  gt   So  if your component is called mycomponent component ts   Component     selector   my-app     template         lt h1 gt Hello   name   lt  h1 gt       lt h4 gt Something lt  h4 gt       lt app-mycomponent gt  lt  app-mycomponent gt

User · Answer

Go to the tsconfig json file  write this code under angularCompilerOption    quot angularCompilerOptions quot           quot fullTemplateTypeCheck quot   true        quot strictInjectionParameters quot   true          quot enableIvy quot   false

User · Answer

Check which module the parent component is being declared in     If your parent component is defined in the shared module  so must your child module   The parent component could be declared in a shared module and not the module that is logical based on the file directory structure   naming  even the Angular CLI added it into the wrong module in my case

User · Answer

Declare your MyComponentComponent in MyComponentModule  Add your MyComponentComponent to exports attribute of  MyComponentModule   mycomponentModule ts   NgModule      imports         exports   MyComponentComponent      declarations   MyComponentComponent      providers          export class MyComponentModule        Add your MyComponentModule to your AppModule imports attribute   app module ts       NgModule          imports   MyComponentModule         declarations   AppComponent          providers             bootstrap   AppComponent             export class AppModule       Important If your still have that error  Stop your server ctrl c from terminal  and run it again ng serve -o

User · Answer

are you importing it in your app module ts like so and remove the directives bit -   NgModule       bootstrap   AppComponent       imports   MyComponentModule     or whatever the name of the module is that declares your component       declarations   AppComponent       providers        export class AppModule      Your MyComponentModule should be like this -   NgModule       imports          exports   MyComponentComponent       declarations   MyComponentComponent       providers         export class MyComponentModule

User · Answer

Your MyComponentComponent should be in MyComponentModule   And in MyComponentModule  you should place the MyComponentComponent inside the  exports    Something like this  see code below    NgModule      imports         exports   MyComponentComponent      declarations   MyComponentComponent      providers          export class MyComponentModule       and place the MyComponentModule in the imports in app module ts like this  see code below    import   MyComponentModule   from  your file path     NgModule      imports   MyComponentModule     declarations   AppComponent      providers         bootstrap   AppComponent      export class AppModule      After doing so  the selector of your component can now be recognized by the app   You can learn more about it here  https   angular-2-training-book rangle io handout modules feature-modules html  Cheers

User · Answer

Hope you are having app module ts   In your app module ts add below line-   exports   myComponentComponent     Like this   import   NgModule  Renderer   from   angular core   import   HeaderComponent   from    headerComponent header component   import   HeaderMainComponent   from    component   import   RouterModule   from   angular router     NgModule       declarations            HeaderMainComponent          HeaderComponent            imports            RouterModule             providers          bootstrap   HeaderMainComponent       exports   HeaderComponent      export class HeaderModule

User · Answer

In your components module ts you should import IonicModule like  this   import   IonicModule   from   ionic angular    Then import IonicModule like this     imports        CommonModule      IonicModule        so your components module ts will be like this   import   CommonModule   from   angular common   import  PostComponent  from    post post component  import   IonicModule   from   ionic angular     NgModule     declarations   PostComponent     imports        CommonModule      IonicModule        exports   PostComponent     export class ComponentsModule

User · Answer

Check your selector in your filename component ts  Using the tag in various html files I would say    lt my-first-component gt  lt  my-first-component gt    Should be   lt app-my-first-component gt  lt  app-my-first-component gt    Example   Component     selector   app-my-first-component     templateUrl     my-first-component component html     styleUrls      my-first-component component scss

User · Answer

In my case I was writing unit tests for a component that uses sub-components  and I was writing tests to make sure those subcomponents were in the template   it  should include the interview selection subview        gt        expect fixture debugElement query By css  app-interview          toBeTruthy              I didn t get an error  but a warning      WARN    app-interview  is not a known element          If  app-interview  is an Angular component  then verify that it is part of this module  WARN    app-interview  is not a known element    If  app-interview  is an Angular component  then verify that it is part of this module    If  app-interview  is a Web Component then add  CUSTOM ELEMENTS SCHEMA  to the   NgModule schemas  of this component   to suppress this message        Also  the subcomponent did not show inside the browser during testing    I used ng g c newcomponent to generate all the components  so they were already declared in the appmodule  but not the test module that for the component I was spec ing    beforeEach async      gt        TestBed configureTestingModule         declarations    EditorComponent          InterviewComponent              compileComponents

User · Answer

I am using Angular v11 and was facing this error while trying to lazy load a component  await import    my-component component    and even if import and export were correctly set  I finally figured out that the solution was deleting the separate dedicated module s file and move the module content inside the component file itself  rm -r my-component module ts  and add module inside my-component ts  same file   Component     selector   app-my-component     templateUrl     my-component page html     styleUrls      my-component page scss       export class MyComponent       NgModule     imports   CommonModule     declarations   MyComponent      export class MyComponentModule

User · Answer

This might be late  but i got the same issue but I rebuild ng serve  the project and the error was gone

User · Answer

Maybe This is for name of html tag component  You use in html something like this  lt mycomponent gt  lt  mycomponent gt   You must use this  lt app-mycomponent gt  lt  app-mycomponent gt

User · Answer

Don t export   default   class MyComponentComponent   Related issue that might fall under the title  if not the specific question   I accidentally did a     export default class MyComponentComponent         and that screwed things up too    Why  VS Code added the import to my module when I put it into declarations  but instead of     import   MyComponentComponent   from          it had  import MyComponentComponent from          And that didn t map up downstream  assumedly since it wasn t  really  named anywhere with the default import   export class MyComponentComponent     No default  Profit

User · Answer

You must declare your MyComponentComponent in the same module of your AppComponent   import   AppComponent   from        import   MyComponentComponent   from          NgModule      declarations    AppComponent  MyComponentComponent       bootstrap    AppComponent      export class AppModule

[angular] If '<selector>' is an Angular component, then verify that it is part of this module

Examples related to angular

Examples related to typescript