Question

无论出于何种原因，当我访问开发服务器时，我的Angular应用程序根本无法渲染：http://localhost:4200/

本教程和我的代码之间唯一的区别是主题。

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Angular: Bears From Around The Multiverse</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>
<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script></body>

</html>

我一定想念一下，因为我已经阅读了四遍代码回顾，而且似乎还没发现差异。

运行内置的单元测试，我看到会发生此错误。

Failed: Template parse errors:
'router-outlet' is not a known element:

根据错误消息，可能还会发生其他不相关的错误：

DashboardComponent should create
Failed: Template parse errors:
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("<h3>Top Bears</h3>
<div class="grid grid-pad">
  <a *ngFor="let bear of bears" class="col-1-4" [ERROR ->]routerLink="/detail/{{bear.id}}">
    <div class="module bear">
      <h4>{{bear.name}}</h4>
"): ng:///DynamicTestModule/DashboardComponent.html@2:48

Failed: Template parse errors:
Parser Error: Unexpected token ':' at column 5 in [/detail/{{bear:id}}] in ng:///DynamicTestModule/BearsComponent.html@4:7 ("
<ul class="bears">
  <li *ngFor="let bear of bears">
    <a [ERROR ->]routerLink="/detail/{{bear:id}}">
      <span class="badge">{{bear.id}}</span> {{bear.name}}
    </a>"): ng:///DynamicTestModule/BearsComponent.html@4:7
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("
<ul class="bears">
  <li *ngFor="let bear of bears">
    <a [ERROR ->]routerLink="/detail/{{bear:id}}">
      <span class="badge">{{bear.id}}</span> {{bear.name}}
    </a>"): ng:///DynamicTestModule/BearsComponent.html@4:7
Parser Error: Unexpected token ':' at column 5 in [/detail/{{bear:id}}] in ng:///DynamicTestModule/BearsComponent.html@4:7 (" <li *ngFor="let bear of bears">
    <a routerLink="/detail/{{bear:id}}">
      <span class="badge">[ERROR ->]{{bear.id}}</span> {{bear.name}}
    </a>
  </li>
"): ng:///DynamicTestModule/BearsComponent.html@5:26
Parser Error: Unexpected token ':' at column 5 in [/detail/{{bear:id}}] in ng:///DynamicTestModule/BearsComponent.html@4:7 ("ear of bears">
    <a routerLink="/detail/{{bear:id}}">
      <span class="badge">{{bear.id}}</span>[ERROR ->] {{bear.name}}
    </a>
  </li>
"): ng:///DynamicTestModule/BearsComponent.html@5:44

所有这些的预期结果应该与此处提供的教程相近：https://angular.io/tutorial

目前我所看到的只是我上面提到的页面。

编辑：下面指出，我可能应该考虑在开发控制台中查看。这导致我在引用https://github.com/michaelagard/Angular-Bears/blob/master/src/app/bears/bears.component.html

中的bear.id时遇到错字

将bear：id更改为bear.id允许应用完全渲染。始终检查该控制台。

Answer 1

在运行单元测试时，请记住，角度针对每个单元测试都使用一个模块。这意味着要考虑您的app.component.spec：

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

您有一个仅将AppComponent作为声明的模块，但是对路由器等一无所知。它应该像这样：

import { RouterTestingModule } from '@angular/router/testing';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({ 
      imports: [RouterTestingModule],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

这就是为什么单元测试因routerLink is not a known element而失败的原因，但是当在本地主机上运行时，这不会影响您的应用。

编辑：

我查看了您的回购，在app.module中，您不必导入RouterModule，因为它已经通过app-routing.module导入了。另外，尝试将CommonModule添加到您的导入中，我知道它也不在角度教程中，但是您需要该模块使用内置指令和管道，例如* ngFor等。

您是否已查看Chrome中的调试控制台？您可能正在寻找错误（按ctrl + shift + c并切换到顶部的控制台）。

Answer 2

将 RouterModule 导入您的 app.module.ts

import { RouterModule } from '@angular/router';

将RouterModule添加到您的导入[]

像这样：

 imports: [RouterModule]

Answer 3

我做了一个简单的替换：

在您的bears.component.html中，我只是将路由器链接替换为：

<a [routerLink]="['/bear', bear.id]">，并且有效

Answer 4

确保您的 app.component.html 是否具有<router-outlet></router-outlet>

为什么我的Angular“ Tour of Heroes教程”没有在<app-root>上呈现任何内容？

4 个答案: