CODEWITHSUNDEEP
angularangular6angular7angular-services
Peter
Peter

Reputation: 333

No provider for service - Angular 7

I've created a Singleton service in Angular which does API calls before the application starts. It works on the first loaded page but if I navigate to another page it says:

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[MyComponent -> MyService]: StaticInjectorError(Platform: core)[MyComponent -> MyService]: NullInjectorError: No provider for MyService!

I have no clue right now why, because this service is injected into both components, and works for the first one.

My app.module.ts:

providers: [
        MyService, {
            provide: APP_INITIALIZER,
            useFactory: (myService: MyService) => function () { return myService.load() },
            deps: [MyService],
            multi: true
        }]

My my.service.ts:

@Injectable()
export class MyService {
...
}

The import in both components:

constructor(private myService: MyService) { }

Can someone please guide me how to fix this?

Upvotes: 1

Views: 3371

Answers (2)

Nitin Rastogi
Nitin Rastogi

Reputation: 256

I tried replicating your problem, but it is working for me. Please check this code. https://stackblitz.com/edit/angular-palz6c

import { NgModule, APP_INITIALIZER  } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { MyServiceService } from './my-service.service';
import { TestComponent } from './test/test.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent, TestComponent ],
  bootstrap:    [ AppComponent ],
  providers: [MyServiceService, {
            provide: APP_INITIALIZER,
            useFactory: (myService: MyServiceService) => function () { return myService.load() },
            deps: [MyServiceService],
            multi: true
        }]
})
export class AppModule { }

Service

import { Injectable } from '@angular/core';
@Injectable()
export class MyServiceService {

  constructor() { }

  load() {

        // return new Promise<void>((resolve, reject) => {
        //     console.log("AppInitService.init() called");
        //     ////do your initialisation stuff here  
        //     setTimeout(() => {
        //         console.log('AppInitService Finished');
        //         resolve();
        //     }, 6000);

        // });
        console.log('AppInitService Finished');
    }

    test(val){
      console.log('test' + '-' + val);
    }
}

Component:

import { Component, OnInit } from '@angular/core';
import { MyServiceService } from '../my-service.service'
@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  constructor(private service: MyServiceService) { 
    console.log(this.service.test('Test Component'));
  }

  ngOnInit() {
  }

}

Please let me know if I am missing anything here.

Upvotes: 2

Eliran Eliassy
Eliran Eliassy

Reputation: 1600

Try to add to my.service.ts:

@Injectable({providedin 'root'})

Upvotes: 1

Related Questions