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

Я реализую базовую маршрутизацию в своем приложении angular 4 и получаю следующую ошибку при загрузке приложения в браузере. Я определил маршруты в approuting.module, а также сослался на модуль маршрутизатора в Ngmodule, а также в approuting.module. Не уверен, в чем проблема

Can't bind to 'routerLink' since it isn't a known property of 'a'.

Can't bind to 'routerLink' since it isn't a known property of 'a'. ("ew" [hidden]="!dataItem.isVisibleView">
                                                        <a [ERROR ->][routerLink]="['/view', dataItem.movieId, 'responses']" routerLinkActive="active"><i class="fa fa-fil"): ng:///MovieModule/MovieComponent.html@85:59
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("it" [hidden]="!dataItem.isVisibleEdit">
                                                        <a [ERROR ->][routerLink]="['edit', dataItem.movieId]" routerLinkActive="active"><i class="fa fa-pencil" aria-hidd"): ng:///MovieModule/MovieComponent.html@92:59

Ниже приведен исходный код моего приложения

фрагмент сетки кендо в movie.component.html

  </kendo-grid-column>
                                             <kendo-grid-column title="View" headerClass="kendoGridHeader" class="kendoGridControlCell">
                                                <ng-template kendoGridCellTemplate let-dataItem>
                                                    <span data-title="View" [hidden]="!dataItem.isVisibleView">
                                                        <a [routerLink]="['/view', dataItem.movieId, 'responses']" routerLinkActive="active"><i class="fa fa-file-text" aria-hidden="true"></i></a>
                                                    </span>
                                                </ng-template>
                                            </kendo-grid-column>
                                            <kendo-grid-column title="Edit" headerClass="kendoGridHeader" class="kendoGridControlCell">
                                                <ng-template kendoGridCellTemplate let-dataItem>
                                                    <span data-title="Edit" [hidden]="!dataItem.isVisibleEdit">
                                                        <a [routerLink]="['edit', dataItem.movieId]" routerLinkActive="active"><i class="fa fa-pencil" aria-hidden="true"></i></a>
                                                    </span>
                                                </ng-template>
                                            </kendo-grid-column>
                                            <kendo-grid-column title="Delete" headerClass="kendoGridHeader" class="kendoGridControlCell">
                                                <ng-template kendoGridCellTemplate let-dataItem>
                                                    <span data-title="Delete" [hidden]="!dataItem.isVisibleDelete">
                                                        <a data-toggle="dropdown" class="dropdown-toggle" href="">
                                                            <i class="fa fa-times" aria-hidden="true"></i>
                                                        </a>
                                                        <ul class="dropdown-menu table-popup-delete">
                                                            <li>Are you sure you want to delete this?</li>
                                                            <br>
                                                            <li><button class="button" (click)="deleteWorkflow(dataItem.movieId)" style="width:100%;">Delete</button></li>
                                                            <br>
                                                            <li><button class="button" style="width:100%;">Cancel</button></li>
                                                        </ul>
                                                    </span>
                                                </ng-template>
                                            </kendo-grid-column>

aprouting.module.ts

import {NgModule} from '@angular/core';
import {Routes,RouterModule} from '@angular/router';
import {MovieComponent} from './movie/movie.component';
import {HomeComponent}  from '../app/home/home.component';
import {NotFoundComponent} from './not-found/not-found.component';
import {NewmovieComponent} from './movie/new/newmovie.component';
import {EditmovieComponent} from './movie/edit/editmovie.component';
import {ViewmovieComponent} from './movie/view/viewmovie.component';

export const routes: Routes = [
{path : '', component : HomeComponent},
{path: 'movie', component : MovieComponent},
{path : 'new' , component : NewmovieComponent },
{path : 'edit' , component : EditmovieComponent },
{path : 'view' , component : ViewmovieComponent },
{path: '**',component : NotFoundComponent}

];

@NgModule({
     imports: [RouterModule.forRoot(routes,{useHash: true})],
     exports: [RouterModule]

})

export class AppRoutingModule{}

app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { TopbarComponent } from './topbar/topbar.component';
import { FooterbarComponent } from './footerbar/footerbar.component';
import { MRDBGlobalConstants } from './shared/mrdb.global.constants';
import {AppRoutingModule} from './approuting.module';
import {HomeModule} from './home/home.module';
import {MovieModule} from './movie/movie.module';
import { MRDBCommonService } from './shared/services/mrdb.common.service';
import { NotFoundComponent } from './not-found/not-found.component';
import { SharedModule } from './shared/shared.module';


@NgModule({
  declarations: [
    AppComponent,
    FooterbarComponent,
    TopbarComponent,
    NavbarComponent,
    NotFoundComponent  
  ],
  imports: [
    AppRoutingModule,
    HomeModule,
    MovieModule,
    BrowserModule,
    HttpModule,
    SharedModule

  ],
  providers: [MRDBGlobalConstants,
              MRDBCommonService],
  bootstrap: [AppComponent]
})
export class AppModule { }

person Tom    schedule 07.11.2017    source источник
comment
Попробуйте переместить BrowserModule в начало импорта? Или, по крайней мере, выше AppRoutingModule.   -  person Z. Bagley    schedule 08.11.2017
comment
это не помогло   -  person Tom    schedule 08.11.2017
comment
Ваш код выглядит правильно, убедитесь, что все на самом деле скомпилировано правильно, я бы остановил все ng serve или ng build -w и rd /s /q node_modules (или rm -rf node_modules, если в Linux), а затем npm i и посмотрите   -  person Aviad P.    schedule 08.11.2017
comment
Пробовал именно то, что вы предложили, но все равно дает ту же проблему. Похоже, ссылка не правильно строится   -  person Tom    schedule 08.11.2017
comment
Обратите внимание, что страница загружается, если я прокомментирую только теги привязки.   -  person Tom    schedule 09.11.2017


Ответы (3)


мне удалось исправить проблему. Мне пришлось добавить модуль маршрутизатора к импорту модуля фильма, поскольку ссылки на маршрутизаторы указаны в модуле фильма.

person Tom    schedule 09.11.2017
comment
Пожалуйста, отредактируйте этот ответ. - person Ojonugwa Jude Ochalifu; 11.01.2021

Импорт RouterModule

импортировать { RouterModule } из '@angular/router';

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

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { LayoutComponent } from './layout/layout.component';

@NgModule({
  imports: [
    RouterModule,
    FormsModule,
    ReactiveFormsModule,
  ],
  declarations: [
    LayoutComponent
  ],
  exports: [
    FormsModule,
    ReactiveFormsModule,
  ],
  entryComponents: []
})
export class SharedModule { }
person Sanjay kumar    schedule 01.06.2019
comment
Просто импортируйте похожий на вас RouterModule. :) - person Hieu Tran AGI; 11.07.2019

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

Как все объяснили во всех сообщениях, которые я нашел...

AppRoutingModule:

  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]

Другие модули маршрутизации:

  imports: [RouterModule.forChildren(routes)],
  exports: [RouterModule]

Домашний модуль имеет шаблон с routerLink:

<a [routerLink]="'asdf'">asdf</a>

Ниже показана ситуация, в которой произошла ошибка. Обратите внимание, что приложение лениво загружает другие модули:

const routes: Routes = [
  { path: 'home',
    loadChildren: () => import('./pages/home/home-routing.module')
            .then(m => m.HomeRoutingModule) //**wrong!**
  }
]

Эта ситуация была решена, потому что я импортировал неправильный модуль:

Приложение лениво загружает другие модули:

const routes: Routes = [
  { path: 'home',
    loadChildren: () => import('./pages/home/home.module')
            .then(m => m.HomeModule)
  }
]
person heringer    schedule 18.03.2021