NullInjectorError: No provider for StateObservable when using ng-packagr

angular typescript ngrx yarnpkg ng-packagr
Joe Attardi picture Joe Attardi · May 10, 2018 · Viewed 9.6k times · Source

I have an Angular 5 project that uses ngrx/store. The project consists of an application and a shared library that the application uses. Up until today, we had been compiling the TypeScript for both projects together - the library was being "published" with just the TypeScript code.

Today, I got this library working with ng-packagr and pulled it in to the application using yarn link, so that I could run the local code. However, when I try to start my app, I get this error in the browser:

Unhandled Promise rejection: StaticInjectorError(AppModule)[Store -> StateObservable]: StaticInjectorError(Platform: core)[Store -> StateObservable]: NullInjectorError: No provider for StateObservable! ; Zone: <root> ; Task: Promise.then ; Value: Error: StaticInjectorError(AppModule)[Store -> StateObservable]: StaticInjectorError(Platform: core)[Store -> StateObservable]: NullInjectorError: No provider for StateObservable! 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 _createClass (core.js:10895) at _createProviderInstance$1 (core.js:10865)

I have no idea where this is error coming from. My only clue is that it mentions AppModule. In my AppModule, I am importing @ngrx/store and importing StoreModule.forRoot into my module.

Answer

Rukshan Dangalla picture Rukshan Dangalla · May 10, 2018

Here is how I fixed the issue in my case:

I Imported the following:

import { Store } from '@ngrx/store';
import { StoreModule } from '@ngrx/store';

I added the store module in imports as : imports: [StoreModule.forRoot({}),............

Then I added the store service to the providers : providers: [Store]

Key point is to check missing providers. Hope this helps!

Related questions

Reconnecting a websocket in Angular and rxjs?

I have a ngrx/store (v2.2.2) and rxjs (v5.1.0) based application that listens to a web socket for incoming data using an observable. When I start the application I receive incoming data flawlessly. However after a while (updates are coming …

Read More
How to reset all states of ngrx/store?

I am using Angular 2 with ngrx/store. I want to reset the whole store states when user dispatch USER_LOGOUT. I read the Dan Abramov's answer of How to reset the state of a Redux store?, but I didn't figure …

Read More
How to wait for 2 Actions in @ngrx/effects

Can effect wait two actions like Promise.all? Example: @Effect() pulic addUser() { return this.actions$.ofType(user.ADD) .switchMap(() => { return this.userService.add(); }) .map(() => { return new user.AddSuccessAction(); }); } @Effect() pulic addUserOptions() { return this.actions$.ofType(userOptions.ADD) .switchMap(() =&…

Read More