2
votes

I'm trying to perform a simple template injection into a page, but I receive the following error at run time in the console window of chrome :

zone.js:388 Unhandled Promise rejection: Template parse errors: 'recruiter-detail' is not a known element:

  1. If 'recruiter-detail' is an Angular component, then verify that it is part of this module.
  2. If 'recruiter-detail' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]"): AppComponent@0:0 ; Zone: ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors: 'recruiter-detail' is not a known element:
  3. If 'recruiter-detail' is an Angular component, then verify that it is part of this module.

app.component.ts

import { Component } from '@angular/core';
import { RecruiterDetailsComponent } from "./recruiter/recruiter-details.component";

@Component({
    selector: 'pm-app',
    template: `<recruiter-detail></recruiter-detail>`
})
export class AppComponent {
    pageTitle: string = 'Agent details';

recruiter-details.component.ts this resides in a subfolder called recruiter

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

@Component({
    selector: 'recruiter-detail',
    templateUrl: './app/recruiter/recruiter-details.component.html'
})
export class RecruiterDetailsComponent {
}

I'm using VS2015. under my wwwroot folder I have an app folder where main.ts, app.component.ts and app.module.ts reside. app has a subfolder of recruiter.

2
Show us your app module , you've probably forgotten to declare RecruiterDetailsComponent in you app module - Milad

2 Answers

1
votes

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

Did you add your recruiter-detail component in declarations section in your module.ts

Also the error says promise rejection.

Look at your code once more, There are probably errors in the template.

Try adding your component to declarations in module.ts If it does not work look at how you are handling the promise and also look at the template for errors or typos

1
votes

Try by changing template url like

templateUrl: 'app/recruiter/recruiter-details.component.html'

instead of

templateUrl: './app/recruiter/recruiter-details.component.html'