`@select` + AoT + Angular CLI === sadness

[SethDavenport]

When you run in JIT mode, it works fine. When you run code using @select in AoT mode, it just turns into a no-op.

Looking at the output suggests that the decorator code is simply missing after transpilation.

[SethDavenport]

@clbond did some experiments with angular-cli's AoT integration and found this: https://github.com/angular/angular-cli/blob/master/packages/webpack/src/loader.ts#L19

This code appears to be stripping all decorators out of the AST (!)

[SethDavenport]

Apparently commenting out those lines in the cli's loader causes ng2-redux's @select to work just fine again.

[SethDavenport]

Once #234 is fixed I'll put together a sample repo and file a bug with the CLI team asking for more context about this code.

Meanwhile, we're checking to see if it works with raw ngc.

[SethDavenport]

With some hacks to workaround #234 and #235 we were able to get @select working with a raw ngc (non CLI) compile. So it looks like this is specific to the angular CLI's webpack loader.

[SethDavenport]

angular/angular-cli#2799

[NeoLSN]

When I tried to use @select(state => state.value) private property, I got
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

Is this issue investigating that kind of error?

[SethDavenport]

Nope - that's an AoT limitation with anonymous functions. You'll need to do either:

// Baby-sit AoT's limitations with anonymous functions and needing things to be
// exported.
export function selectValue(s) { return s.value; }; 

// ...

@select(selectValue) value

or

// Looks for a property on state called 'value'
@select('value') property;

or even

// Infers state.value from the property name
@select() value;

[SethDavenport]

In general, AoT has a lot of non-obvious limitations with what TypeScript constructs can be used at the boundary of NgModules. Documentation has also been lacking. The best resource I know of right now is some experiments being conducted by my work colleagues as they migrate some larger codebases to AoT.

https://github.com/rangle/angular-2-aot-sandbox

[fiznool]

@SethDavenport would you mind sharing how you managed to get your custom decorator @select to work with an AOT build?

I'm trying to use ngrx/effects in my Ionic 2 app. Ionic 2 does not use the angular-cli, instead it uses ngc directly when it builds an app for production. Therefore, it shouldn't be prone to the issue in the angular-cli webpack loader, which strips out all custom decorators.

Instead, I think we're coming up against this section in the angular compiler codebase which appears to only allow a whitelist of decorators.

Did you find a way of getting around this?

[SethDavenport]

Hi @fiznool - I can't speak for that piece of code you linked: I'm aware of it but I'm not clear of when during AoT it gets invoked.

That said, my colleagues have put together a set of test repos in an attempt to flush out AoT's "hidden gems" :)

[SethDavenport]

Their tests seem to indicate that both ngrx's @Effect and our @select can be made to work with raw ngc.