Could not find template file in typescript

Issue

I am trying to call HTML file into TS file, but I see file not found error.

@Component({
  selector: 'app/jsonData.ts',
  templateUrl: 'src/app/jsonData.html',
})
export class AppComponent {
  title = 'Angular';
}

Please explain

Solution

@Component({
  selector: 'my-app',
  templateUrl: './jsonData.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'Angular';
}

The selector should not contain the path because the selector is going to be used like this: <my-app></my-app> in some HTML template/file.

And coming to the templateUrl, it takes relative path to the HTML template. Since both the component and the template URL you're going to use are in the same folder, you can use ./ followed by the required file name.

That being said, it is better to name your files appropriately. app.component.ts, app.component.html, app.component.css

Hope this helps!

Answered By - lifetimeLearner007