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错误错误：   StaticInjectorError [ChildrenOutletContexts]：
  StaticInjectorError [ChildrenOutletContexts]：       NullInjectorError：没有ChildrenOutletContexts的提供者！       at NullInjector.get（core.js：993）       at resolveToken（core.js：1281）       在tryResolveToken（core.js：1223）       在StaticInjector.get（core.js：1094）       at resolveToken（core.js：1281）       在tryResolveToken（core.js：1223）       在StaticInjector.get（core.js：1094）       at resolveNgModuleDep（core.js：10878）       在NgModuleRef .get（core.js：12110）       at resolveDep（core.js：12608）

经过几次搜索，我发现了link on stack。所以我将app.module.ts导入中的导入更改为：

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

所以我收到了以下错误：

错误：路线配置无效＆＃39;＆＃39;。必须满足以下条件之一提供：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)
 ],

Answer 2

路由''包含redirectTo和component属性，但必须只包含其中一个属性。根据需要删除component或redirectTo属性。

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

或

{path: '', component: AppComponent},

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

2 个答案: