web-dev-qa-db-fra.com

Angular 6 StaticInjectorError: Aucun fournisseur pour Options

J'ai récemment mis à jour mon projet de Angular5 à Angular6. Le projet est en cours de construction mais l'erreur suivante s'affiche dans la console du navigateur:

Rejet de la promesse non gérée: StaticInjectorError (AppModule) [options]: StaticInjectorError (Platform: core) [options]: NullInjectorError: aucun fournisseur d'options! ; Zone:; Tâche: Promise.then; Valeur: Erreur: StaticInjectorError (AppModule) [options]

Une idée sur la façon de déboguer ces problèmes?

Voici mon app.module:

import { BrowserModule } from '@angular/platform-browser';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';
import { CookieModule } from 'ngx-cookie';
import { PushNotificationsModule, PushNotificationsService } from 'ng-Push';

// importing notifications module (angular 2 notifications)
import { SimpleNotificationsModule, NotificationsService } from 'angular2-notifications';

import { NgIdleKeepaliveModule } from '@ng-idle/keepalive';

import { NgProgressModule } from '@ngx-progressbar/core';
import { NgProgressHttpClientModule } from '@ngx-progressbar/http-client';

import { GridModule } from './shared-modules/grid-module/grid.module';

// importing components
import { AppComponent } from './app.component';
import { LoginComponent } from './pages/login/login.component';
import { SampleRouteComponent } from './pages/sample-route/sample-route.component';

// services
import { GtmService } from './services/gtm/gtm.service';
import { AuthGuardService } from './services/auth-guard/auth-guard.service';
import { LoginService } from './services/login-service/login.service';
import { UserInfoService } from './services/user-info/user-info.service';
import { UtilityService } from './services/utility/utility.service';
import { IdleService } from './services/idle/idle.service';
import { GenericGridService } from './shared-modules/grid-module/generic-grid.service';
import { HttpInterceptorService } from './services/http-interceptor/http-interceptor.service';
import { ModalProviderService } from './services/modal-provider/modal-provider.service';
import { NotificationServiceService } from './services/notification-service.service';
import { Api } from './services/api';

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'sample-route',
    component: SampleRouteComponent
  },
  {
    path: '',
    loadChildren: './shared-modules/container/container.module#ContainerModule',
    canLoad: [AuthGuardService]
  }
];

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    SampleRouteComponent
  ],
  imports: [
    BrowserModule,
    ServiceWorkerModule.register('/ngsw-worker.js', { enabled: false }),
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    GridModule,
    SimpleNotificationsModule,
    CookieModule.forRoot(),
    NgIdleKeepaliveModule.forRoot(),
    NgProgressModule.forRoot(),
    NgProgressHttpClientModule,
    RouterModule.forRoot(routes, { initialNavigation: 'enabled' }),
    PushNotificationsModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpInterceptorService,
      multi: true
    },
    GtmService,
    LoginService,
    AuthGuardService,
    UserInfoService,
    UtilityService,
    IdleService,
    ModalProviderService,
    NotificationsService,
    GenericGridService,
    NotificationServiceService,
    Api,
    PushNotificationsService
  ],
  bootstrap: [AppComponent]
})
export class AppModule {

  private loginObserver;

  constructor(private loginService: LoginService, private utilityService: UtilityService, private idleService: IdleService,
    private userInfoService: UserInfoService) {
    this.loginService.checkLoggedIn();
    this.loginObserver = this.loginService.loginObserver.subscribe(
      loggedIn => {
        if (loggedIn) {
          const userdata: any = this.userInfoService.getUserInfo();
          this.utilityService.createNotification({
            title: 'Welcome!!',
            content: `${userdata.vchDiplayName}`
          });
          this.idleService.reset();
          this.loginObserver.unsubscribe();
        }
      }
    );
  }

}
angularangular6
7
Subham Dey

C’est peut-être tard pour OP mais j’ai pu résoudre ce problème en:

Ajout du service nécessaire à la liste de mes fournisseurs sous le app.module.ts

J'espère que cela aidera ceux qui sont sur le point de rencontrer ce problème à l'avenir.

5
Jero Dungog

Pouvez-vous essayer de modifier l'importation de SimpleNotificationsModule en tant que SimpleNotificationsModule.forRoot () J'avais la même erreur et la modifier de cette manière l'a corrigé pour moi.

3
Pooja

Manquer des modules avec des méthodes statiques pour configurer le fournisseur peut également générer le même type de problème.

Par exemple, considérons que RouterTestingModule dispose d'une méthode statique appelée withRoutes () pour configurer le fournisseur.

Du point de vue du compilateur et de l'injecteur angular, cela peut être considéré comme un jeton manquant dans l'injecteur.

0
Tibin Thomas

Le problème peut être que vous avez un service non statique? Si vous disposez d'un service non statique, vous devez le spécifier en tant que fournisseur dans le composant qui l'utilise. Il ne suffit pas de le spécifier en tant que fournisseur dans le fichier app.modules.ts.

Service non statique

Supprime la directive injectable dans le service (ressemble généralement à ceci)

@Injectable({
   providedIn: 'root'
})

Dans le composant qui utilise le service non statique

Ajoutez l'attribut providers et spécifiez le service. Vous devez également l'importer, tout comme pour les services classiques.

import { EntryQueueHub } from 'app/services/hubs/entry-queue.hub';
@Component({
  selector: 'app-image-viewer',
  templateUrl: './image-viewer.component.html',
  styleUrls: ['./image-viewer.component.scss'],
  providers: [EntryQueueHub]
})
...
  constructor (
    private entryQueueHub: EntryQueueHub,
    ...
0
Olof