運行時未加載angular 2 app-root

Question

我按照這里的說明進行操作： 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 控制台中沒有看到錯誤。

索引.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>

主文件

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 { }

應用程序組件.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 的新手，我不確定我現在可以做些什么來解決這個問題。

Answer 1

關於您的評論，您的系統上似乎有一些與 Angular 沖突的本地主機配置，因此您必須定義另一個有效主機來運行 Angular 的開發服務器。

配置ng s一些有用參數（來自官方角度指南）：

--host=host ：要監聽的主機（默認： localhost ）

--open=true|false : 在默認瀏覽器中打開 url (默認: false )

--port : 監聽端口 (默認: 4200 )

Answer 2

我發現這個鏈接非常有用：

通過將 HttpClientModule 添加到 src/app/app.module.ts 中的導入，我的問題解決了

https://malcoded.com/posts/why-angular-not-works/

運行時未加載angular 2 app-root

問題描述

2 個解決方案

解決方案1
1 已采納 2019-08-13 08:39:56

解決方案2
-1 2020-07-29 09:51:44

運行時未加載angular 2 app-root

問題描述

2 個解決方案

解決方案1 1 已采納 2019-08-13 08:39:56

解決方案2 -1 2020-07-29 09:51:44

解決方案1
1 已采納 2019-08-13 08:39:56

解決方案2
-1 2020-07-29 09:51:44