2017-02-09 11 views
-2

Folks,Получить ошибку шаблона синтаксического анализа при выполнении тестов для Angular2

Я имею проблему запуска моих модульных тестов для Angular2 (я использую Глоток задачу для этого), но я получаю следующее сообщение об ошибке при попытке :

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>"): [email protected]:13 

Когда я удалить ссылки на routerLink из шаблона HTML все работает отлично. Ниже приводится определение моего файла 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, но получил другую ошибку в том, что не смог найти шаблон - что имеет смысл хотя бы.

ответ

0

Вы не включая 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: '/' } 
    ] 
}) 
+0

Я обновил свой вопрос с самим тестом. Я абсолютно ** не ** добавляю его к импорту самого теста. Я был слишком доволен, думая, что это проблема шаблона. Тьфу. – Ruaghain

+0

Да, определенно столкнулся с этим, когда я впервые начал получать модульные тесты с помощью Angular. Не забудьте указать как импорт, так и поставщика, как я показал здесь. Пожалуйста, не стесняйтесь повышать и принимать, если это исправляет вашу проблему. –

+0

Я попытался использовать «RouterModule», но он исключил «Bootstrap как минимум один компонент перед инъекцией Router», заменил «RouterModule» на «RouterTestingModule», и все работало как очарование. Спасибо за хедз-ап по импорту @ jesse-carter, он поставил меня в правильном направлении - я буду отмечать это как решение. – Ruaghain

0

У вас есть ваше объявление/предоставление маршрутизации, настроенное в ваших тестах? Без них анализатор не сможет понять директиву.