Angular NullInjectorError:没有ChildrenOutletContext的提供程序
我还在学习。我试图在stackblitz上创建一个示例来问另一个问题,但遇到了一个路由问题 我正在尝试设置路由。我已将以下内容添加到app.module.ts:Angular NullInjectorError:没有ChildrenOutletContext的提供程序,angular,typescript,routing,stackblitz,Angular,Typescript,Routing,Stackblitz,我还在学习。我试图在stackblitz上创建一个示例来问另一个问题,但遇到了一个路由问题 我正在尝试设置路由。我已将以下内容添加到app.module.ts: imports: [ BrowserModule, FormsModule, RouterModule, import { NgModule } from '@angular/core'; import { RouterModule, Routes
imports: [ BrowserModule,
FormsModule,
RouterModule,
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NavComponent } from './components/NavComponent';
import { SearchComponent } from './components/SearchComponent';
import { ViewComponent } from './components/ViewComponent';
const routes: Routes = [
{ path: '', redirectTo: '/nav', pathMatch: 'full' },
{ path: 'nav', component: NavComponent },
{ path: 'search', component: SearchComponent },
{ path: 'view', component: ViewComponent }
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
然后我创建了app-routing.module.ts:
imports: [ BrowserModule,
FormsModule,
RouterModule,
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NavComponent } from './components/NavComponent';
import { SearchComponent } from './components/SearchComponent';
import { ViewComponent } from './components/ViewComponent';
const routes: Routes = [
{ path: '', redirectTo: '/nav', pathMatch: 'full' },
{ path: 'nav', component: NavComponent },
{ path: 'search', component: SearchComponent },
{ path: 'view', component: ViewComponent }
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
然后将这些导入添加到app.module.ts:
imports: [ BrowserModule,
FormsModule,
RouterModule,
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NavComponent } from './components/NavComponent';
import { SearchComponent } from './components/SearchComponent';
import { ViewComponent } from './components/ViewComponent';
const routes: Routes = [
{ path: '', redirectTo: '/nav', pathMatch: 'full' },
{ path: 'nav', component: NavComponent },
{ path: 'search', component: SearchComponent },
{ path: 'view', component: ViewComponent }
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
我以为这就是我所需要做的,但当我加载我的应用程序时,我得到:
ERROR
Error: StaticInjectorError(AppModule)[RouterOutlet -> ChildrenOutletContexts]:
StaticInjectorError(Platform: core)[RouterOutlet -> ChildrenOutletContexts]:
NullInjectorError: No provider for ChildrenOutletContexts!
我在谷歌上搜索了这个错误,发现了:但我觉得这些都没有帮助
这是我的stackblitz:
不知道下一步要去哪里。您只需要在应用程序模块导入阵列中将
路由模块
替换为批准模块
。否则,应用程序将不知道您配置的路由。如果这对您来说是新的,很容易错过。在您的应用程序模块导入阵列中将RouterModule
替换为AppRoutingModule
。@R.Richards这似乎已经做到了。你想创建一个答案,这样我就可以给你评分了吗?