我在做 Angular 开发时，遇到如下错误：

core.js:6242 ERROR NullInjectorError: R3InjectorError(AppModule)[ChildrenOutletContexts -> ChildrenOutletContexts -> ChildrenOutletContexts]:
NullInjectorError: No provider for ChildrenOutletContexts!
at NullInjector.get (core.js:1086)
at R3Injector.get (core.js:16969)
at R3Injector.get (core.js:16969)
at R3Injector.get (core.js:16969)
at NgModuleRef$1.get (core.js:36344)
at Object.get (core.js:33987)
at getOrCreateInjectable (core.js:5849)
at Module.ɵɵdirectiveInject (core.js:21118)
at NodeInjectorFactory.RouterOutlet_Factory [as factory] (router.js:9156)
at getNodeInjectable (core.js:5994)

从这个StackOverflow讨论帖子里找到了原因：

该错误是因为 RouterModule.forChild() 生成的模块包含必要的指令和路由，但不包含路由服务 - routing provider. 这就是 RouterModule.forRoot 的用途：它生成一个包含必要指令、路由和路由服务的模块。

解决办法

在 app.module.ts 里调用 RouterModule.forRoot([])

在 feature module 里调用 RouterModule.forChild 传入实际的路由数组即可：

更多Jerry的原创文章，尽在：“汪子熙”:

RouterModule.forRoot 和 RouterModule.forChild 的区别相关推荐

RouterModule.forRoot() called twice
错误消息: RouterModule.forRoot() called twice. Lazy loaded modules should use RouterModule.forChild() in ...
Angular 运行报错 RouterModule.forRoot() called twice.
报错原因是 forRoot() 调用了两次检查这个属性就好了是 app-routing.module 里面调用了然后其他模块也调用了找到其他 forRoot() 改为 forChild() 就 ...
angular框架简介基础与使用（全文2w8字）前端框架angular
写在前面本文的所有内容,可以在我的博客上看到,下面是地址.建议去博客看,因为csdn的这篇图片我没上传. 可以转载,但请注明出处我的博客-点击跳转 https://numbrun.gitee.io ...
Angular4 去掉url中的#，并解决刷新时的404问题
为什么要去除? Angular官方指出:如果没有足够使用hash风格(#)的理由,还是尽量使用HTML5模式的路由风格: 如果配置了hash风格,在微信支付或是Angular的深路径依然会出404的问 ...
为什么 SAP 电商云 Spartacus UI RouterModule.forChild 传入的 path 为 null
RouterModule.forChild 传入的 path 为 null: 注意,RouterModule.forRoot 只能调用一次.RouterModule 有一个 forChild 方法,也 ...
flask框架视图和路由_角度视图，路由和NgModule的解释
flask框架视图和路由 Angular vs AngularJS (Angular vs AngularJS) AngularJS (versions 1.x) is a JavaScript-ba ...
Angular NgModule 作用域相关问题
NgModule 是你使用 Angular 编写应用程序时遇到的第一个基本结构,但由于涉及不同的作用域范围,它也是最微妙和最复杂的.如果你想详细了解 NgModule 的相关知识,可以直接参考 Ang ...
Angular Router的组件路由介绍
这是SitePoint Angular 2+教程的第4部分,有关如何使用Angular CLI创建CRUD应用程序. 在本文中,我们将介绍Angular Router,并了解当浏览器URL更改时它如何 ...
angular复用路由组件_Angular Router的组件路由简介
angular复用路由组件这是SitePoint Angular 2+教程的第4部分,有关如何使用Angular CLI创建CRUD应用程序. 在本文中,我们将介绍Angular Router,并了 ...

RouterModule.forRoot 和 RouterModule.forChild 的区别

解决办法

RouterModule.forRoot 和 RouterModule.forChild 的区别相关推荐

最新文章

热门文章