首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >第一次运行角4 web应用程序项目后显示的空白屏幕

第一次运行角4 web应用程序项目后显示的空白屏幕
EN

Stack Overflow用户
提问于 2017-07-20 20:45:04
回答 5查看 19.9K关注 0票数 1

我尝试运行我的第一个角4js网络项目。因此,我已经为我的npm管理器安装了node.js,并且我使用了visual studio代码作为编辑器。在遵循以下步骤之后。因此,我得到了空白屏幕。请帮我解决这个问题。

我遵循的步骤:

  • npm安装-g @转角/cli
  • 吴新工程
  • cd项目
  • 吴服务

执行上述步骤之后,服务器就启动了。但是当导航到http://localhost:4200/时。它显示的是空白。

app.components.ts

代码语言:javascript
复制
    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

代码语言:javascript
复制
<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
</div>

main.ts

代码语言:javascript
复制
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

代码语言:javascript
复制
<!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

代码语言:javascript
复制
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 { }

浏览器控制台

EN

回答 5

Stack Overflow用户

发布于 2018-01-16 11:23:06

1.npm i mdn-polyfills --save

  1. 并修改项目src\polyfills.ts下的文件,添加以下代码

//或在其他angular2 & zone.js之前加载它

代码语言:javascript
复制
import "core-js/client/shim"; 

import "zone.js";

import "reflect-metadata";

3.ng build,然后按回车。

4.ng serve

票数 0
EN

Stack Overflow用户

发布于 2018-07-12 12:21:10

如果要使用dev服务器中的build测试产品生成,则可以运行。

> ng服务--prod

票数 0
EN

Stack Overflow用户

发布于 2019-05-02 20:02:30

我也经历过类似的问题。实际上,我试图在子文件夹中运行角应用程序,同时为自定义JS文件创建角创建路径,并指向根文件夹。

这就解决了两种方法: 1.我只将JS文件从编译的应用程序复制到根文件夹,它就开始工作了。2.尝试在根文件夹中运行整个应用程序,但从未遇到相同的问题。

你的问题可能与我所面对的不同,但如果它能帮助别人的话,我会分享我的经验。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/45224838

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档