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:
- If 'recruiter-detail' is an Angular component, then verify that it is part of this module.
- 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:
- 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.