web-dev-qa-db-ja.com

Angularエラー：ActivatedRouteのプロバイダーがありません

最新のangular 5を使用していて、例外をヒットしています

ERROR Error: StaticInjectorError(AppModule)[AppComponent -> ActivatedRoute]: 
  StaticInjectorError(Platform: core)[AppComponent -> ActivatedRoute]: 
    NullInjectorError: No provider for ActivatedRoute!
    at _NullInjector.get (core.js:1002)
    at resolveToken (core.js:1300)
    at tryResolveToken (core.js:1242)
    at StaticInjector.get (core.js:1110)
    at resolveToken (core.js:1300)
    at tryResolveToken (core.js:1242)
    at StaticInjector.get (core.js:1110)
    at resolveNgModuleDep (core.js:10854)
    at NgModuleRef_.get (core.js:12087)
    at resolveDep (core.js:12577)

app.module.tsは次のようになりますimport {Routes、RouterModule} from '@ angular/router';

@NgModule({
  declarations: [
    AppComponent,
    OptyDetailsComponent,
    GlobalNavbarComponent
  ],
  imports: [
    BrowserAnimationsModule,
    BrowserModule,
    HttpModule,
    HttpClientModule,
    FlexLayoutModule,
    FormsModule,
    MatButtonModule,
    MatInputModule
    RouterModule
  ],
  entryComponents: [
  ], 
  providers: [
    DataStoreService,
    DataObjectsOscService,
    AdobeSignService,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
angularangular-activatedroute
22
Vik

angular要素にActivatedRouteを提供できるようにするには、RouterModule.forRootを呼び出した結果をルートモジュール（AppModule）にインポートする必要があります。これは、RouterModule.forRootによって返されるモジュールに、ActivatedRouteなどのインスタンスのプロバイダーが含まれているためです。

したがって、基本的には、ルートモジュールのインポートに次を追加する必要があります。

@NgModule({
  ...
  imports: [
    ...
    // Remark: because you havent defined any routes, I have to pass an empty
    // route collection to forRoot, as the first parameter is mandatory.
    RouterModule.forRoot([]),
    ...
  ],
  ...
})
export class AppModule { }

しかし、正直なところ、ルートモジュールのルートを定義していないにもかかわらず、ActivatedRouteを使用するのは奇妙です。

詳細については、以下を参照してください。

ActivatedRouteプロバイダーソース

RouterModule.forRoot（）source

30
Jota.Toledo