【发布时间】：2019-12-08 08:15:59
【问题描述】：
我按照这里的说明进行操作：https://angular.io/cli
我在没有路由选项的情况下执行了以下几行：
ng new test-test-projectthree
ng serve
我想从 app.component.html 中查看所有内容？但是，我只看到一个空白页面。索引页面已显示，但未加载根组件（我没有从根组件 html 文件中看到任何内容）。
我在 Red Hat linux 7 上运行一切，并使用 mobaXterm 连接到它。
我正在 firefox ESR 38.6.1 上对其进行测试，并且在 firefox 控制台中没有看到任何错误。
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TestProjectthree</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>
main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'test-projectthree';
}
app.module.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 { }
app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to dz!
</h1>
</div>
app.component.spec.ts
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
}).compileComponents();
}));
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
});
it(`should have as title 'test-projectthree'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('test-projectthree');
});
it('should render title in a h1 tag', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('Welcome to test-projectthree!');
});
});
控制台输出：
ng serve
10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html chunk {main} main.js, main.js.map (main) 7.28 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 251 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.09 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.3 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.81 MB [initial] [rendered]
Date: 2019-07-30T21:01:50.970Z - Hash: b54b63db5003df7b9b19 - Time: 15924ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Compiled successfully.
SystemMessageCache: initATTENTION: default value of option force_s3tc_enable overridden by environment.
1565203202194 addons.repository WARN Search failed when repopulating cache
1565203202731 addons.update-checker WARN Update manifest was not valid XML
关于我做错了什么有什么建议吗？ 当我使用 ng serve 命令运行 Angular 时，我没有看到任何错误（“重新填充缓存时搜索失败”除外，但我认为这不是问题），并且在 firefox 控制台中没有看到任何错误.由于我也是 angular 2 的新手，所以我不确定我现在能做些什么来解决这个问题。
【问题讨论】：
-
没有错误.....打开 localhost:4200 你应该看到输出......你看到了什么？
-
如果我向 index.html 添加一些文本，它确实会显示出来，所以我认为 localhost:4200 正在工作。但是，app.component.html 中没有显示任何内容。
-
你有自定义的css吗？浏览器控制台错误日志中有什么内容？
-
您使用的是什么浏览器和浏览器版本？
-
您可以在其他浏览器中尝试吗？制作一个 stackblitz 演示项目并将所有代码放入其中进行测试。如果它有效，应该有一些来自你的环境的东西。请分享演示链接