我的 Angular 应用程序中没有显示任何内容答案

【问题标题】：There is nothing displayed in my Angular App我的 Angular 应用程序中没有显示任何内容
【发布时间】：2020-06-10 00:24:46
【问题描述】：

我是 Web 开发的新手，我正在关注这个 tutorial，直到我在后端代码之前尝试构建它，但页面中没有任何内容，我尝试了 ng serve 和 ng build（然后将它提供给我当地的 IIS）。这是代码

index.html（构建）

<!doctype html>
<html lang="en">
<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <meta charset="utf-8">
  <title>NewApp</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>
<script src="runtime-es2015.js" type="module"></script><script src="runtime-es5.js" nomodule defer></script><script src="polyfills-es5.js" nomodule defer></script><script src="polyfills-es2015.js" type="module"></script><script src="styles-es2015.js" type="module"></script><script src="styles-es5.js" nomodule defer></script><script src="vendor-es2015.js" type="module"></script><script src="vendor-es5.js" nomodule defer></script><script src="main-es2015.js" type="module"></script><script src="main-es5.js" nomodule defer></script></body>
</html>

app-routing.module.ts

import { NgModule, Component } from "@angular/core";
import { RouterModule,Routes } from '@angular/router';
import {AuthGuard} from './helpers/canActivateAuthGuard';
import { LoginComponent }   from './components/login/login.component';
import { LogoutComponent }   from './components/login/logout.component';
import { DashboardComponent }   from './components/dashboard/dashboard.component';
import { UsersComponent }      from './components/users/users.component';
import {AppComponent} from './layout/app.component'

const routes: Routes = [

  {path: '', redirectTo: '/dashboard', pathMatch: 'full', canActivate: [AuthGuard]},
  {path: 'login', component: LoginComponent},
  {path: 'logout', component: LogoutComponent},
  {path: 'dashboard', component: DashboardComponent},
  {path: 'users', component: UsersComponent},

]
@NgModule({

  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]

})

export class AppRoutingModule {}

app.module.ts

import {MatButtonModule} from '@angular/material/button';
import {MatCheckboxModule} from '@angular/material/checkbox'
import {MatInputModule} from '@angular/material/input';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatSidenavModule, MatSidenav} from '@angular/material/sidenav';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import {HttpClientModule} from '@angular/common/http';

@NgModule({

  imports: [

    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatCheckboxModule,
    MatInputModule,
    MatFormFieldModule,
    MatSidenavModule,
    AppRoutingModule,
    HttpClientModule],
  })

  export class AppModule{}

app.component.html

<div *ngIf="authentication">
  <app-head></app-head>

  <button type="button" mat-button (click)="drawer.toggle()">

    Menu

  </button>

  <mat-drawer-container class="example-container" autosize>

    <mat-drawer #drawer class="example=sidenav" mode="slide">

      <app-left-panel></app-left-panel>

    </mat-drawer>

    <div>

      <router-outlet></router-outlet>

    </div>
  </mat-drawer-container>
</div>

<div *ngIf="!authentication"><app-login></app-login></div>

app.component.ts

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

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

【问题讨论】：

ng-serve 给出了什么输出
没什么，和我用ng build一样
您在浏览器控制台中遇到什么错误？
这里是控制台输出，但也许这只是对整个浏览器 DevTools 无法解析 SourceMap 的警告：chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.postload.js.map
创建一个工作的 Angular 应用程序：cli.angular.io 并比较您的项目。看看你哪里出错了。这就是你学习的方式。

标签： html angular web frontend

【解决方案1】：

您的 AppComponent 永远不会被声明。您在 AppModule 中缺少以下内容

@NgModule({
declarations : [AppComponent],
bootstrap: [AppComponent],
imports: [ 
...

这应该已在您的浏览器开发者工具中注明。

【讨论】：

现在在应用模块中添加了它，但仍然没有
您是否还考虑了我的最新编辑并添加了引导属性？我检查了你的教程，那里的 NgModule 也缺少它。我假设你只是复制了它，这是行不通的。
声明组件后，您应该在开发工具中获得更详细的错误日志记录。您还缺少 CommonModule 的导入，因为 ngIf 也在您的 AppComponent 中使用。
你好，我刚刚添加了它，仍然没有
请在您的开发工具中提供错误消息，以便进一步排除故障。 Angular 会清楚地指出这一点。您可能还想发布一个演示 (stackblitz.com)

【解决方案2】：

正如这里已经描述的那样，您应该将AppComponent 添加到declarations 和bootstrap 数组内AppModule

@NgModule({
  declarations : [AppComponent],
  bootstrap: [AppComponent],
  imports: [...]
})

您还在app.component.html 中的*ngIf 内部使用authentication 属性，但该属性未在app.component.ts 内部定义

尝试将其添加到app.component.ts

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

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

当我在 Stackblitz 上测试时，这实际上并没有在控制台中导致任何错误消息

你提供的教程中也有描述

基本上我们将在组件中拥有一个身份验证属性如果用户是，这将允许我们删除标题和菜单未登录，而是显示一个简单的登录页面。

【讨论】：