Ivy fails with NGXS

🐞 bug report

Is this a regression?

Yes, it is

Description

NGXS works with Angular 8, but build fails when enableIvy is true

🔬 Minimal Reproduction

https://github.com/arturovt/ivy-ngxs-repro

create new app with --enable-ivy
install @ngxs/store
import the NgxsModule
build with --prod flag

🔥 Exception or Error


chunk {0} runtime-es5.465c2333d355155ec5f3.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} main-es5.f306d8f70fdeea68d975.js (main) 178 kB [initial] [rendered]
chunk {2} polyfills-es5.e0a0858fa7791e140ae9.js (polyfills) 113 kB [initial] [rendered]
Date: 2019-07-23T07:08:02.084Z - Hash: 93ed973fa7b88e080f3b - Time: 17265ms

ERROR in ./src/app/app.module.ts 19:104-121
"export 'NgxsRootModule' (imported as 'i1') was not found in '@ngxs/store'

🌍 Your Environment

Angular Version:


Angular CLI: 9.0.0-next.2
Node: 12.6.0
OS: linux x64
Angular: 9.0.0-next.5
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Anything else relevant?
May be related to the #29939

UPD

It's built without errors using CLI 9.0.0-next.2 version. But there is a runtime error after importing NgxsRouterPluginModule:

Can't resolve all parameters for RouterState: (?, ?, ?, ?, ?, ?, ?).

Because there is no ngInjectableDef property on the RouterState.

Also when running ivy-ngcc it fails compiling @ngxs/router-plugin as umd:

Value at position 0 in the NgModule.imports of NgxsRouterPluginModule is not a reference: [object Object]

Just to add in here, I have just tested this repo with Angular 8.2.0-next.2 and it has the same build failures.
In the referenced firebase issue it was suggested that this would be fixed by PR #30591 but this PR seems to have been merged, closed (although there seem to be more subsequent commits on it?) and is part of the Angular 8.2.0-next.2 package. The issue is unfortunately still present in this version.

@alxhub

@alxhub @AndrewKushnir Angular 9.beta + NGXS works now, but @ngxs/router-plugin not working with Ivy

for reproduction

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { StoreIvyModule } from './store-ivy.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    StoreIvyModule,
    RouterModule.forRoot([{ path: '', component: AppComponent }])
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.state.ts

import { State } from '@ngxs/store';

@State<string[]>({
  name: 'app',
  defaults: []
})
export class AppState {}

store-ivy.module.ts

import { NgModule } from '@angular/core';
import { NgxsModule } from '@ngxs/store';
import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
import { NgxsFormPluginModule } from '@ngxs/form-plugin';
import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
import { NgxsStoragePluginModule } from '@ngxs/storage-plugin';
import { NgxsWebsocketPluginModule } from '@ngxs/websocket-plugin';
import { NgxsRouterPluginModule } from '@ngxs/router-plugin';

import { AppState } from './app.state';

@NgModule({
  imports: [
    NgxsModule.forRoot([AppState]),
    NgxsReduxDevtoolsPluginModule.forRoot(),
    NgxsFormPluginModule.forRoot(),
    NgxsLoggerPluginModule.forRoot(),
    NgxsStoragePluginModule.forRoot(),
    NgxsWebsocketPluginModule.forRoot(),
    NgxsRouterPluginModule.forRoot()
  ],
  exports: [NgxsModule]
})
export class StoreIvyModule {}

Build successful, but runtime error after ng serve

Can't resolve all parameters for RouterState: (?, ?, ?, ?, ?, ?, ?).

But works with Angular 7, 8 with ViewEngine

I have the same problem with --enable-ivy on, NgxsRouterPluginModule does not work, gives me the same error, rests are okay

@alxhub

@alxhub @AndrewKushnir

FYI I've updated Angular version to the 9.0.0-next.5 in this repro.

It's built without errors but still there is a runtime error Can't resolve all parameters for RouterState: (?, ?, ?, ?, ?, ?, ?)..

When running ivy-ngcc, it fails when Compiling @ngxs/router-plugin : main as umd with:

Value at position 0 in the NgModule.imports of NgxsRouterPluginModule is not a reference: [object Object]

Also I've noticed that it fails with Can't resolve all parameters for RouterState because there is no ngInjectableDef and if I add it manually, then in works:

RouterState.ngInjectableDef = defineInjectable({
  factory: () =>
    new RouterState(
      inject(Store),
      inject(Router),
      inject(<any>RouterStateSerializer),
      inject(NgZone),
      inject(<any>UrlSerializer),
      inject(<any>LocationStrategy),
      inject(Location)
    ),
  token: RouterState,
  providedIn: 'root'
});

@arturovt

Hi @arturovt,

Thanks for additional information. I've looked at the code and it seems like the issue appears because there is insufficient type information provided when you use ModuleWithProviders type, for example here, it should be ModuleWithProviders<NgxsModule>, see docs for ModuleWithProviders type here.

Please try to update all usages of the ModuleWithProviders type in your project, try to compile it with Ivy again and let us know if that resolved the problem. Note: this change is also compatible with View Engine.

Thank you.

@arturovt

@arturovt thanks, that does indeed reproduce the issue you describe for store.NgxsModule.forFeature([RouterState]). I marked #32619 as WIP for now and look into the UMD issue tomorrow, so that we can hopefully resolve both issues with that PR.

fix(ngcc): correctly read static properties for aliased classes

fix(ngcc): resolve imports in `.d.ts` files for UMD/CommonJS bundles

@arturovt

@arturovt there was indeed an issue with resolving store.NgxsModule.forFeature([RouterState]) in both CommonJS and UMD bundles, for which I included a fix in #32619. With those fixes, the compilation no longer fails :-)

@JoostK

@JoostK great, dank je wel :)

fix(ngcc): resolve imports in `.d.ts` files for UMD/CommonJS bundles (#…

@JoostK

Hi @JoostK. Still getting this error after updating package.json with angular 8.2.6. Any suggestions?

Compiling @ngxs/router-plugin : main as umd
Value at position 0 in the NgModule.imports of NgxsRouterPluginModule is not a reference: [object Object]
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! nam-client@0.0.0 postinstall: `ivy-ngcc`

@crywolfe

@crywolfe check their changelog, they haven't published anything for the last 2 days ;)

FYI, NGXS team has not checked the fix yet because they're waiting for the a new version of the compiler to be published. Ref: ngxs/store#1165

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Navigation Menu

Repository navigation

Ivy fails with NGXS #31791

🐞 bug report

Is this a regression?

Description

🔬 Minimal Reproduction

🔥 Exception or Error

🌍 Your Environment

6 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Ivy fails with NGXS #31791

Description

🐞 bug report

Is this a regression?

Description

🔬 Minimal Reproduction

🔥 Exception or Error

🌍 Your Environment

Activity

markwhitfeld commented on Jul 23, 2019

splincode commented on Aug 25, 2019

tahmid-shahriar commented on Sep 4, 2019

arturovt commented on Sep 5, 2019

AndrewKushnir commented on Sep 6, 2019

6 remaining items

JoostK commented on Sep 11, 2019

JoostK commented on Sep 12, 2019

arturovt commented on Sep 12, 2019

crywolfe commented on Sep 13, 2019

arturovt commented on Sep 13, 2019

jtomek commented on Sep 16, 2019

angular-automatic-lock-bot commented on Oct 17, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions