Почему * ngFor, ошибка привязки routerLink при создании другого модуля в проекте angular? - PullRequest
Новая
       87

Почему * ngFor, ошибка привязки routerLink при создании другого модуля в проекте angular?

0 голосов
/ 27 мая 2020

Я создал модуль с именем home в папке приложения. Но я получаю сообщение об ошибке, когда пытаюсь привязать * ngFor, routerLink к тегу html, а также показываю ошибку. Вот структура проекта, модуль приложения, модуль маршрутизации приложений, домашний модуль и модуль домашней маршрутизации.

Не удалось скомпилировать.

src / app / modules / home / inspiration / inspiration.component . html: 15: 10 - ошибка NG8002: невозможно выполнить привязку к 'routerLink', поскольку это неизвестное свойство 'a'.

15 подробнее ~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~

src / app / modules / home / inspiration / inspiration.component.ts: 5: 16 5 templateUrl: '. /inspiration.component.html ', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Ошибка в шаблоне компонента InspirationComponent. src / app / modules / home / inspiration / inspiration.component. html: 17: 5 - ошибка NG8001: «router-outlet» не является известным элементом: 1. Если «router-outlet» является компонентом Angular , затем убедитесь, что он является частью этого модуля. 2. Если «router-outlet» является веб-компонентом, добавьте «CUSTOM_ELEMENTS_SCHEMA» в «@ NgModule.schemas» этого компонента, чтобы подавить это сообщение.

17 ~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~

src / app / modules / home / inspiration / inspiration.component.ts: 5: 16 5 templateUrl: ' ./inspiration.component.html ', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Ошибка в шаблоне компонента InspirationComponent. `структура папок проекта 

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

import { HomeComponent } from './home.component';
import { InspirationComponent } from './inspiration/inspiration.component';
import { PrabhupadaComponent } from './inspiration/prabhupada/prabhupada.component';
import { BrsmComponent } from './inspiration/brsm/brsm.component';
import { AboutUsComponent } from './about-us/about-us.component';

const routes: Routes = [
  { path: 'inspiration', component: InspirationComponent, pathMatch: 'full' },
  { path: 'prabhupada', component: PrabhupadaComponent, pathMatch: 'full' },
  { path: 'brsm', component: BrsmComponent, pathMatch: 'full' },
  { path: 'aboutUs', component: AboutUsComponent, pathMatch: 'full' },
  { path: '', component: HomeComponent, pathMatch: 'full' },

];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomeRoutingModule { }

import { HomeModule } from './modules/home/home.module';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    HomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HomeRoutingModule } from './home-routing.module';
import { CommonModule } from '@angular/common';
import { CarouselModule } from 'ngx-bootstrap/carousel';

import { HomeComponent } from './home.component';


@NgModule({
  declarations: [HomeComponent],
  imports: [
    BrowserModule,
    CommonModule,
    HomeRoutingModule,
    CarouselModule.forRoot()
  ]
})
export class HomeModule { }

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

import { HomeModule } from './modules/home/home.module';

const routes: Routes = [];

@NgModule({
  imports: [
    RouterModule.forRoot(routes),
    HomeModule],
  exports: [RouterModule]
})
export class AppRoutingModule { }
...