Ngx-chips: Cannot make a prod build using @​ionic/app-scripts 2.1.3

[jknisley]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
~~[ ] feature request~~ [new feature requests are not considered at this time]
[ ] support request/question

Current behavior

After building an Ionic 2 app (ionic-angular 3.6.0) using @​ionic/app-scripts 2.1.3, the vendor.js file throws an exception on app load:

Uncaught TypeError: Cannot read property 'a' of undefined
    at Object.<anonymous> (vendor.js:1)
    at e (vendor.js:1)
    at Object.<anonymous> (vendor.js:1)
    at e (vendor.js:1)
    at Object.415 (main.js:1)
    at e (vendor.js:1)
    at window.webpackJsonp (vendor.js:1)
    at main.js:1

The actual error is from the reference to v.a at the end of the line below:

p=a([Object(r.Component)({selector:"tag-input-dropdown",templateUrl:"./tag-input-dropdown.template.html"}),c(0,Object(r.Inject)(Object(r.forwardRef)(function(){return v.a}))),u("design:paramtypes",[v.a])],p);

Expected behavior

After a prod build, the Ionic 2 app loads without throwing an exception.

Minimal reproduction of the problem with instructions (if applicable)

1. Create an Ionic 2 app using ionic-angular 3.6.0 and @​ionic/app-scripts 2.1.3.
2. Include ngx-chips 1.5.0 with the necessary imports in the app's @​NgModule.
3. Build the app using ionic-app-scripts build --prod.
4. Attempt to navigate to the app in a browser. Note the exception in vendor.js.

What is the motivation / use case for changing the behavior? (if applicable)

What do you use to build your app?. Please specify the version

@​ionic/app-scripts 2.1.3
ionic-app-scripts build --prod

Angular version:

4.2.0

ngx-chips version:

1.5.0

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

all

[Gbuomprisco]

Not sure if that's the issue, but you need at least v4.2.0 to run ngx-chips. Look at the peer deps.

[jknisley]

Updated to Angular 4.2.0. Problem persists.

[Gbuomprisco]

any idea what v is (if you stop on dev tools exceptions)? Would you be able to provide an online demo? Thanks

[jknisley]

v.a looks like the uglified reference to the TagInputComponent declaration at https://github.com/Gbuomprisco/ngx-chips/blob/master/modules/components/dropdown/tag-input-dropdown.component.ts#L152. I think part (maybe all) of the problem has to do with the aot compilation and the barrel files (which I'm assuming is why you have to use forwardRef in that constructor).

Some issues that seem to be related: https://github.com/angular/angular/issues/13590 and https://github.com/angular/angular/issues/15521. With barrels, it seems the complier has a problem with circular dependences, which forwardRef _can_ workaround, at compile time, but not necessarily at runtime.

I can confirm that an Ionic 2 prod build works if I remove the forwardRef from that constructor, and with all of the component imports updated to avoid the barreled references, everything seems to be working fine.

This is the commit where I made the changes above (ignore the dist files at the top, which I committed so that I could reference my branch instead of npm in the project I'm working on):
https://github.com/jknisley/ngx-chips/commit/272d4daaac812cbd915c2ec66dd5b9a494a82bc4. If you'd like me to make a PR that doesn't include the dist files, just let me know.

[Gbuomprisco]

Hi @jknisley, thanks, that's helpful.

Just tried to remove forwardRef, but it won't run due to the circular dependency. I'm sure i've dealt with this before, but cannot remember the solution :\

[jknisley]

The "fix" in the commit of my previous message seemed to work in practice, but unit tests sure didn't like it. I tried using Injector instead (see https://github.com/jknisley/ngx-chips/commit/3f98d4db3159fbfefd2bd0d79d399d6aca8b7459) and looks like that works just as well and doesn't break any tests.

[jknisley]

The circular dependences though are largely caused by all of the index.ts files that export the other modules. It messes with ngc's ability to sort it all out. We used to do that on all of our projects (it sure is nice to just use import { a, b, c, d } from 'index', vs import { a } from 'here' and import { b } from 'there'), but as our projects grew in size it created a lot of problems, and we found ourselves having to increasingly rely on forwardRef until we got rid of the index files.

[dr1v3]

Error: Unexpected value 'TagInputModule in .../node_modules/ng2-tag-input/dist/modules/tag-input.module.d.ts' imported by the module 'AppModule in .../src/app/app.module.ts'. Please add a @NgModule annotation.

[limpep]

@Gbuomprisco any updates on this?

[Gbuomprisco]

I'll have a deeper look on Sunday

[Veligura]

I have the same trouble while --prod building .

[Gbuomprisco]

v1.5.2 released with @jknisley's proposed fix - is anyone able to check if it works OK?

[limpep]

@Gbuomprisco Just tested it on

@angular/cli: 1.3.0
node: 8.1.2
os: win32 x64
@angular/animations: 4.3.4
@angular/cdk: 2.0.0-beta.8
@angular/common: 4.3.4
@angular/compiler: 4.3.4
@angular/core: 4.3.4
@angular/forms: 4.3.4
@angular/http: 4.3.4
@angular/language-service: 4.3.4
@angular/material: 2.0.0-beta.8
@angular/platform-browser: 4.3.4
@angular/platform-browser-dynamic: 4.3.4
@angular/router: 4.3.4
@angular/cli: 1.3.0
@angular/compiler-cli: 4.3.4

and it is working as expected, Thanks.

[Gbuomprisco]

Thanks to @jknisley :)