Angular 5子模块没有看到提供者

时间:2018-02-14 08:20:30

标签: angular module angular2-routing provider resolver

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

我的子模块

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 {
}

1 个答案:

答案 0 :(得分:0)

感谢@PierreMallet的评论,我发现了它。 我必须在TermModule中导入ParentModule。这似乎很正常,但我之所以忽视这一点,是因为我最近开发了很多GrandChildModules并且我不必直接将其导入ParentModule,因为它是通过{{ChildModule导入的。 1}}所以我忘记了这一部分。

ParentModule&gt; ChildModule&gt; GrandChildModule

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