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:
my-component
is an Angular component, then verify that it is part of this module.my-component
is a Web Component then add CUSTOM_ELEMENTS_SCHEMA
to the @NgModule.schemas
of this component to suppress this message. Please Help.
This question is related to
angular
typescript
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!
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']
})
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.
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.
Go to the tsconfig.json file. write this code under angularCompilerOption:
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true,
**"enableIvy": false**
}
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();
}));
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 {}
MyComponentComponent
in MyComponentModule
MyComponentComponent
to exports
attribute of MyComponentModule
mycomponentModule.ts
@NgModule({
imports: [],
exports: [MyComponentComponent],
declarations: [MyComponentComponent],
providers: [],
})
export class MyComponentModule {
}
MyComponentModule
to your AppModule imports
attributeapp.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
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.
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 { }
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 {
}
This might be late ,but i got the same issue but I rebuild(ng serve
) the project and the error was gone
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 { }```
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>
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 {}
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>
`,
Source: Stackoverflow.com