Javascript ''；路由器出口'；不是已知元素-角度_Javascript_Angular_Typescript_Ecmascript 6_Single Page Application

Javascript ''；路由器出口'；不是已知元素-角度

javascript angular typescript ecmascript-6

Javascript ''；路由器出口'；不是已知元素-角度,javascript,angular,typescript,ecmascript-6,single-page-application,Javascript,Angular,Typescript,Ecmascript 6,Single Page Application,我已经解决这个问题好几个小时了。我已经试过了所有的方法，但都不能成功下一个错误不断出现： 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 'ro

我已经解决这个问题好几个小时了。我已经试过了所有的方法，但都不能成功

下一个错误不断出现：

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.

以下是我的文件，我已将其简化为路由的基本需求：

应用程序路由.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 { }

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 { }

应用程序模块.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 { }

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>

<!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>


{{title}}

index.html

<router-outlet></router-outlet>

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

<!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>


工业家具
加载。。。

有人能帮我吗？可能是代码之外的东西吗？（或者是我在这里监督什么？

在你的app.module.ts中

@NgModule({
...,
进口：[
批准模块
],
导出：[AppRoutingModule]，//删除此行
...
})

你不需要在这里导出

在你的app.module.ts中删除

exports: [AppRoutingModule],

同时关闭服务器，然后再次运行

ng serve

我看到你用的另一张纸条

HttpModule

反而

HttpClientModule

angular的新版本已经使用了

HttpClientModule

，因此，如果可以，请尝试使用最新版本

我没有深入研究您的代码，但在重命名软件包+组件名称后，我遇到了相同的错误。我还检查了所有代码，但什么也没找到，我只是尝试停止CLI并重新启动。一切都很好，开始工作。也许这会有帮助。

也许你可以尝试创建一个新的角度项目，然后尝试那里的

路由器插座

，看看它是否有效。如果是这样的话，那么您的代码/项目就有问题了，然后您需要比较正在工作的项目和没有工作的项目，看看它们的区别在哪里。如果它不起作用，那就是安装或IDE出了问题。我也试过这样做，但结果是一样的。谢谢你的回复。