• Register
1 vote
7.8k views

Problem :

I have recently started learning Angular2. I am trying to create the component but I am facing below error.

Is an angular component, then verify that it is part of this module.”

 

KIndly find below my code for your reference.

import { Component } from '@angular/core';
import { MyHelloComponent } from './my-component.component';

@Component({
  selector: 'my-app',
  template: `
    <h1>HelloWorld {{name}}</h1>
    <h4>Something</h4>
    <my-component></my-component>
  `,
  directives: [MyHelloComponent]
})
export class AppComponent { name = 'MB' }

Following is the component for your reference.

import { Component } from '@angular/core';

@Component({
selector: 'my-component',
template: `
    <p>This is my Hello World article</p>
`
})

export class MyHelloComponent {

}
Kindly help me in fixing above error.
8 5 2
3,230 points

Please log in or register to answer this question.

2 Answers

1 vote

Solution :

I can help you in fixing your error. Please find below the required solution.
Please note your MyHelloComponent should be present in your MyComponentModule.

Also in your MyComponentModule you should try to place your MyHelloComponent inside your "exports".

Please refer code below.

@NgModule({
   imports: [],
   exports: [MyHelloComponent],
   declarations: [MyHelloComponent],
   providers: [],
})

export class MyComponentModule {
}

and then place your MyComponentModule in a imports in your app.module.ts please see code below

import { MyComponentModule } from 'your/file/path';

@NgModule({
   imports: [MyComponentModule]
   declarations: [AppComponent],
   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule {}

After doing above changes, the selector of the component can now be recognized by your app.

8 4 1
5,680 points
0 votes

Solution:

Your MyComponentComponent must be in MyComponentModule.

And in MyComponentModule, you must place the MyComponentComponent within the "exports".

pursue the below code:

@NgModule({
   imports: [],
   exports: [MyComponentComponent],
   declarations: [MyComponentComponent],
   providers: [],
})

export class MyComponentModule {
}

and set the MyComponentModule in the imports in app.module.ts like this (view code below).

import { MyComponentModule } from 'your/file/path';

@NgModule({
   imports: [MyComponentModule]
   declarations: [AppComponent],
   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule {}

Afterward doing so, the selector of your component can now be acknowledged by the app.

Maybe This is for name of html tag component

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

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

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 must be like this:

@NgModule({
    imports: [],
    exports: [MyComponentComponent],
    declarations: [MyComponentComponent],
    providers: [],
})
export class MyComponentModule {
}

 

10 6 4
31,120 points

Related questions

0 votes
1 answer 40 views
40 views
Problem : Kindly help me in fixing this error:Is an angular component, then verify that it is part of this module..
asked Mar 6 Wafa Abu Yousef 6.1k points
0 votes
1 answer 6 views
6 views
Problem: I have a mvc 5 project with a angular frontend . I wanted to add routing as described in this tutorial https://angular.io/guide/router. So in my _Layout.cshtml I added a <base href="/"> and created my routing in my app.module. But when I run ... resolve the tag 'router-outlet'. Any suggestions how I can fix this error? Am I missing a reference or a import or just overlooking something?
asked Apr 25 Supti 13k points
0 votes
1 answer 217 views
217 views
Problem: I am getting following message when i run angualr2 program with typescript. angular is running in the development mode. call enableprodmode() to enable the production mode. What is the reason for this message is it a deployment option? Curious for feedback ?
asked Jul 16, 2020 quizzBabes 160 points
0 votes
1 answer 4 views
4 views
Question: I'm developing with Ionic 2 and am having a problem with Typescript component templates. From a page, DataPage in the code below, I need to generate and present a modal view when a button is clicked. When I use templateUrl in the modal component, I am presented with an ... this? I don't mind working with template in the short term, but that isn't going to fly when I'm ready to release.
asked Apr 12 Atik03 26.5k points
0 votes
1 answer 3 views
3 views
Problem: I am new to angular 6 I have downloaded the ready-made angular template from link Navigated to root folder & Executed npm install trying to run the application ng serve but it's showing error Local workspace file ('angular.json') could not be found. package.json { "name" ... @schematics/update 0.6.3 (cli-only) rxjs 6.2.0 typescript 2.8.4 webpack 4.8.1 Please help me to address this issue.
asked 5 days ago anika11 32.2k points
0 votes
1 answer 5 views
5 views
Problem: I wonder why I get this compile error if I declare variable with var or let keywords? I mean, this goes well: export class AppComponent { refreshClickStream$: any; constructor(){ } While this brings the error: export class AppComponent { var refreshClickStream$: any; constructor(){ }
asked Apr 30 muktaa 34.6k points
0 votes
1 answer 5 views
5 views
Problem: I am getting this error, ERROR in The Angular Compiler requires TypeScript >=3.1.1 and <3.2.0 but 3.2.1 was found instead. Seems like Typescript updated but the Angular Compiler doesn't like that. How do I fix this?
asked Apr 24 sumaiya simi 43.9k points
0 votes
1 answer 40 views
40 views
Problem : I am upgrading from angular 4.4 to 5.0. After updating all HttpModule and Http to HttpClientModule When I I started, I get this error : NullInjectorError: No provider for HttpClient! Can someone please resolve the issue ?
asked Mar 9 Sabbir Hossain 14.6k points
0 votes
1 answer 2 views
2 views
Problem: I'm using Angular 4 and I am getting an error in the console: Can't bind to 'ngModel' since it isn't a known property of 'input' How can I resolve this?
asked 3 days ago anika11 32.2k points
0 votes
1 answer 7 views
7 views
Problem: ngFor isn't working in my app. I split my app into separate modules and included import { CommonModule } from '@angular/common'; into my child module and import { BrowserModule } from '@angular/platform-browser'; into my app.modules.ts file, but I still get ... t a known property of 'tr'. I have tried looking at other questions but all those just said to include CommonModule, which I am.
asked 4 days ago anika11 32.2k points