Приложение на asp.net mvc + angular 7

Начинаю изучать angular. Скачал node.js установил angular 7.2.12, angular cli 7.3.8. По примеру попробовал сделать первый проект. Но почему то не заработало. Вот как сейчас выглядит мой проект:

Вот мой код.

app.component.ts:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'MyAngular';
}

app.component.html:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>
<router-outlet></router-outlet>

Index.cshtml:

@{
    ViewBag.Title = "Angular Page";
}
@section Scripts {
    <script type="text/javascript" src="~/Scripts/libs/runtime.js"></script>
    <script type="text/javascript" src="~/Scripts/libs/polyfills.js"></script>
    <script type="text/javascript" src="~/Scripts/libs/styles.js"></script>
    <script type="text/javascript" src="~/Scripts/libs/vendor.js"></script>
    <script type="text/javascript" src="~/Scripts/libs/main.js"></script>
}
<app-root>Загрузка...</app-root>

Но почему то не выводиться страничка с помощью angular. Выводиться только то что на индексе. Может я какие то связи не указал что бы всё подтягивалось с помощью тега `

Подскажите пожалуйста, что у меня не так? Если понадобиться ещё какой то код, пишите, прикреплю.

RouteConfig:

public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
        }

Скрин запущенного приложения:

Ошибка на клиенте после запуска:

main.ts:12 Error: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.

Код main.ts:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
  enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

UPDATE:

Новый вариант компонента:

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    template: `<h1>Добро пожаловать {{name}}!</h1>
                <label>Введите имя:</label>
                <input [(ngModel)]="name" placeholder="name">`
})
export class AppComponent {
    name = 'Tom';
}