Angular 5 - StaticInjectorError[ActionsSubject]: Function/Class not supported

[pierre-hilt]

I'm submitting a...

[ x] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Feature request
[ ] Documentation issue or request

What is the current behavior?

I am injecting StoreModule.forRoot(reducers, {metaReducers}).providers into platform providers.

let providers: StaticProvider = StoreModule.forRoot(reducers, {metaReducers}).providers;
providers = providers.concat(StoreDevtoolsModule.instrument().providers);

platformBrowserDynamic(providers).bootstrapModule(AppDemoModule);

After migration to angular 5, I have an error in the console:
StaticInjectorError[ActionsSubject]: Function/Class not supported

Expected behavior:

Application should start without error.

Minimal reproduction of the problem with instructions:

Version of affected browser(s),operating system(s), npm, node and ngrx:

@ngrx 4.1.0
@angular 5.0.0

Other information:

[MattiJarvinen]

As listed on Angular 5 changelog

platformXXXX() no longer accepts providers which depend on reflection. Specifically the method signature went from Provider[] to StaticProvider[].

Example: Before:

[
 MyClass,
 {provide: ClassA, useClass: SubClassA}
]

After:

[
  {provide: MyClass, deps: [Dep1,...]},
  {provide: ClassA, useClass: SubClassA, deps: [Dep1,...]}
]

NOTE: This only applies to platform creation and providers for the JIT compiler. It does not apply to @component or @NgModule provides declarations.

Benchpress note: Previously Benchpress also supported reflective provides, which now require static providers.

Reply if this change fixes it.

[voznik]

hello
I have similar error after upgrade from angular@4.3.2 to 5.0.0 & ngrx@4.1.0

Unhandled Promise rejection: StaticInjectorError[Store]: 
  StaticInjectorError[Store]:
    NullInjectorError: No provider for Store! ; Zone: <root> ; Task: Promise.then ; Value: Error: StaticInjectorError[Store]: 

I'm not using platform providers

how can I debug this error? where to look? 😕

the only non-standard implementation is abstract CanLoad guard that injects Store in constructor:

@Injectable()
export class ServiceLocator {
  static injector: Injector;
}
...
@Injectable()
export class ContentItemLoadedGuard implements CanActivate {
  private _store: Store<any>;
  private _itemLoaded$: Observable<boolean>;

  constructor(private contentType: any, private actions: any) {
    this._store = ServiceLocator.injector.get(Store);
    this._itemLoaded$ = this._store.select(fromContent.getItemLoaded(contentType));
  }
}
...
@Injectable()
export class AnnouncementItemGuard extends ContentItemLoadedGuard {
  constructor() {
    super(reducer.ContentTypes.A, actions);
  }
}

[MattiJarvinen]

@voznik why you don't set Store as a constructor parameter and use Injector?

There was something about decorators and dynamic functions when I tried to run unit:tests with Angular5 against ngrx monorepo, (basicly dependency hell ensued, codelyzer, zonejs, rxjs, typescript had to be upgraded thus breaking tests since jasmine had to be upgraded....) and then run out of time to use for that.

Try this if you just need to get it working.

import * as fromRoot from '../reducers';
export class BookExistsGuard implements CanActivate {
  constructor(
    private store: Store<fromRoot.State>,
    private service: BookService,
    private router: Router
  ) { }
// ....
}

[pierre-hilt]

OK I think I found the problem.

in StoreModule providers you add ACTIONS_SUBJECT_PROVIDERS. But this provider is not following StaticProvider syntax.

This should be:

export const ACTIONS_SUBJECT_PROVIDERS: Provider[] = [{provide:ActionsSubject, deps:[]}];

Am I guessing right?

[MattiJarvinen]

If only I had time to look into #553 with Angular 5.

[Reboog711]

In case this helps someone:

I was experiencing a similar error on a project that was not using the Angular CLI. I believe the problem went away when I upgraded the version of TypeScript to 2.4.0, as is documented in the Angular 5 release notes.

Edit: I'm no longer sure if this is what solved my issue. I am still having sporadic problems with this, which I now believe relates to case sensitivity of the import statement in the component where the service was injected. Usually I would match case sensitivity of the package structure / file name on disk, but for the second import from the directory the file must be in all lower case, or else it throws an error.

This makes no logical sense to me, but for the moment it is solving my issue.

[jjorbas]

In my experience,

I had the same problem with a service, and I noted that I forgot to declare

providers: [ ServiceName ]

in the @component section of the ts file

[maksimbykov]

If you passing some custom class instance into component constructor it may produce the same problem. It is because of DI, rather you can declare a property in the component class. At least I had that problem.

[lakhanpujeri]

Can any one help me please

[gilbertmpanga12]

@lakhanpujeri instead of injecting your service in constructor ,use a property instead thanks @maksimbykov

[straiforos]

Hello All,
I ran into this error:

Error: StaticInjectorError(DynamicTestModule)[FiltersComponent -> Store]: 
 StaticInjectorError(Platform: core)[FiltersComponent -> Store]: 
   NullInjectorError: No provider for Store!

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({}),............
I added the store service to the providers : providers: [Store]

I have not seen this error when I add this and it works as expected as far as I can tell. Hope this helps!

[spraju92]

@straiforos Which file you are imported above things?

[ghost]

@lakhanpujeri instead of injecting your service in constructor ,use a property instead thanks @maksimbykov

It solves my problem but when i use property , returns undefined why? :|