AngularでERROR Error: Uncaught (in promise): NullInjectorError

2022年2月20日

今回はAngularを使用しているときに、「core.js:4442 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[〇〇Service -> 〇〇Service -> 〇〇Service]: 」というエラーが起きたときの対処法についてご紹介いたします。

AngularでERROR Error: Uncaught (in promise): NullInjectorError

私はAngularでtsファイルに特定のフォルダ階層に属さないStoreを定義したときにブラウザでこのエラーが出ました。

結論を書くと、providersの部分に対象のStoreを定義してあげることで表題のエラーが解消されました。

import { testUsecase } from './test.usecase';
import { TestStoreService } from "@shared/services/store/test-store.service";

@Component({
    selector: 'test-component',
    templateUrl: './test.component.html',
    styleUrls: ['./test.component.scss'],
    providers: [testUsecase, testStore]
})
export class testComponent implements OnInit, OnDestroy {

    constructor(
        private testStore: TestStoreService
        // ...省略
    ) { }
}