Angular 5 路由器模块没有提供 ChildrenOutletContexts！错误

Question

我正在我的 Angular 5 项目中处理路由部分。

我做了以下事情：

1. 我创建了一个名为的新路由模块routes.module.ts：

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

   import { UdemyComponent } from './udemy/udemy.component';

   const appRoutes: Routes = [ {path: 'udemy', component: UdemyComponent} ];

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

   export class RouteModule {}

2. 在app.module.ts：

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

   import { RouteModule } from './routes.module';

   imports: [
   BrowserModule,
   
   ReactiveFormsModule,
   
   HttpClientModule,
   
   RouterModule
   ],
   

3. 我在 app.component.ts 中添加了以下内容：

最后，我遇到了以下错误：

AppComponent.html:59 错误错误：StaticInjectorError[ChildrenOutletContexts]：
StaticInjectorError[ChildrenOutletContexts]：NullInjectorError：没有提供 ChildrenOutletContexts！在NullInjector.get (core.js:993) at resolveToken (core.js:1281) at tryResolveToken (core.js:1223) at StaticInjector.get (core.js:1094) at resolveToken (core.js:1281) at tryResolveToken (core.js:1223) at StaticInjector.get (core.js:1094) at resolveNgModuleDep (core.js:10878) at NgModuleRef .get (core.js:12110) at resolveDep (core.js:12608)

经过几次搜索，我在 stack 上找到了这个链接。所以我将导入中的app.module.ts导入更改为：

imports: [
BrowserModule,
ReactiveFormsModule,
HttpClientModule,
RouterModule.forRoot(RouteModule)
],

所以我有以下错误：

错误：路由 '' 的配置无效。必须提供以下之一：component、redirectTo、children 或 loadChildren

所以我将我的路由文件更改为：

import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { UdemyComponent } from './udemy/udemy.component';

const appRoutes: Routes = [
    {path: 'udemy', component: UdemyComponent},
    {path: '', redirectTo:'/', component: AppComponent},
    {path: '**', component: AppComponent}
];

但错误并没有消失。

我不知道为什么我的代码格式不正确，所以我希望管理员可以编辑它。

Answer 1

routes ts file:
import { RouterModule, Routes } from '@angular/router';
import { UdemyComponent } from './udemy/udemy.component';

//you need to export the route to known to app module

export const appRoutes: Routes = [
{path: 'udemy', component: UdemyComponent}
];

In app module ts file

import { RouterModule } from '@angular/router';
import { appRoutes} from './app.routes';

imports: [
  BrowserModule,
  ReactiveFormsModule,
  HttpClientModule,
  RouterModule.forRoot(appRoutes)
 ],