Store: UglifyJS breaking ngxs?

[xmlking]

I used to build my app for prod with ng build --app=default -oh=media --prod but the ngxs store is not working with prod builds with this command, ngxs works without issues in dev modeng s -e mock --extract-css --preserve-symlinks --proxy-config proxy.conf.js

After trying various -prod mode options, I am thinking UglifyJS is causing this issue.

unfranaltiy angular-cli doesn't have option to desable UglifyJS with -prod builds.
As a workaround, I am using following command to emulate prod builds.
ng build --app=default -oh=media -e prod --aot=true --build-optimizer=true --named-chunks=false --sourcemaps=false (this cannot add service-worker unfraunalty)

wonder if anyone experiencing this issue when building for prod with angular-cli!

[deebloo]

@xmlking can you provide any code that could help us troubleshoot? what error are you getting? is is breaking at build time or at runtime?

[xmlking]

https://github.com/xmlking/nx-starter-kit
To Run local : ng s -e mock --extract-css --preserve-symlinks
To build for Prod : ng build --app=default --prod -oh=media Then you can use npx lite-server --baseDir="dist...." to serve prod build.

I am guessing @select decorator at is getting removed by uglifyJS .
I saw some posts about NGRX custom decorators are also getting removed.

[xmlking]

Breaking at runtime. @select fields getting no updates from the store.

[xmlking]

@deebloo I added hosted Auth server so that reproduction this issue will be eazy:

Starting Dev server:
Assume nx-starter-kit is checked out, and ran npm i

ng s -e mock --extract-css --preserve-symlinks 

when you open app in in browser, will produce following console.log:

Auth Mode Changed: undefined => undefined
auth.service.ts:31 Auth Mode Changed: undefined => ImplicitFLow

if you build with -prod flag and start lite-server server:

# build
ng build --app=default --prod -oh=media -e mock 
# start lite-server server 
npx lite-server --baseDir="dist/apps/default"

This will only produce following console.log: (no ImplicitFLow printed)

Auth Mode Changed: undefined => undefined

I am thinking this means @Select in AuthService.ts it removed by UglifyJS

 @Select('auth.authMode') private _mode$: Observable<AuthMode>;

[xmlking]

Conforming this is caused by Angular-CLI's UglifyJS plugin
by removing new UglifyJSPlugin({ section from node_modules/@angular/cli/models/webpack-configs/production.js
standard production build ng build --app=default --prod -oh=media works without issues.

My Conclusion: UglifyJS will break any 3rd party libs that will bring in custom decorators.

how do we disable UglifyJS plugin in Angular-CLI ?

Also discussed @ https://github.com/angular/angular-cli/issues/9800

[perjansson]

I'm also seeing a runtime error when running in production build. I'm not using angular-cli so I can disable UglifyJsPlugin by myself and than it works, but if it's included in the plugins the app breaks:

In console when first event is dispatched:

app.bundle.js?157253821fa7e0409146:1 RangeError: Maximum call stack size exceeded
    at t._dispatchMutation (app.bundle.js?157253821fa7e0409146:1)

[deebloo]

ill look into it. i want to know how ngrx effects managers to get around it

[deebloo]

@xmlking we cannot reproduce the error. we tried the lib with angular-cli in prod mode and everything seemed to work as intended can you try again with 2.0?

[crcarrick]

When I was looking at your library (great job by the way, really addresses a lot of the pain points of ngrx/store!) I thought to myself "they are going to have some problems with minification". You guys seem to be relying on class and property etc names quite a bit here. This is likely to cause problems after minify because those class names have been, well, minified.

To illustrate with an example:

In your library I can define a state and omit the name property, which the docs say will then be inferred from the class name. let's say our class name is FooState. If I understand what you're doing correctly, by inferring from the class name, I now have a section of state called foo. So, later in my code I go to select the foo section of state by doing @Select('foo'). The problem is, after minification my state class is no longer called FooState. The minifier has changed it a for example. However, strings are not minified. So 'foo' in the select decorator is still 'foo' post-minification. The string no longer matches to the portion of my state, which is now also called a since it is being inferred from the class name, and thus there is a disconnect and things break.

It's possible that you've found a way around this problem and this person's issue is not related at all. I haven't read through your entire codebase :) .. But, I figured I'd throw it out there.

[xmlking]

@deebloo tried ngxs 2.0.0-rc.8 and unfortunately same issue still exist.
My workaround is edit node_modules/@angular/cli/models/webpack-configs/production.js and comment out UglifyJSPlugin https://github.com/angular/angular-cli/blob/1.7.x/packages/@angular/cli/models/webpack-configs/production.ts#L160-L178 before running build

[crcarrick]

@deebloo he's saying that this selector @Select('auth.authMode') private _mode$: Observable<AuthMode>; isn't working. as you can see he's using a string in the selector.

he defines his auth state as:

@State<AuthStateModel>({
  defaults: {
    isLoggedIn: false,
    profile: {},
    authMode: AuthMode.ImplicitFLow
  }
})
export class AuthState {

He is not providing a name property to the @State decorator there so it's being inferred by the class name. unless you guys have some sort of solution to the AuthState class name being minified then I would be willing to bet that that is the problem.

@xmlking correct me if I'm misreading and that selector is not in fact the one that is giving you trouble.

[deebloo]

@crcarrick good catch. @xmlking if you manually add the name to the State decorator does it work? @amcdnl if this is the case we might have to ditch looking up the name of the state manually. We can't count on every using the state class as the selector.

[xmlking]

it works. thanks @crcarrick @deebloo

@State<AuthStateModel>({
  name: 'auth',
  defaults: {
    isLoggedIn: false,
    profile: {},
    authMode: AuthMode.ImplicitFLow
  }
})
export class AuthState {

[crcarrick]

@xmlking No prob. @deebloo Tricky one. I only saw it because I had a similar issue at work with trying to use class names to set default css classes on components

[deebloo]

We will talk about the issue. I also bet it would work when using the state
class as the selector instead of the string.

On Sun, Mar 18, 2018, 5:26 PM Chris Carrick [e-mail]
wrote:

@deebloo https://github.com/deebloo No prob. Tricky one. I only saw it
because I had a similar issue at work with trying to use class names to set
default css classes on components

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/amcdnl/ngxs/issues/72#issuecomment-374049502, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AGQnJUevgx6qvxUiYVzmNwsXxaN2UZXtks5tftEagaJpZM4SrYCU
.

[xmlking]

new code has been published @ https://xmlking.github.io/nx-starter-kit/index.html without manual patching Angular-CLI UglifyJSPlugin code.

[crcarrick]

@deebloo I would think so. You'll probably only run into issues with using string selectors on inferred state names and vice versa, providing a name string to the State decorator and then trying to use the class name as a selector.

[deebloo]

Yeah I think we will have to require a name.

[amcdnl]

I'm surprised its doing that with the decorators, things are usually preserved when using them. Maybe more black magic on Angular's behalf there.

[rbsloot]

If you want to let the product build work for @Action as well, you will need to add a static readonly type = 'ActionClassName' to the action class implementation.

Example:

export class YourActionClass {
    static readonly type = 'YourActionClass';

    constructor(payload: any) {}
}

If you do not add the static type variable your @Action decorators might not work when mangled by UglifyJS.

---

Could somebody add this to the Action documentation, because there is no mention of this type property there

[deebloo]

@rbsloot. This should be fixed in master so that it does not require the static type

[rbsloot]

Thank you for the comment. I tried the 2.1.0-beta.9 version and it seems to work here without the static type variable which is very nice.

I noticed that the Redux devtools are only showing [object Object] as the action name now, for each action. I don't think this is intended.

[deebloo]

Yes that would not be intentional. I'll look into it

On Wed, Apr 4, 2018, 7:43 AM Remi [e-mail] wrote:

Thank you for the comment. I tried the 2.1.0-beta.9 version and it seems
to work here without the static type variable which is very nice.

I noticed that the Redux devtools are only showing [object Object] as the
action name now, for each action. I don't think this is intended.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/ngxs/store/issues/72#issuecomment-378571310, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AGQnJexXDPS44xYemNo5a32kyHPVLucEks5tlLG8gaJpZM4SrYCU
.

[amcdnl]

@rbsloot - added to docs :)

[thaoula]

Hey guys,

Awesome framework!!! I am currently in the process of replacing NGRX in a rather big application.

I have just done a production build and noticed the issue described. The Actions are being mangled because of uglify and the application breaks.

I am using v2.0.0 because the latest version seems to 2.1.0 dev (nightly builds). The current build does not seem to work. DevTools shows [object Object] and i get random toString errors.

Adding a static type property on the Action resolves the issue for v2.0.0. I am guessing this should not be the case going forward.

When do expect to release a stable build of 2.1.0?

Regards,
Tarek

[deebloo]

We took a tab at not requiring the type peoperty. The next release will require it.

[deebloo]

Stab*

[deebloo]

*property

[thaoula]

Ok, so I should add the tile to all of the actions.

When is the next release?