运行测试 Angular2 时出现模板解析错误

Question

各位，

我在运行对 Angular2 进行单元测试时遇到问题（为此我使用 gulp 任务），但是当我尝试时出现以下错误：

Failed: Template parse errors:
        Can't bind to 'routerLink' since it isn't a known property of 'a'. ("     <ul class="nav navbar-nav navbar-right">
                <li routerLinkActive="active">
                  <a [ERROR ->][routerLink]="['signup']">Sign Up</a>
                  <a [routerLink]="['login']">Login</a>
                </li>"): HeaderComponent@15:13

当我从 HTML 模板中删除对 routerLink 的引用时，一切正常。以下是我的 webpack.test.js 文件的定义：

var webpack = require('webpack');
var helpers = require('./helpers');

module.exports = {
  devtool: 'inline-source-map',

  resolve: {
    extensions: ['.ts', '.js']
  },

  module: {
    loaders: [
      {
        test: /\.ts$/,
        loaders:
          [
            'awesome-typescript-loader',
            'angular2-template-loader'
          ]
      },
      {
        test: /\.html$/,
        loader: 'html-loader'

      },
      {
        test: /\.scss$/,
        loaders: [ 'raw-loader', 'sass-loader' ]
      },
    ]
  },
  plugins: [
    new webpack.ContextReplacementPlugin(
      // The (\|\/) piece accounts for path separators in *nix and Windows
      /angular(\|\/)core(\|\/)(esm(\|\/)src|src)(\|\/)linker/,
      helpers.root('./client/src'), // location of your src
      {} // a map of your routes
    )
  ]
};

这是我正在尝试的测试运行:

describe("HeaderComponent", () => {
  let fixture: ComponentFixture<HeaderComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [HeaderComponent],
    });
    fixture = TestBed.createComponent(HeaderComponent);
    fixture.detectChanges();
  }));

  it('should display a form to register', () => {
    let navbar = fixture.debugElement.query(By.css('navbar'));
    console.log(navbar);
    expect(navbar).toBeDefined();
  });
});

有人知道我遗漏了什么吗？我的正常 webpack.dev.js 没有任何问题。这是我的测试设置所特有的。我不知道我做错了什么。我也尝试删除 angular2-template-loader，但遇到了一个关于无法找到模板的不同错误 - 这至少是有道理的。

Answer 1

您是否在测试中设置了 declaring/provisioning 路由？没有这些，解析器将无法理解该指令。

Answer 2

您没有在测试设置中包含 RouterModule 和必要的提供程序：

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

TestBed.configureTestingModule({
  imports: [
    RouterModule.forRoot([], {useHash: false})
  ],
  declarations: [ ComponentUnderTest ],
  providers: [
    { provide: APP_BASE_HREF, useValue: '/' }
  ]
})

运行测试 Angular2 时出现模板解析错误

Get a template parse error when running tests for Angular2

gulp

webpack-2

angular

运行 测试 Angular2 时出现模板解析错误

Get a template parse error when running tests for Angular2

gulp

webpack-2

angular

运行测试 Angular2 时出现模板解析错误