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

xfyts7mz  于 2022-10-31  发布在  Angular
关注(0)|答案(5)|浏览(278)

我试着运行我的第一个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 { }

浏览器控制台

px9o7tmv

px9o7tmv1#

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

import "core-js/client/shim"; 

import "zone.js";

import "reflect-metadata";
  1. ng build,然后按回车键。
  2. ng serve
wlzqhblo

wlzqhblo2#

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

〉服务--产品

hc2pp10m

hc2pp10m3#

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

11dmarpk

11dmarpk4#

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

  1. ng构建,然后按Enter键。
  2. ng发球
    我希望它也能对你有所帮助。
t30tvxxf

t30tvxxf5#

打开根文件夹中的angular.json,将这一行“index”更改为:“src/index.html”,将其转换为“索引”:“源代码/应用程序/应用程序组件. html”,

相关问题