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

Question

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

我做了以下事情：

我创建了一个名为 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 {}
中app.module.ts:

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

import { RouteModule } from './routes.module';
```
imports: [
BrowserModule,

ReactiveFormsModule,

HttpClientModule,

RouterModule
],
```
我在 app.component.ts 中添加了以下内容：

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

AppComponent.html:59 ERROR Error: StaticInjectorError[ChildrenOutletContexts]:
StaticInjectorError[ChildrenOutletContexts]: NullInjectorError: No provider for ChildrenOutletContexts! at 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)

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

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

所以我得到了以下错误：

Error: Invalid configuration of route ''. One of the following must be provided: component, redirectTo, children or 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

路由''同时具有redirectTo和component属性，但必须只有其中之一。根据需要删除 component 或 redirectTo 属性。

{path: '', redirectTo:'/'},

或

{path: '', component: AppComponent},

Answer 2

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)
 ],

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

Angular 5 Router Module No provider for ChildrenOutletContexts! error

router

routes

angular

angular5

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

Angular 5 Router Module No provider for ChildrenOutletContexts! error

router

routes

angular

angular5

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