【问题标题】:Angular 5 child module not seeing providersAngular 5子模块没有看到提供者
【发布时间】:2018-07-24 18:04:34
【问题描述】:

我已经为我的应用程序创建了一个带有子路由的子模块,但是每当我向我的子路由添加解析器时,它都会抱怨我的解析器没有被提供,但是它被提供了。

我的子模块

export const routes: Routes = [
    {
        path: '',
        component: SubTypesComponent,
        resolve: {
            contact: 'contact'
        }
    }
];

@NgModule({
    imports: [
        CommonModule,
        AppRoutingModule,
    ],
    declarations: [SubTypesComponent],
    providers: [
        SubTypeService,
        {
            provide: 'contact',
            useValue: () => {
                return {
                    id: 1,
                    name: 'Some Contact',
                    website: 'http://some.website.com'
                };
            }
        }
    ]
})
export class TermModule {
}

我在浏览路线时遇到的错误

Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[contact]: 
StaticInjectorError(Platform: core)[contact]: 
NullInjectorError: No provider for contact! 
_NullInjector.prototype.get@webpack-internal:///../../../core/esm5/core.js:1208:19 resolveToken@webpack-internal:///../../../core/esm5/core.js:1506:17 tryResolveToken@webpack-internal:///../../../core/esm5/core.js:1448:16 StaticInjector.prototype.get@webpack-internal:///../../../core/esm5/core.js:1316:20 resolveToken@webpack-internal:///../../../core/esm5/core.js:1506:17 tryResolveToken@webpack-internal:///../../../core/esm5/core.js:1448:16 StaticInjector.prototype.get@webpack-internal:///../../../core/esm5/core.js:1316:20 resolveNgModuleDep@webpack-internal:///../../../core/esm5/core.js:11061:12 NgModuleRef_.prototype.get@webpack-internal:///../../../core/esm5/core.js:12294:16 PreActivation.prototype.getToken@webpack-internal:///../../../router/esm5/router.js:4057:16 PreActivation.prototype.getResolver@webpack-internal:///../../../router/esm5/router.js:4040:41 PreActivation.prototype.resolveNode@webpack-internal:///../../../router/esm5/router.js:4015:88 PreActivation.prototype.runResolve@webpack-internal:///../../../router/esm5/router.js:3991:84 PreActivation.prototype.resolveData/runningChecks$<@webpack-internal:///../../../router/esm5/router.js:3630:162 MergeMapSubscriber.prototype._tryNext@webpack-internal:///../../../../rxjs/_esm5/operators/mergeMap.js:133:22 MergeMapSubscriber.prototype._next@webpack-internal:///../../../../rxjs/_esm5/operators/mergeMap.js:123:13 MergeMapSubscriber.prototype.notifyComplete@webpack-internal:///../../../../rxjs/_esm5/operators/mergeMap.js:175:13 InnerSubscriber.prototype._complete@webpack-internal:///../../../../rxjs/_esm5/InnerSubscriber.js:34:9 Subscriber.prototype.complete@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:122:13 Subscriber.prototype._complete@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:140:9 Subscriber.prototype.complete@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:122:13 Subscriber.prototype._complete@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:140:9 Subscriber.prototype.complete@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:122:13 Subscriber.prototype._complete@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:140:9 Subscriber.prototype.complete@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:122:13 Subscriber.prototype._complete@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:140:9 Subscriber.prototype.complete@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:122:13 Subscriber.prototype._complete@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:140:9 Subscriber.prototype.complete@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:122:13 onLoad@webpack-internal:///../../../http/esm5/http.js:1630:21 ZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:421:17 onInvokeTask@webpack-internal:///../../../core/esm5/core.js:4938:24 ZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:420:17 Zone.prototype.runTask@webpack-internal:///../../../../zone.js/dist/zone.js:188:28 ZoneTask.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:496:24 invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:1517:9 globalZoneAwareCallback@webpack-internal:///../../../../zone.js/dist/zone.js:1543:17 Stack trace: resolvePromise@webpack-internal:///../../../../zone.js/dist/zone.js:809:31 resolvePromise@webpack-internal:///../../../../zone.js/dist/zone.js:775:17 scheduleResolveOrReject/<@webpack-internal:///../../../../zone.js/dist/zone.js:858:17 ZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:421:17 onInvokeTask@webpack-internal:///../../../core/esm5/core.js:4938:24 ZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:420:17 Zone.prototype.runTask@webpack-internal:///../../../../zone.js/dist/zone.js:188:28 drainMicroTaskQueue@webpack-internal:///../../../../zone.js/dist/zone.js:595:25 ZoneTask.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:500:21 invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:1517:9 globalZoneAwareCallback@webpack-internal:///../../../../zone.js/dist/zone.js:1543:17

子路由也导入到我的主模块路由中,这是因为当我从子路由中删除此解析器时,我可以毫无问题地导航到该路由。

我已经做了很多次了,没有任何问题,所以我有点迷路了。

我的父路由

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {Routes} from '@angular/router';
import {routes as subTypeRoutes} from '../term/term.module';

export const routes: Routes = [
    {
        path: 'subtypes',
        resolve: {
            project: ProjectResolve
        },
        children: subTypeRoutes
    },
];

@NgModule({
    imports: [
        CommonModule
    ],
    declarations: []
})
export class ProjectRoutingModule {
}

我的父模块

@NgModule({
    imports: [
        CommonModule,
        AppRoutingModule,
    ],
    declarations: [
        ProjectsComponent,
    ],
    providers: [
        ProjectService,
        ProjectsResolve,
        ProjectResolve
    ]
})
export class ProjectModule {
}

【问题讨论】:

  • 能否提供AppModule和AppRoutingModule的来源?
  • @JeanPaulA。我已经添加了父模块和它的路由,这些是单独的文件。我还删除了所有其他内容,因为我有类似的子模块,它们的工作方式完全相同并遵循相同的设置结构,但它们确实可以工作
  • 您当然必须导出您的解析器,以便在 AppRoutingModule 中使用它
  • @PierreMallet 但我从来没有从我的其他路线导出解析器,但它们确实有效......
  • 是的,但是路线“定义”和路线“使用”是否在不同的模块中?您的联系解析器已在 TermModule 中注册,并且您在 ProjectRoutingModule 中使用您的路线,该路线没有任何指向您提供的联系可注入的链接。我不明白这怎么行。

标签: angular module angular2-routing provider resolver


【解决方案1】:

感谢@PierreMallet 的评论,我找到了它。 我必须在我的ParentModule 中导入TermModule。这似乎很正常,但我忽略了这一点的原因是因为最近我一直在开发很多GrandChildModules 而我不必直接在我的ParentModule 中导入它,因为它是通过ChildModule 导入的所以我忘了关于那部分。

ParentModule > ChildModule > GrandChildModule

项目结构的复杂设置让我忽略了这一点。

【讨论】:

    猜你喜欢
    • 2018-11-17
    • 2018-08-04
    • 2018-06-21
    • 2018-08-10
    • 2018-07-16
    • 2018-04-26
    • 2017-02-14
    • 1970-01-01
    • 2020-12-01
    相关资源
    最近更新 更多