Why my file app.component.html is not working?


My basic angular app is not displaying the app.component.html content, always I have the content of index html.

Index HTML:

<!DOCTYPE html>
    <title>Angular 6</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
      System.import('main.js').catch(function(err){ console.error(err); });


App Component ts:

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

  selector: 'my-app',
    templateUrl: 'wwwroot/app.component.html'
export class AppComponent { title = 'My First Angular App!'; }

App Module ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

    imports: [BrowserModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
export class AppModule { }

app component html:

<!DOCTYPE html>
    <meta charset="utf-8" />


enter image description here

enter image description here

I’m using angular 6 with an ASP.NET CORE 1.1 application.


app.component.html isn’t the root of your web page, it’s the root of your angular app. index.html is the only place where your <html> tag should be. index.html contains the <my-app></my-app> tag that is the root of your angular app.

If you put <html></html> in your angular.component.html, when your angular app is put into index.html after running ‘ng start’ your compiled web page will look something like this:

<html> <!-- from index.html -->
      <html> <!-- from app.component.html -->

and your webpage can’t have two <html> root elements in it.

To get your example working take the following tags out of app.component.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> and <body>

Answered By – Jolleyboy

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published