Why are the curly braces in my Angular app's html code not compiling what is inside of them?

Question

I've just started my adventure with Angular and I've faced a problem. I know that you can create a property in app.components.ts and display it in html code by putting its name into curly braces and it should output the property on the wesite In my case it just doesn't work and I'a actually clueless. That is my app.components.ts:

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

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

There is a property named "title" that I want to use in my html code. My app.component.html:

<div>
    {{title}}
</div>

After running live server the browser displays exactly what I typed without compiling it, so "{{title}}" is what I see on the webpage, instead of "AngularCV" I searched through similar problems, but nothing worked. Maybe it is trivial, but I am stumped right now.

Answer 1

All right, I just created a brand new angular app, and modified my current html files to match those created in the brand new app. Everything works as it should. As far as I undestand this, the src/index.html should contain just head and empty body with just mark. And all the stuff but without the head should be put into app.component.html. Hope that helps someone in the future.