Question

我要问一个我已经看过很多次的问题了，我进行了很多搜索，似乎每个人都有相同的问题，但是没有人能解决相同的问题。

我正在使用Angular做一个世界，而我在布线方面。我已经按照框架文档的说明生成了文件，但是当我开始在导航器中打开应用程序时，它会跳转到以下错误：

 Error: StaticInjectorError(AppModule)[RouterOutlet -> ChildrenOutletContexts]: 
 StaticInjectorError(Platform: core)[RouterOutlet -> ChildrenOutletContexts]: 
 NullInjectorError: No provider for ChildrenOutletContexts!

自从开始以来我就一直关注本教程，我一直在寻找解决方案，但一无所获。要查看是否有人可以帮助我，我向您展示我的代码，就像现在一样：

这是app-routing.module.ts文件：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HelloWorldComponent } from './hello-world/hello- 
world.component';

const routes: Routes = [
  {
    path: '',
    component: HelloWorldComponent,
  },
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  declarations: []
})
export class AppRoutingModule { }

这是app.modules文件：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { MatButtonModule, MatDialogModule, MatTableModule,MatFormFieldModule, MatInputModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { UserCardComponent, DialogExampleComponent} from './usercard/user-card.component';
import { BrowserAnimationsModule } from '@angular/platformbrowser/animations';
import { HelloWorldComponent } from './hello-world/helloworld.component';


@NgModule({
  declarations: [
  AppComponent,
  UserCardComponent,
  DialogExampleComponent,
  HelloWorldComponent
],
entryComponents:[DialogExampleComponent],
imports: [
BrowserModule,
MatTableModule,
MatButtonModule,
MatDialogModule,
BrowserAnimationsModule,
MatFormFieldModule,
MatInputModule,
FormsModule,
RouterModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

我认为没有必要，但这是app.component.html文件：

<router-outlet></router-outlet>

有人可以看到问题吗？也许我是盲人...

Answer 1

由于您已经在AppRoutingModule中设置了路由，并且还导出了RouterModule和AppRoutingModule，因此应该将其添加到imports中AppModule的数组。

更改此：

imports: [
  ...
  RouterModule,
],

对此：

imports: [
  ...
  AppRoutingModule,
],

这是您推荐的Working Sample StackBlitz。

Angular中的布线问题

1 个答案: