• Register
1 vote
5k 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
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 138 views
138 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
1 vote
2 answers 154 views
154 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, 2020 morrisBson 3.2k points
0 votes
1 answer 1.9K views
1.9K 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, 2020 mphil 2.3k points
0 votes
1 answer 82 views
82 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, 2020 mphil 2.3k points
0 votes
1 answer 144 views
144 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, 2020 Raphael Pacheco 4.9k points
0 votes
1 answer 3.7K views
3.7K views
Problem: I am currently wondering why I am getting below compile error if I just declare variable with var or let keywords? I want to say, below code goes well: export class MyAppComponent { myRefreshClickStream$: any; constructor(){ } } While this brings the error: export class MyAppComponent { var myRefreshClickStream$: any; constructor(){ } }
asked Jan 27, 2020 jwilliam 3.9k points
0 votes
1 answer 824 views
824 views
Problem : I am facing below error as : node_modules/rxjs/internal/types.d.ts(81,44): error TS1005: ';' expected. After I tried to do the installation of Angular 6. Check the detailed error as below : ERROR in node_modules/rxjs/internal/types.d.ts(81,44): ... internal/types.d.ts(81,76): error TS1005: ';' expected. node_modules/rxjs/internal/types.d.ts(81,78): error TS1109: Expression expected.
asked Dec 18, 2019 alecxe 7.5k points
0 votes
1 answer 168 views
168 views
Problem : I have upgraded my Angular 4 project using angular-seed but now facing following error please include either "browseranimationsmodule" or "noopanimationsmodule" in your application.
asked Nov 14, 2019 peterlaw 6.9k points
0 votes
1 answer 25 views
25 views
Problem: So I have an MVC application where I am trying to send an email from an Angular form running on a DotNet server. The main problem I see is that when I call the service from my Angular component, it returns 404 (URL not found maybe). Now I have a message in my controller that ...         }     } } Now I can't figure out why it can't talk to the controller. Is there something I am missing?
asked Dec 7, 2020 sasha 13.2k points