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

标签 angularjs node.js

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

我遵循的步骤:

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

执行上述步骤后,服务器启动。但是当导航到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>

ma​​in.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 { }

enter image description here

enter image description here

浏览器控制台 Browser Console

Chrome Console shows Error

最佳答案

1. npm 我 mdn-polyfills --save

  • 并修改项目下的src\polyfills.ts文件,添加以下代码
  • //或者在其他 angular2 和 zone.js 内容之前加载它

    import "core-js/client/shim"; 
    
    import "zone.js";
    
    import "reflect-metadata";
    

    3.ng build 然后按 Enter 键。

    4.服务

    关于angularjs - 第一次运行 Angular 4 Web 应用程序项目后显示空白屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45224838/

    相关文章:

    JavaScript 时区对于过去的夏令时转换规则是错误的

    javascript - 使用 Angular、JavaScript 编辑和删除表单

    javascript - Base64 图像未显示

    javascript - Sequelize 同步查找

    javascript - 如何从 $rootScope 变量设置 $scope 值

    node.js - NodeJS + Nginx + Cloudflare

    javascript - 编辑、更新、删除 Angular 列表

    javascript - 如果我在 Controller 中设置了某些内容,如何在 View 中访问它?

    javascript - 如何在 angularjs 的 for 循环中动态创建 $rootScope.$on 事件监听器

    node.js - 快速路线参数中的连字符