运行 Angular 4 Web 应用程序项目后显示空白屏幕第一次答案

【问题标题】：Blank screen displays After running Angular 4 web app project First time运行 Angular 4 Web 应用程序项目后显示空白屏幕第一次
【发布时间】：2022-03-24 21:00:10
【问题描述】：

我尝试运行我的第一个 Angular 4 js Web 项目。所以我为我的 npm 管理器安装了 node.js，并且我使用 Visual Studio 代码作为编辑器。执行以下步骤后。结果我得到了空白屏幕。请帮我解决这个问题。

我遵循的步骤：

npm install -g @angular/cli
ng 新项目
cd 项目
ng 服务

执行上述步骤后，服务器已启动。但是当导航到 http://localhost:4200/ 时。它显示空白页。

app.components.ts

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

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

app.component.html

<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
</div>

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);

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyFirstApp</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>

app.modules.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

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

浏览器控制台

【问题讨论】：

你的 app.module.ts 里面有什么？控制台是否显示任何错误？
我遇到了更大的应用程序，你可以把你的own loader/splash screen 放在app-root 标签之间..
开发模式下是否显示控制台错误？
检查控制台和终端是否抛出错误。您也可能不小心安装了两次 cli
@Maciej Treder ,@Kasunjith Bimal 我已将控制台和 app.module.ts 添加为屏幕截图。

标签： angularjs node.js

【解决方案1】：

1 . npm i mdn-polyfills --save

并修改项目src\polyfills.ts下的文件，添加如下代码

// 或在其他 angular2 和 zone.js 内容之前加载它

import "core-js/client/shim"; 

import "zone.js";

import "reflect-metadata";

3.ng build 然后回车。

4.ng serve

【讨论】：

【解决方案2】：

如果您想使用开发服务器中的构建测试您的生产构建，您可以运行。

> ng serve --prod

【讨论】：

【解决方案3】：

我遇到了类似的问题。我实际上是在尝试在子文件夹中运行 Angular 应用程序，同时 Angular 为自定义 JS 文件创建路径并指向根文件夹。

这有两种方法解决： 1. 我只将编译后的应用程序中的 JS 文件复制到根文件夹并开始工作。 2. 尝试在根文件夹中运行整个应用程序，但从未遇到过同样的问题。

您的问题可能与我面临的不同，但如果它可以帮助其他人，请分享我的经验。

【讨论】：

【解决方案4】：

我遇到了同样的问题。但我的问题通过在命令提示符下执行以下步骤得到解决：

ng build 然后回车。
ng 服务

希望对你也有帮助。

【讨论】：

感谢您的回复@varinderjit 。解决该问题后。我在 Windows 10 机器上遇到问题，有时工作有时不行。所以我更喜欢去Linux。现在 Angular 就像魅力一样发挥作用。
感谢您的建议@Shimaan。我也会尝试。

【解决方案5】：

这对我有用。在根文件夹中打开 angular.json。将这一行“index”：“src/index.html”更改为“index”：“src/app/app.component.html”，

【讨论】：