没有服务提供商 - Angular 7

Question

我在 Angular 中创建了一个 Singleton 服务，它会在应用程序启动之前执行 API 调用。它适用于第一个加载的页面，但如果我导航到另一个页面，它会显示：

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

我现在不知道为什么，因为这个服务被注入到两个组件中，并且适用于第一个组件。

我的app.module.ts:

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

我的my.service.ts:

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

两个组件中的导入：

constructor(private myService: MyService) { }

有人可以指导我如何解决这个问题吗？

Answer 1

尝试添加到my.service.ts:

@Injectable({providedin 'root'})

Answer 2

我试过重现你的问题，但它对我有用。请检查此代码。 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 { }

服务

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);
    }
}

分量：

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

}

如果我遗漏了什么，请告诉我。

没有服务提供商 - Angular 7

No provider for service - Angular 7

angular-services

angular

angular6

angular7