• Register
1 vote
1.6k 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

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
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 18 views
18 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 quizzBabes 160 points
1 vote
2 answers 84 views
84 views
Problem : I am beginner to Angular2. Currently I am trying to create a simple form in the Angular2 app but it is not working for me. I am facing below error. &ldquo;Can't bind to 'formGroup' since it isn't a known property of 'form'.&rdquo; I am struggling on this error from couple of days. Still I don&rsquo;t know how to fix above error. Is it possible for somebody to fix it for me?
asked Mar 27 morrisBson 3.2k points
0 votes
1 answer 1.1K views
1.1K views
Problem : I am beginner in using Angular material. I am trying to use autocomplete component in the Angular2 project. Please find below the code written for my component. import {Component, OnInit} from "@angular/core"; import {ActivatedRoute, Router} from "@angular/router"; ... ; I am struggling with this issue from past 2 days but unable to resolve it. Can somebody help me in fixing this issue?
asked Feb 27 mphil 2.3k points
0 votes
1 answer 45 views
45 views
Problem : I am facing below error when trying to launch my Angular app, even if my component is not displayed at all. &ldquo;Can't bind to 'ngmodel' since it isn't a known property of 'input'. ("&rdquo; How can I fix this issue?
asked Feb 19 mphil 2.3k points
0 votes
1 answer 24 views
24 views
Problem: I am naive to Angular, Webpack, Bootstrap and typescript. I have tried to write a service but it is throwing the below error while my app is bootstrapping. I am currently using ng2 2.4.2 and the angular-cli 1.0.0-beta.24. My TypeError as below: &ldquo;Uncaught typeerror: ... .navigate(['/project', query]); } public extractData(res: Response) { let body = res.json(); return body || {}; } }
asked Sep 3 Raphael Pacheco 4.9k points