If '' 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: `
    <h1>Hello {{name}}</h1>
    <h4>Something</h4>
    <my-component></my-component>
  `,
  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: `
    <p>This is my article</p>
`
})

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.

score 282 · Accepted Answer · edited Dec 24 '22 at 08:58

282

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

edited Dec 24 '22 at 08:58

starball

20,030
7
43
238

answered Oct 04 '17 at 05:32

Cyan Baltazar

3,462
1
17
11

23

if you're still having issues, don't forget to check your selector declared in your component's .ts file. You might have forgotten to add "app-" to the html code when you placed your component in the parent's html file. – Jared Jan 10 '19 at 18:49
3

I've had this error caused by the @Input name being incorrect. Very misleading, so remove inputs in your component tag while troubleshooting. – Ben Racicot Jan 20 '19 at 21:16
1

I am still having issues with this. I am importing MatRadioModule from angular material/radio and the directives in that module are throwing this error. – Souritra Das Gupta Oct 07 '19 at 16:44
5

This is not longer valid for latest version of Angular (I tested it on v.8) – Dani Dec 13 '19 at 09:16
6

another complicated and convoluted issue that makes no intuitive sense. Thanks angular, as always. – Felipe Apr 20 '21 at 05:33
I followed your steps but having the same issue: app-profile-form' is not a known element (used in the 'ProfilePage' component template): 1. If 'app-profile-form' is an Angular component, then verify that it is a part of an @NgModule where this component is declared. – D.Hodges Jun 28 '22 at 13:57
I was told in another Stack post that I don't need the ngModule. When I remove it I get the error but when I add it the error goes away but I don't see any content on the parent page – D.Hodges Jun 28 '22 at 16:07
1

@Jared a useful remark, thx. It brought me the solution to my issue: the selector was generated by cli. After changing it to (note the "." and the "-") my compiler was happy-building. – otembajelle Jul 30 '22 at 08:01

score 43 · Answer 2 · answered Dec 18 '17 at 07:59

43

Maybe This is for name of html tag component

You use in html something like this <mycomponent></mycomponent>

You must use this <app-mycomponent></app-mycomponent>

answered Dec 18 '17 at 07:59

keivan kashani

1,263
14
15

12

Name of `html` tag determine `selector` property. In this case is `my-component`. – Tomasz Jakub Rup Apr 04 '18 at 19:50
Worked for me! Was searching for an hour. – Ashutosh Tiwari Mar 01 '23 at 08:36

Joe Keene · Answer 3 · 2018-04-30T13:30:37.170

33

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 {
}

edited Apr 30 '18 at 13:30

answered May 12 '17 at 12:13

Joe Keene

2,175
21
27

2

You forgot about `exports` – Tomasz Jakub Rup Apr 04 '18 at 19:49
1

It helped me as I was able to import and export the 3rd party angular component. Thanks – shubham arora Sep 18 '19 at 14:36
Thank you very much, clear explanation. – Mo D Genesis Jul 27 '22 at 21:50

MDMoore313 · Answer 4 · 2020-02-21T11:09:08.003

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', () => {
    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(() => {
    TestBed.configureTestingModule({
      declarations: [ EditorComponent,
        InterviewComponent]
    })
    .compileComponents();
  }));

score 9 · Answer 5 · answered Jan 26 '19 at 13:02

Check your selector in your filename.component.ts

Using the tag in various html files I would say

<my-first-component></my-first-component>

Should be

<app-my-first-component></app-my-first-component>

Example

@Component({
  selector: 'app-my-first-component',
  templateUrl: './my-first-component.component.html',
  styleUrls: ['./my-first-component.component.scss']
})

score 6 · Answer 6 · answered Aug 22 '19 at 15:18

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

The final step is what I needed on a project I hadn't touched in a while. After an 'npm install" "ng update" and then "npm update" — Jeff Longo, Sep 17 '19 at 15:08
Thanks for mentioning `exports` part explicitly, this step was what I missed. — Neurotransmitter, Mar 18 '21 at 14:27

score 3 · Answer 7 · edited Sep 01 '20 at 07:42

3

Go to the tsconfig.json file. write this code under angularCompilerOption:

 "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,
     "strictInjectionParameters": true,
     **"enableIvy": false**
 }

edited Sep 01 '20 at 07:42

David Buck

3,752
35
31
35

answered Sep 01 '20 at 06:42

Mohammad Hosseini

575
2
7

1

Considering this stops the use of Ivy, one of the most important improvements in Angular for years, I think it warrants at least a mention of why you would do this. – Heretic Monkey Aug 16 '22 at 17:40

score 2 · Answer 8 · answered Aug 12 '20 at 19:55

Had the same issue, found that the template component tags worked with <app-[component-name]></app-[component-name]>. So, if your component is called mycomponent.component.ts:

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello {{name}}</h1>
    <h4>Something</h4>
    <app-mycomponent></app-mycomponent>
  `,

score 1 · Answer 9 · answered Jan 27 '19 at 23:24

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 {}

score 1 · Answer 10 · answered Feb 21 '20 at 01:36

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.

Robert Rendell · Answer 11 · 2020-06-06T11:26:09.007

1

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.

edited Jun 06 '20 at 11:26

answered Jun 04 '20 at 18:55

Robert Rendell

1,658
15
18

score 1 · Answer 12 · answered Nov 27 '20 at 09:16

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 {}

This solution may not work, if you wanted to use this component in more than one place — sijo vijayan, Jan 11 '22 at 14:04

score 1 · Answer 13 · answered Mar 07 '23 at 17:17

1

This happened with me when I renamed a component, I started getting this error. Fixed it after deleting node_modules folder and then ran npm cache clean --force and then npm install

answered Mar 07 '23 at 17:17

Ali

1,633
7
35
58

score 0 · Answer 14 · answered Apr 25 '18 at 06:34

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 { }

score 0 · Answer 15 · answered Oct 12 '19 at 13:57

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 { }```

score 0 · Answer 16 · answered Jun 19 '20 at 19:21

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.

score 0 · Answer 17 · answered Oct 09 '20 at 16:36

0

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

answered Oct 09 '20 at 16:36

Dinesh Kumar

131
3
11

score 0 · Answer 18 · answered Feb 14 '22 at 13:18

The above error is produced from Angular 9 onwards as well. This book provides a solution.

"The warning suggests CUSTOM_ELEMENTS_SCHEMA, but the elements in question are not Web Components. We want Angular to simply ignore the elements. Therefore we use the NO_ERRORS_SCHEMA, “a schema that allows any property on any element”. Adding schemas: [NO_ERRORS_SCHEMA] to your respective .spec file removes the error.

await TestBed.configureTestingModule({
  declarations: [MyComponent],
  schemas: [NO_ERRORS_SCHEMA],
}).compileComponents();

score 0 · Answer 19 · answered Mar 27 '22 at 16:13

I had a similar Problem, but none of the mentioned solutions worked. In the end i realized i have a routing problem:

I thought if i specify my component in the app-routing.module like so:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MainComponent } from './pages/main/main.component';

const routes: Routes = [
  {
    path: '', 
    component: MainComponent
  },
]

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

i would not have to import the MainModule in my AppModule, which is wrong since here only the component gets imported. Any other components declared in MainModule will not be visible which results in the error message you described.

Solution 1:
Import the declaring module
Solution 2:
Lazyload the component like so:

const routes: Routes = [
{
    path: '', loadChildren: () => import('path_to_your_declaringModule').then(m => m.declaringModule)},
}

This works since the whole module gets imported here.

I realize you do not use routing in your example, just posting this for any other person that might use routing and stumbles across this question in search for a solution, like i did.

score 0 · Answer 20 · answered Sep 01 '22 at 11:35

In my case I have generated a new module and a new component in it, but I haven't add some custom written shared modules into component-name.module.ts file and proper routing configurations that should be add into component-name.routing.module.ts file. Check with other components for the consistency.

score 0 · Answer 21 · answered Sep 11 '22 at 08:20

0

I had different modules apart from app.module for example hom-page.mdule

I forgot to add Home-page.component to Home-page.module in the declarations section

answered Sep 11 '22 at 08:20

Mehrshad Farzaneh

465
5
20

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

21 Answers21

Don't `export default class MyComponentComponent`!

Linked

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

21 Answers21

Don't export **default** class MyComponentComponent!

Linked

Don't `export default class MyComponentComponent`!