angularjs 第一次运行Angular 4 web app项目后显示空白屏幕

xfyts7mz 于 2022-10-31 发布在 Angular

关注(0)|答案(5)|浏览(279)

我试着运行我的第一个Angular 4 js web项目。所以我已经为我的npm管理器安装了node.js，并且我正在使用Visual Studio代码作为编辑器。在按照下面的步骤操作之后。我得到了一个空白屏幕。请帮助我解决这个问题。

我遵循的步骤：

npm安装-g @Angular /cli
新项目
cd项目
ng发球

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

应用程序组件.ts

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

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

应用程序.组件.html

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

主文件.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);

索引.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>

应用程序.模块.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 { }

浏览器控制台

angularjs

来源：https://stackoverflow.com/questions/45224838/blank-screen-displays-after-running-angular-4-web-app-project-first-time

5条答案

按热度按时间

px9o7tmv1#

1 .一个月一个月
1.并修改src\polyfills.ts项目下的文件，添加以下代码
//或在其他angular2 & zone.js内容之前加载它

import "core-js/client/shim"; 

import "zone.js";

import "reflect-metadata";

ng build，然后按回车键。
ng serve

赞(0）回复(0）举报 2022-10-31

wlzqhblo2#

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

〉服务--产品

赞(0）回复(0）举报 2022-10-31

hc2pp10m3#

我遇到了类似的问题。我实际上是试图运行子文件夹中的Angular应用程序，而angular创建了自定义JS文件的路径，并指向根文件夹。
有两种方法可以解决这个问题：1.我只将JS文件从编译后的应用程序复制到根文件夹，它就开始工作了。2.试图在根文件夹中运行整个应用程序，从来没有遇到过同样的问题。
你的问题可能与我所面临的不同，但如果它能帮助别人，请分享我的经验。

赞(0）回复(0）举报 2022-10-31

11dmarpk4#

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