«Роутер-аутлет» не является известным элементом - Angular - PullRequest
Новая
       12

«Роутер-аутлет» не является известным элементом - Angular

2 голосов
/ 07 февраля 2020

Я был в этой проблеме в течение нескольких часов. Я попробовал буквально все, но не могу заставить его работать.

Продолжает появляться следующая ошибка: 

zone.js:522 Unhandled Promise rejection: Template parse errors:
'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.

Вот мои файлы, которые я сократил до Основы c нужны для маршрутизации:

app-routing.module.ts 

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TafelComponent } from '../tafel/tafel.component';
import { MuurtafelComponent } from '../muurtafel/muurtafel.component';

const routes: Routes = [
  { path: 'tafel', component: TafelComponent },
  { path: 'muurtafel', component: MuurtafelComponent }
];

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

app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { TafelComponent } from './tafel/tafel.component';
import { MuurtafelComponent } from './muurtafel/muurtafel.component';
import { AppRoutingModule } from './app-routing/app-routing.module';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    HttpModule
  ],
  exports: [AppRoutingModule],
  declarations: [
    AppComponent,
    TafelComponent,
    MuurtafelComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component. html

<router-outlet></router-outlet>

<h1>
  {{title}}
</h1>

index. html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Industial Furniture</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico"> 
  <base href="/">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

Может кто-нибудь помочь мне с этим? Может ли это быть что-нибудь за пределами кода? (Или я здесь что-то наблюдаю?)

Ответы [ 2 ]

1 голос
/ 07 февраля 2020

В вашем app.module.ts 

@NgModule({
...,
   imports: [
     AppRoutingModule
    ],

    exports: [AppRoutingModule], // Remove this line
...
})

Вам не нужно экспортировать здесь!

0 голосов
/ 07 февраля 2020

В вашем app.module.ts удалите 

exports: [AppRoutingModule],

Также убейте сервер, затем снова запустите ng serve

Еще одно замечание, которое вы видели, вы используете 

HttpModule

вместо 

HttpClientModule

Новая версия angular уже использует HttpClientModule, поэтому попробуйте использовать последнюю версию, если можете

...