使用Angular CLI运行ng new和ng serve后显示空白屏幕_Angular

使用Angular CLI运行ng new和ng serve后显示空白屏幕

angular

使用Angular CLI运行ng new和ng serve后显示空白屏幕,angular,Angular,我尝试运行Angular web项目。我已经用nvm安装了npm和node.js，并且使用visual studio代码作为编辑器。在遵循这些步骤之后。结果，我得到了空白屏幕。希望有人能帮我解决这个问题接下来的步骤 npm install -g @angular/cli ng new PROJECT cd PROJECT ng serve 执行上述步骤后，服务器启动。但当导航到时。它显示空白页 app.module.ts import { BrowserModule } from '@ang

我尝试运行Angular web项目。我已经用nvm安装了npm和node.js，并且使用visual studio代码作为编辑器。在遵循这些步骤之后。结果，我得到了空白屏幕。希望有人能帮我解决这个问题

接下来的步骤

npm install -g @angular/cli
ng new PROJECT
cd PROJECT
ng serve

执行上述步骤后，服务器启动。但当导航到时。它显示空白页

app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

梅因酒店

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

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

app.component.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)
 .catch(err => console.error(err));

index.html

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


面试前
{{title}}应用程序正在运行！
资源
以下是一些帮助您入门的链接：
下一步
你下一步想用你的应用做什么
新组件
角材料
添加依赖项
运行和观察测试
为生产而建造
生成组件xyz
ng添加@角度/材质
吴加_____
ng试验
ng构建——prod
爱角？

在Chrome中导航到时，控制台上没有任何信息。没有错误。我已卸载cli并重新安装，但没有任何更改。

更新：我做了ng构建来生成一个dist包，并为它配置一个Vhost-Apache，它可以工作！！因此，我认为问题与web包服务器或angular cli有关……但我始终不知道为什么使用ng serve，它不起作用

请看

我将样式内容移动到app.component.css文件中

我评论了

，因为您可能在该代码中遇到了一些问题

如果你这样做，它将工作。

我回来编辑一个我通常从事的项目，我看到一个空白页面（完全是空的html），网络选项卡显示状态为400的请求

我在另一个浏览器上进行了测试，效果很好。因此，我的解决方案是从FireFox中清除

localhost

的所有数据。对我来说似乎是个问题。希望这对任何登陆这里的人都有帮助

打开tsconfig.json文件

确保这些管路与前面提到的相同

"declaration": true,
"noEmitHelpers": false,

可选的

重试

ng构建

而不是

ng服务

它工作正常

不同浏览器中的结果是否相同？请从

中删除代码并将其放在app.component.css文件中，如果您可以pase AppRoutingModulefile@John是的，不同浏览器的结果是相同的。@XuchenZHANG请查看答案您可以尝试使用–disable extensions选项运行chrome吗？应用程序根为空，这意味着angular甚至没有被加载。所有这些工具都在右上角，可能其中之一就是阻止你的应用程序。同时检查网络选项卡。所有依赖项都下载了吗？非常感谢您的回答，我做了与您的代码相同的事情，但仍然不起作用，始终存在相同的问题。您在chrome调试器的网络部分看到了什么？只有状态为200的localhost
"declaration": true,
"noEmitHelpers": false,

"isolatedModules": false