Белый экран вместо компонентов в Angular

Question

Пишу приложение на ангуляр. Использую 3 компоненты. Для примера приведу 1. Здесь у меня происходит отображение новостей:

feed.component.ts:

 import { Component, OnInit } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import { FormsModule } from '@angular/forms'; // добавлено
    interface Post {
      text: string;
    }
    
    @Component({
      selector: 'app-feed',
      templateUrl: './feed.component.html',
      styleUrls: ['./feed.component.css']
    })
    
    export class FeedComponent implements OnInit {
      loggedIn: boolean = false;
      loginData: any = {};
      postData: any = {};
      loginMessage: string = '';
      posts: Post[] = [];
    
      constructor(private http: HttpClient) {}
    
      ngOnInit() {
        // Возможно, здесь будет логика для проверки авторизации пользователя и загрузки записей ленты
      }
    
      login() {
        // Ваша логика для входа
      }
    
      addPost() {
        // Ваша логика для добавления записи
      }
    }

feed.component.html:
<div *ngIf="!loggedIn">
    <h2>Войти</h2>
    <form (submit)="login()">
      <input type="text" placeholder="Логин" [(ngModel)]="loginData.username" name="username" required>
      <input type="password" placeholder="Пароль" [(ngModel)]="loginData.password" name="password" required>
      <button type="submit">Войти</button>
    </form>
    <p>{{ loginMessage }}</p>
  </div>
  
  <div *ngIf="loggedIn">
    <h2>Добавить запись</h2>
    <form (submit)="addPost()">
      <textarea placeholder="Введите текст записи" [(ngModel)]="postData.text" name="text" required></textarea>
      <button type="submit">Добавить</button>
    </form>
  </div>
  
  <div>
    <h2>Лента новостей</h2>
    <div *ngFor="let post of posts">
      <p>{{ post.text }}</p>
    </div>
  </div>

app.component.html:

<router-outlet></router-outlet>

app.component.ts:

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

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

И вот собственно index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Angular App</title>
  <base href="/">
</head>
<body>
  <app-root></app-root> <!-- Здесь вызывается корневой компонент приложения -->
</body>
</html>

Почему у меня не загружаются страницы? http://localhost:4200/feed выдает белый экран

БЛОГ НА HUSL

Белый экран вместо компонентов в Angular

Ответы (0 шт):