angular 2 app-root在运行时未加载

Posted 2023-03-07

技术标签:

【中文标题】angular 2 app-root在运行时未加载【英文标题】：angular 2 app-root not loading when running 【发布时间】：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 演示项目并将所有代码放入其中进行测试。如果它有效，应该有一些来自你的环境的东西。请分享演示链接 【参考方案1】：

关于您的评论，您的系统上似乎有一些与 Angular 冲突的 localhost 配置，因此您必须定义另一个有效的主机来运行 Angular 的开发服务器。

配置ng s的一些有用参数（来自Official Angular Guide）：