Version 10 breaks with angular-cli buildOptimizer+optimization

[oBusk]

So after the upgrade to @uirouter/angular-hybrid@10.0.0, we're getting issues whenever running with --prod. Build is fine, but when running app gets;

TypeError: Cannot read property 'subscribe' of undefined
    at new t (main.41a1ba9f91d11bc569f1.js:formatted:113389)
    at qr (main.41a1ba9f91d11bc569f1.js:formatted:99813)
    at Wr (main.41a1ba9f91d11bc569f1.js:formatted:99756)
    at Bs (main.41a1ba9f91d11bc569f1.js:formatted:101757)
    at Object.Fs [as createEmbeddedView] (main.41a1ba9f91d11bc569f1.js:formatted:101678)
    at e.createEmbeddedView (main.41a1ba9f91d11bc569f1.js:formatted:99454)
    at t.createEmbeddedView (main.41a1ba9f91d11bc569f1.js:formatted:99278)
    at t._updateView (main.41a1ba9f91d11bc569f1.js:formatted:109315)
    at t.set [as ngIf] (main.41a1ba9f91d11bc569f1.js:formatted:109287)
    at Zr (main.41a1ba9f91d11bc569f1.js:formatted:99884)

Which I've managed to identify to be this line in @uirouter/angular.

I set up a simple angular-hybrid example to try to identify the problem, and with this project I get;

main.6b5af00a46ac95f21a36.js:1 Error: [$injector:unpr] Unknown provider: class t{}DirectiveProvider <- class t{}Directive
https://errors.angularjs.org/1.7.9/$injector/unpr?p0=class%20t%7B%7DDirectiveProvider%20%3C-%20class%20t%7B%7DDirective
    at main.6b5af00a46ac95f21a36.js:1
    at main.6b5af00a46ac95f21a36.js:1
    at Object.u [as get] (main.6b5af00a46ac95f21a36.js:1)
    at main.6b5af00a46ac95f21a36.js:1
    at Object.u [as get] (main.6b5af00a46ac95f21a36.js:1)
    at main.6b5af00a46ac95f21a36.js:1
    at t.makeComponentTemplate (main.6b5af00a46ac95f21a36.js:1)
    at t.getTemplate (main.6b5af00a46ac95f21a36.js:1)
    at Object.<anonymous> (main.6b5af00a46ac95f21a36.js:1)
    at main.6b5af00a46ac95f21a36.js:1 "<ui-view class="ng-scope">"

It appears as if UIRouter is trying to render a Angular view as a AngularJS view.

Configurations and their successes

• @angular/*@8.2.14 + @ui-router/angular-hybrid@9.0.0

  • Works
  • --prod Works

• @angular/*@8.2.14 + @ui-router/angular-hybrid@10.0.0

  • Works
  • --prod Does not work
  • optimization: true Works
  • aot: true Works
  • aot: true buildOptimizer: true Works
  • aot: true buildOptimizer: true optimization: true Does not work
  • --prod with buildOptimizer: false Works

• @angular/*@9.0.0-4c.4 + @ui-router/angular-hybrid@10.0.0

  • Works
  • --prod Does not work
  • --prod with buildOptimizer: false Works

• @angular/*@9.0.0-4c.4 + @ui-router/angular-hybrid@10.0.0 with ivy enabled

  • Works
  • --prod, Does not work
  • --prod with buildOptimizer: false Works

I assume it has something to do with the move to ng-packagr, but I don't really know how to investigate what is the issue.

[petebacondarwin]

I looked into this and the problem is that the Angular CLI is configured to build 2015 target, which results in BComponent being declared using the class BComponent { ... } syntax in the final distributable. But AngularJS does not understand how to instantiate such components. It only knows how to instantiate component declared using ES5 syntax (e.g. function BComponent() { ... }.

The workaround is to change the target (https://github.com/oBusk/angular-hybrid-example/blob/master/tsconfig.json#L13) in tsconfig.json to es5.

[oBusk]

Hello @petebacondarwin! With our actual project, we do have and have always had, target: es5. But I went ahead and tried it on the example repo I set up as well. I got the exact same result, so doesn't work with

• @angular/*@8.2.14 + @uirouter/angular-hybrid@10.0.0
• @angular/*@9.0.0-4c.4 + @uirouter/angular-hybrid@10.0.0
• @angular/*@9.0.0-4c.4 + @uirouter/angular-hybrid@10.0.0 with ivy
• @angular/*@9.0.0-4c.4 + @uirouter/angular-hybrid@9.0.0

But does work with

• @angular/*@8.2.14 + @uirouter/angular-hybrid@9.0.0

[petebacondarwin]

Doh! Once I got it working for 8.2.x I didn't look further. Let me try again :-)

[oBusk]

but even with 8.2.X, I can't render the Angular component when i run ng serve --prod? Did you manage to do so?

[petebacondarwin]

Just cloning and trying again now...

[petebacondarwin]

Interestingly if I turn off build optimizations here https://github.com/oBusk/angular-hybrid-example/blob/21fd8bdbac05cf14c7b1ae42e3fc92d4ae6cf2ad/angular.json#L43 then it will render the BComponent with 8.2.x

[petebacondarwin]

Also leaving optimizations on but turning off buildOptimizer also works: here https://github.com/oBusk/angular-hybrid-example/blob/21fd8bdbac05cf14c7b1ae42e3fc92d4ae6cf2ad/angular.json#L51

[oBusk]

Teah my testing found that

• @angular/*@8.2.14 + @ui-router/angular-hybrid@10.0.0
  • Works
  • --prod Does not work
  • optimization: true Works
  • aot: true Works
  • aot: true buildOptimizer: true Works
  • aot: true buildOptimizer: true optimization: true Does not work
  • --prod with buildOptimizer: false Works

So clearly the trouble was with buildOptimizer and optimization. I'm unsure what ng-cli buildOptimizer does, but I assume it pre-executes some part of ui-router, and then optimization renames all variables and something breaks.

[petebacondarwin]

I think the problem is that when optimized the UIViewNgUpgrade component is being anonymized to something like:

        var rv = oi("ui-view-ng-upgrade", qd, nv, {
            name: "name"
        }, {}, [])
          , iv = function() {
            return function() {}
        }()

where iv is the UIViewNgUpgrade component.

[petebacondarwin]

OK, so it seems that the "sideEffects": false property in the published package.json is the problem. Removing this (or setting it to "true") is enough to get the 8.2.x version working for me.

This property is added by ngPackagr automatically if there is nothing telling it that there is a side effect in the package. So the long-term fix is to add "sideEffects": true to the package.json (e.g. before this line: https://github.com/ui-router/angular-hybrid/blob/master/package.json#L54).

[petebacondarwin]

This should fix the problem the next time that @christopherthielen publishes a release - #385

In the meantime the workaround is to write a short postinstall script in your application project to delete the `"sideEffects: false" line from the package.json file.