Unexpected value 'NgReduxModule' imported by the module 'AppEngine'

[NeoLSN]

ngc error: Error: Unexpected value 'NgReduxModule' imported by the module 'AppEngine'

Did someone know how to solve it?

[dagstuan]

Its due to missing metadata.json-files, see #223.

[e-schultz]

I hope to get this fixed this week, just been travelling and haven't had time to fully test things, but having ng2-redux work with AoT is high on my priority list.

[e-schultz]

Been busy traveling for work lately and haven't had as much time to work on this, but have a test module published at 4.0.0-aotbeta.3 - still not fully working.

One error once I've gotten past the NgModule error, is how it behaves when you pass functions into selectors.

export const stuffSelect = n=>n.tuff;
export class Stuff {
  @select(n=>n.stuff) thisWillCauseAnError$
  @select(stuffSelect) thisWilNotCauseAnError$
}

If anyone has a demo repo with an AoT app working that they could point me at to help play around with as a test bed, that would be great.

[e-schultz]

Some update/progress:

Working on a repo with master of angular-cli.

e-schultz/ng2-redux-aot-example#1

Have it so things don't throw errors, however the @select decorator just fails to work, will investigate further.

[NeoLSN]

@e-schultz still the same problem.

[h2qutc]

Hi,
Is there a tuto or a book that explain how to create a file metadata.json for a file *.d.ts ?
Thanks

[dagstuan]

@h2qutc ngc automatically generates them when it builds a project, there is nothing else to it :) If the project is built with ngc it will have *.metadata.json files along with .js files.

[smkamranqadri]

any expected date when it will be resole, i stuck with ionic 2 rc0 app. which is using ngc and giving below error.

ngc: Error: Unexpected value 'NgReduxModule' imported by the module 'StoreModule'

[duydao]

Could this issue be related to the fact that NgRedux is using generic types?

angular/angular#11057

[h2qutc]

Hi,
I managed to resolve this error. I create a new module to remplace NgReduxModule and add it into imports

import { NgModule } from '@angular/core'; import { NgRedux, select } from 'ng2-redux';

@NgModule({ imports: [ ], declarations: [ ], exports: [ ], entryComponents: [ ] }) export class AppNgReduxModule { static forRoot() { return { ngModule: AppNgReduxModule, providers: [NgRedux], }; } }

Although I'm having another error and I not sure that this is a workaround for this issus. Anyway, I don't have this error anymore. But now, I got an another error:

ngc: Error: Error at c:/MCNEXT/Vinci/Vinci-RSC%20Mobile/.tmp/app/app.module.ngfactory.ts:174:15: Generic type 'NgRedux<RootState>' requires 1 type argument(s).

Any help please?

[SethDavenport]

seems likely that it is due to the issue referenced by @duydao. NgRedux has a type parameter so you can strongly type your store; it would be a shame to sacrifice this. The increasing list of basic language constructs not supported by AoT is becoming tiresome.

Nonetheless we'll see what we can do. @e-schultz let's chat more about this when you're back.

[smkamranqadri]

i wan thinking to switch to ngrx/store instead as i can't wait for the issue to be resolve.

[smkamranqadri]

i got solution to complete the app with ngc and no need to switch. well looking forward for the resolution as soon as possible.

[NeoLSN]

@e-schultz @SethDavenport Just hope this issue can be resolved as soon as you can.

[h2qutc]

@smkamranqadri Can you share the solution that you got please?

[smkamranqadri]

find can find here...

ionic-team/ionic-cli#1504

[e-schultz]

My update on this:

I have a version working npm install ng2-redux@aot-beta that will have things working with AoT compiling and not complain about

Unexpected value 'NgReduxModule' imported by the module 'AppEngine'

However, @select decorators do not work - and I'm trying to find a way to resolve this.

I was hoping to have both issues resolved in one release, as well - I'm big fan of @select

Another workaround is to do a prod build, but with AoT turned off

ng build --aot false -prod

If people are ok with @select not working and changing their code from

class MyClass {
 @select() stuff$;
}

// to

class MyClass {
    stuff$;

  ngOnInt() { 
   this.stuff=this.ngRedux.select('stuff');
  }
}

I can push out a non beta release of this soon.

I have an idea later tonight I want to try out to get @select working, but would possibly mean needing to inject ngRedux into your components/services even if you were not using it as everything else is being done from the decorators.

[e-schultz]

note: when I say @select doesn't work - the app compiles, but when you view the pages/views generated - they do not work as expected.

[NeoLSN]

@e-schultz If there is a ng2-redux@aot-beta, I can do with this first. Thanks.

But it is still got error
ngc: Error: Error at ... Generic type 'NgRedux<RootState>' requires 1 type argument(s).

[h2qutc]

+1

[NeoLSN]

I tried that using "--dev" to build app. And, yes, the app can be built, but when app open it always shows Uncaught ReferenceError: module is not defined.
If I choose to build app without adding "--dev" , I always get message - ngc: Error: Error at ... Generic type 'NgRedux<RootState>' requires 1 type argument(s).
My current ng2-redux version is "ng2-redux": "^4.0.1-beta.3"

Could someone give me any suggestion?

[duydao]

@NeoLSN I run into the same error message, but it was caused by a dependency of redux itself (symbol-observable@1.0.3).

There seems to be a difference of the index.js file on git (https://github.com/blesh/symbol-observable/blob/master/es/index.js) and the npm package.

I've already created an issue for it: benlesh/symbol-observable#26

for now, you could replace the content of the index.js file in your node_modules with the one on git: (https://github.com/blesh/symbol-observable/blob/master/es/index.js)

[duydao]

@e-schultz Could you share your current progress on this issue? Maybee we are able to help figuring out why the select doesn't work

[h2qutc]

For someone who want to build with JIT compiler
https://forum.ionicframework.com/t/ionic-build-android-with-jit-compiler/66564

[NeoLSN]

@e-schultz
Will this ngc: Error: Error at ... Generic type 'NgRedux<RootState>' requires 1 type argument(s). also fix in this issue?

[e-schultz]

@NeoLSN can you try ng-redux@aot-beta? I'm not getting that issue in the toy app that I'm playing around with.

The issue seems to be that AoT just doesn't like decorators that mutate the class. Even creating a simple decorator that adds a getter to return the string 'this works' - works without AoT, stops working with AoT - no error/bug/warning, just silently stops working.

The 'list of things that AoT doesn't support / throws errors on / silently has failing behavior with no error or warning' has me questioning the readiness of AoT for production use (even outside of use with ng2-redux).

Later tonight I'll push up my work in progress / example app.

Ideally I wanted to get a release out that would have both the module issue + decorators working in the same release, but what I may need to do is a release w/o decorators working with migration docs (pretty easy, but annoying - and really want to avoid pushing that onto the users), and then try and see if I can figure out a solution for the decorators.

[NeoLSN]

@e-schultz
Yes, I'm using ng2-redux@aot-beta.

And when I call npm run build, I'll get

I work with @duydao 's suggestion now, but it seems a workaround that building code without ngc.
If I want to build code with ngc, do you have any suggestion?

[spock123]

Thank you for all the great work, guys..
I'd seriously be sad to lose @select, it's so elegant and brilliant....

[e-schultz]

There seems to be challenges with the ngc compiler working with generics as injectables and there is an issue on the angular repo for it,

But when that issue gets closed with "its by design", and "I'm making a list of patterns that are supported and not by AoT - but it's taking too long because the only way to see the error is to run it" is what makes me go 😱 and question AoT's readiness for production.

I've been playing around with the angular cli, and also compiler cli - is if you don't tell ngc to ignore .ngfactory files - first run things work, generates the .ngfactory files, then next time you run it - it tries to run ngc on the generated factory files, then chokes on those.

WIth the cli-generated project I've been playing with, if I try and use ngc directly

- 1st run - no errors (not sure if the app actually works or not) - 2nd run - it tries to run ngc on the generated .ngfactory artifacts - and throws an error - remove the factory files - 3rd run - runs w/o error again

If you tweak your config to tell it to put the angular compiler generated files elsewhere ...

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ]
  },
   "angularCompilerOptions": {
    "genDir": "../ngfactory"
  }
}

so that ngc won't try to recompile it's own output - the error from compiling stops happening. I haven't tried to actually bootstrap/run the output yet - so unsure if it works as expected, but at least the compiler stops complaining.

Not sure how much of a help this is, just sharing the findings from my exploration so far.

[e-schultz]

Just published a new beta.

Slight change with how you import the module, now should do NgReduxModule.forRoot,

change-log details

[NeoLSN]

[23:48:57]  Error: Error encountered resolving symbol values statically. Function calls are not supported.
            Consider replacing the function or lambda with a reference to an exported function, resolving
            symbol AppModule in .../app.module.ts,
            resolving symbol AppModule in .../app.module.ts
[23:48:57]  ngc failed
[23:48:57]  ionic-app-script task: "build"
[23:48:57]  Error: Error

Did I do something wrong?

[NeoLSN]

Just provide another workaround.

1. Directly extends NgRedux.

import { Injectable } from '@angular/core';
import { NgRedux } from 'ng2-redux';

@Injectable()
export class _NgRedux extends NgRedux<any> {

    constructor() {
        super();
    }
}

1. In app module, do things like below

import { NgRedux } from 'ng2-redux';
import { _NgRedux } from './_ng-redux';

@NgModule({
    ...,
    providers: [
        ...,
        { provide: NgRedux, useClass: _NgRedux },
    ]
})
export class MyApp {

    constructor(
        ...,
        private ngRedux: NgRedux<any>
    ) {}
}

This method will be better than using wrapper class.
If you want to use ng2-redux-router or other library which based on ng2-redux.

It is still a workaround. Don't do this if you have another choice.

[danielcrk-cn]

@NeoLSN Thanks for posting this man! Will give it a go!

[e-schultz]

@danielcrk-cn @NeoLSN 4.0.0-beta.7 is now out, should fix that issue now - I had broken the generation of the metadata file which should be resolved now.

[danielcrk-cn]

I've tried the new beta now, and still get the same error, Generic type 'NgRedux<RootState>' requires 1 type argument(s)

In app.module.ts, i've added NgReduxModule.forRoot() to the imports array. Should this still be the correct way to do it?

[danielcrk-cn]

@NeoLSN your latest workaround seems to be working great! thanks again!

[SethDavenport]

@danielcrk-cn I have been able to get ng2-redux@4.0.0-beta.7 working with Angular CLI and AoT here: https://github.com/SethDavenport/ng2-redux--with-aot

To run it, clone the repo and do:

npm install -g angular-cli@1.0.0-beta.18
npm install
ng serve # serve without AoT - works fine
ng serve --aot # serve with AoT - also works fine

Can you share your repo where you're having the issue?

[SethDavenport]

@NeoLSN, @danielcrk-cn: it's unfortunate that we have to resort to such a workaround. I myself am having trouble reproducing the 'generic' error, but some of my colleagues have encountered it; my working theory is that it happens when you use ngc but not when you use the --aot mode of angular-cli.

Further, I suspect that we may be able to resolve it by dropping the @Injectable decorator from the NgRedux class. It's redundant anyway because of the manual provider we construct in NgReduxModule.forRoot().

I've published a tag to test this out; can you try npm install --save ng2-redux@aotfun and let me know if you still get the 'generic' error?

[SethDavenport]

Fixed in 4.0.0.

[MichalZak]

I just upgraded to 4.0.0, but im still getting the error.
Generic type 'NgRedux' requires 1 type argument(s).

Besides using NgReduxModule.forRoot(), what else do I need to make sure of.
Im developing with Ionic2/Webpack

Mike

[NeoLSN]

@SethDavenport Yes, I still get Generic type 'NgRedux' requires 1 type argument(s). issue.

Sorry for the late response.

[SethDavenport]

can you try an rm -rf node_modules; npm cache clean; npm install ?

[NeoLSN]

@SethDavenport

[09:44:06]  Error: Error at <project_root>/.tmp/app/app.module.ngfactory.ts:129:15
[09:44:06]  Generic type 'NgRedux<RootState>' requires 1 type argument(s).
[09:44:06]  ngc failed
[09:44:06]  ionic-app-script task: "build"
[09:44:06]  Error: Error

[SethDavenport]

I believe I have identified the cause. Working on a fix now.

[SethDavenport]

FWIW, if you're struggling with AoT in any of your own code, my colleague @watrool has build a very handy test harness for AoT issues: https://github.com/rangle/angular-2-aot-sandbox

[SethDavenport]

Can you try ng2-redux@4.1.0? Should be fixed now. Sorry about that.

[NeoLSN]

Yes, it works on ng2-redux@4.1.0. Thanks!!!!

[SethDavenport]

Phew! Sorry that took so long.

[stevencohn]

While this syntax doesn't seem to work when building @select(s => s.foo.bar) something;
this does: @select('foo.bar') something;

So replace the lambda parameter to @select with a string parameter.

[SethDavenport]

actually property path selectors are already supported with the following syntax: @select(['foo', 'bar']) something