Модуль угловой маршрутизации

Question

У меня следующий код в заголовке компонента html

<md-toolbar color="primary">
    <span> <img   src="/assets/images/logo.png" height=30 width=41></span>
    <a md-button routerLink="/home"><span class="fa fa-home fa-lg"></span> 
    Home</a>
    <a md-button><span class="fa fa-info fa-lg"></span> About</a>
    <a md-button routerLink="/menu"><span class="fa fa-list fa-lg"></span> 
    Menu</a>
    <a md-button><span class="fa fa-address-card fa-lg"></span> Contact</a>

</md-toolbar>

и

Модуль маршрутизации как

export const routes: Routes = [
  { path: 'home',  component: HomeComponent },
  { path: 'menu',  component: MenuComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

когда я нажимаю значок меню в заголовке; следующая ошибка появляется на консоли. Я отчасти невежественен.

_this._renderer.removeClass is not a function
    at eval (common.js:2241)
    at Array.forEach (<anonymous>)
    at ClassDirective.NgClass._toggleClass (common.js:2236)
    at eval (common.js:2215)
    at Array.forEach (<anonymous>)
    at ClassDirective.NgClass._removeClasses (common.js:2215)
    at ClassDirective.set [as klass] (common.js:2079)
    at ClassDirective.set [as classBase] (class.js:126)
    at updateProp (core.js:12661)
    at c

Спасибо

Answer 1

HeaderComponent.html:3 ERROR TypeError: _this._renderer.removeClass is not a function
    at eval (common.js:2241)
    at Array.forEach (<anonymous>)
    at ClassDirective.NgClass._toggleClass (common.js:2236)
    at eval (common.js:2215)
    at Array.forEach (<anonymous>)
    at ClassDirective.NgClass._removeClasses (common.js:2215)
    at ClassDirective.set [as klass] (common.js:2079)
    at ClassDirective.set [as classBase] (class.js:126)
    at updateProp (core.js:12661)
    at checkAndUpdateDirectiveInline (core.js:12368)
View_HeaderComponent_0 @ HeaderComponent.html:3
proxyClass @ compiler.js:14659
DebugContext_.logError @ core.js:15038
ErrorHandler.handleError @ core.js:1510
(anonymous) @ core.js:5925
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
NgZone.runOutsideAngular @ core.js:4708
ApplicationRef.tick @ core.js:5925
(anonymous) @ core.js:5751
ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.js:4760
ZoneDelegate.invoke @ zone.js:387
Zone.run @ zone.js:138
NgZone.run @ core.js:4577
next @ core.js:5751
schedulerFn @ core.js:4342
SafeSubscriber.__tryOrUnsub @ Subscriber.js:243
SafeSubscriber.next @ Subscriber.js:190
Subscriber._next @ Subscriber.js:131
Subscriber.next @ Subscriber.js:95
Subject.next @ Subject.js:56
EventEmitter.emit @ core.js:4322
checkStable @ core.js:4725
onHasTask @ core.js:4773
ZoneDelegate.hasTask @ zone.js:441
ZoneDelegate._updateTaskCount @ zone.js:461
Zone._updateTaskCount @ zone.js:285
Zone.runTask @ zone.js:205
drainMicroTaskQueue @ zone.js:595
ZoneTask.invokeTask @ zone.js:500
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
HeaderComponent.html:3 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 11, nodeDef: {…}, elDef: {…}, elView: {…}}

Answer 2

Это сообщаемая проблема, связанная с Flex-Layout, мешающим модулю маршрутизатора. https://github.com/angular/angular/issues/18922

Попробуйте убедиться, что все ваши зависимости обновлены. Если это не сработает, возможно, вам придется перейти на более раннюю версию angular.

Answer 3

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

Убедитесь, что вы вызываете RouterModule.forRoot() и передаете свой routes объект в файл app.module.ts. В противном случае вы можете получить много странных ошибок, которые будет действительно трудно отладить.

См. Пример из Angular Docs :

@NgModule({
  imports: [
  RouterModule.forRoot(
    appRoutes,
    { enableTracing: true } // <-- debugging purposes only
  )
  // other imports here
],