Angular 6 Failed to compile - angular6

Question

Example:Tthis is a child component for app component, using command line
ng g c emp
to create it. what ever created it will fail at compile
time.
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-emp',
templateUrl: `
<h2>EmpList</h2>
<ul *ngFor="let emp of empArr">
<li>{{emp.name}} {{emp.id}} {{emp.age}}</li>
</ul>
`,
styleUrls: ['']
})
export class EmpComponent implements OnInit {
public empArr=[
{"id":1,"name":"jamal","age":25},
{"id":2,"name":"yasser","age":80},
{"id":3,"name":"zolla","age":11}
];
constructor() { }
ngOnInit() {
}
}
I got below error message:
> Module not found: Error: Can't resolve './
> <h2>EmpList</h2>
> <ul *ngFor="let emp of empArr">
> <li>{{emp.name}} {{emp.id}} {{emp.age}}</li>
> </ul>
> ' in 'D:\Angular\bind\src\app\emp'
> ERROR in ./src/app/emp/emp.component.ts
> Module not found: Error: Can't resolve './' in 'D:\Angular\bind\src\app\emp'

Answer 1

Since you're providing an inline template, the templateUrl property in your component decorator should be called template instead.
Alternatively, put your template in a separate file, and then you can refer to it by URL.

Answer 2

You need to do changes in your emp.component.ts file.
Angular 6 provides template injection in 2 way.
By using templateUrl :
If you use templateUrl your code should look like :-
#Component({
selector: 'app-emp',
templateUrl: './emp.component.html',
styleUrls: ['']
})
Here you need to provide the link of external html file where you can put your html code.
I have created demo for this example.
By using template: If you use template only in your code, it should look like-
#Component({
selector: 'app-emp',
template:
<h2>EmpList</h2>
<ul *ngFor="let emp of empArr">
<li>{{emp.name}} {{emp.id}} {{emp.age}}</li>
</ul>
,
styleUrls: ['']
})
Please have a look for another demo using template selector.
I think it will clear idea and difference between templateUrl and template.

Answer 3

You are providing html into templateUrl ...
Basically from angular2 in #component constructor object have few properties for component.html linking
templateUrl : here we provide relative path of component.html
file.
template : here we provide html used in component.
so you can use anyone and provide input accordingly.