Já coloquei o <app-nova-transferencia> dentro do <app.component.html>, mas não roda na página | Angular: explorando o framework

Olá, boa tarde. Tudo bem? Estou com o problema no Ângular e não sei o que fazer.

Já coloquei o <app-nova-transferencia> dentro do <app.component.html>, mas não roda na página.

Segue os códigos: 1- nova-transferencia.component.html

<h1>oi</h1>
<form>
  <h2>Nova Transferência</h2>
  <div>
<label for="valor">Valor</label>
<input id="valor" type="text">
  </div>
  <div>
    <label for="destino">Destino</label>
    <input id="destino" type="text">
  </div>
  <button>Transferir</button>
</form>

2- nova-transferencia.component.ts

import { Component } from "@angular/core";
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
  selector: 'app-nova-transferencia.component',
  templateUrl: './nova-transferencia.component.html',
  styleUrls: ['./nova-transferencia.component.scss']
})

export class NovaTransferenciaComponent{
}

3- app.component.html: <app-nova-transferencia></app-nova-transferencia>

app.module.ts

 import { NovaTransfComponent } from './nova-transf/nova-transf.component';
 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { AppComponent } from './app.component';
 import { NovaTransferenciaComponent } from './nova-transferencia/nova-transferencia.component';

 @NgModule({
   declarations: [
     AppComponent,
     NovaTransferenciaComponent,
     NovaTransfComponent
   ],
   imports: [
     BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent],
   schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
 })
 export class AppModule { }

app.componet.ts

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

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

index.html

 <!doctype html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <title>Bytebank</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
   <app-root></app-root>
 </body>
 </html>

tsconfig.json

 {
   "compileOnSave": false,
   "compilerOptions": {
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     // !!não será necessário o uso do Strict Mode
     // "forceConsistentCasingInFileNames": true,
     // "strict": true,
     // "noImplicitOverride": true,
     // "noPropertyAccessFromIndexSignature": true,
     // "noImplicitReturns": true,
     // "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
     "declaration": false,
     "downlevelIteration": true,
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
     "target": "es2017",
     "module": "es2020",
     "lib": [
       "es2020",
       "dom"
     ]
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
     "strictTemplates": true
   }
 }

No final, a página aparece assim: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Alguém pode me ajudar?