UIrouter compile error with Angular Ivy

[jr01]

Hi!

When using Angular Ivy compiler ng build --prod fails with

ERROR in src/app/app.module.ts(12,12): error TS-991010: Value at position 1 in the NgModule.importss of AppModule is not a reference: [object Object]

The ivy-ngcc compiler gives some warnings that could be related:

Compiling @uirouter/core : module as esm5
Warning: Unknown member type: "[key: string]: any;
Compiling @uirouter/angular : module as esm5
Warning: Unknown member type: "[key: string]: any;

Here is a github repo to reproduce the issue uirouterivy and this commit is all that was done on top of a ng new uirouterivy .
Steps to reproduce the issue:

git clone https://github.com/jr01/uirouterivy
cd uirouterivy
npm install
ng build --prod

It works fine w/o Angular Ivy:

git checkout 456833
ng build --prod

[justin-masse]

I'm experiencing the same thing when importing a non angular module into app.module.

[zhangxiang93]

Same problem

[mkoczorowski]

same here

[christopherthielen]

Thank you for this issue with clear reproduction steps. I will take a look this weekend!

[pradeepsr029]

hi same problem here. angular 8 ivy compiler
Value at position 2 in the NgModule.importss of AppModule is not a reference: [object Object]

[christopherthielen]

I played around with this a bit over the weekend. I think the solution to this may be to use ng-packagr to create a npm package that conforms to the angular package format.

This may require a break in compatibility with Angular v5 but that's OK. We would need another major release of ui-router for Angular (version 5.0.0)

[christopherthielen]

update: I was able to build the package using ng-packagr and added ui-router to a brand new "ShinyIvyApp". However, I ran into troubles trying to update the sample-app-angular to use ivy.

[oBusk]

@christopherthielen

update: I was able to build the package using ng-packagr and added ui-router to a brand new "ShinyIvyApp". However, I ran into troubles trying to update the sample-app-angular to use ivy.

What issues did you have? Got the WIP somewhere?

[mkoczorowski]

@christopherthielen do we have any progress on this issue ? Angular 9 is round the corner which is ivy. It would be a real shame we ui-router cannot support this.

[christopherthielen]

here's the branch with ng-packagr support

https://github.com/ui-router/angular/compare/ng-packagr?expand=1

To test this locally, I'm using https://github.com/whitecolor/yalc as a local package publisher.

yarn global install yalc

Build @uirouter/angular locally using ng-packagr:

npx ng-packagr -p package.json

Publish the dist folder locally using yalc:

cd dist
yalc publish

Now add it to your downstream app using yalc.

cd <myangularapp>
yalc add @uirouter/angular
yarn install

Yarn will complain about missing peer dependencies, so also add the two upstream uirouter dependencies.

yarn add @uirouter/[email protected]
yarn add @uirouter/[email protected]

[jr01]

So I tried the ng-packagr branch with the app from my initial post and I got it to work.

Here is what I did:

For @uirouter/angular

• git clone https://github.com/ui-router/angular . in folder C:\custom_npm\@uirouter\angular
• git checkout ng-packagr
• npm install
• ng-packagr -p package.json

For the app

• Get the app: git clone https://github.com/jr01/uirouterivy .
• Update Angular to v8 latest: ng update @angular/cli @angular/core rxjs
• Remove node_modules folder: rd /s/q node_modules
• npm install
• Modified package.json

    "@uirouter/core": "5.0.23",
    "@uirouter/rx": "0.5.0",
    "@uirouter/angular": "C:/custom_npm/@uirouter/angular/dist",

• Modified angular.json
  set "preserveSymlinks": true, as suggested here

• ng serve works :-)

• Applied some of the @uirouter/angular Hello World example and confirmed some simple routing works :-)

Here is my ng-packagr testing branch for the app: https://github.com/jr01/uirouterivy/compare/ng-packagr?expand=1

I'll do some more testing, final goal is to get an ngupgrade + @uirouter/angular-hybrid application to work with Angular 9.

Many thanks so far @christopherthielen 🥇

[dannyskoog]

@jr01 That sounds great!

Btw - you state that you used latest Angular 8. Why not latest beta (9.0.0-next.6)?

[dannyskoog]

@christopherthielen Would you by any chance have a rough idea of when an Ivy compatible version 5 of UI Router could be released? (i.e. october/november versus later)

[christopherthielen]

I've made more some progress

I'm not going to make any promises on timing of an ivy compatible release, but things are looking pretty good

git checkout ivy
yarn install
cd shinyivyapp
yarn install
npm run develop

[dannyskoog]

I’m more than fine with that answer @christopherthielen. Sounds good and thanks for your hard (and appreciated) work!

[christopherthielen]

Looks like we'll be dropping support for Angular versions 7 and below. I was surprised to learn that Angular 8 (without ivy) is also able to lazy load without the ROUTES token from @angular/router (i.e., this got fixed angular/angular-cli#9343)

[mgechev]

Hi @christopherthielen, is there anything else blocking you from releasing the Ivy compatible version? We'll be happy to help if there's anything we can do!

[christopherthielen]

@mgechev thanks for reaching out! I think code-wise, ui-router ivy branch is ready to release. I just want to update docs and examples first.

[christopherthielen]

Released v6.0.0 https://github.com/ui-router/angular/releases/tag/6.0.0

[petebacondarwin]

Great @christopherthielen - can you release @uirouter/angular-hybrid too? Currently that is pinned to use @uirouter/angular@5 so it is still broken with ivy.

[wawyed]

@petebacondarwin I'm working on updating it.

[christopherthielen]

published https://github.com/ui-router/angular-hybrid/releases/tag/10.0.0

[oBusk]

I'm getting

Compiling @uirouter/core : main as commonjs
Compiling @uirouter/core : module as esm5
Compiling @uirouter/angular : fesm2015 as esm2015
Warning: Unknown member type: "[key: string]: any;
Compiling @uirouter/angular : fesm5 as esm5
Compiling @uirouter/angular : esm2015 as esm2015
Compiling @uirouter/angular : esm5 as esm5
Compiling @uirouter/angular : main as umd
Compiling @uirouter/angular-hybrid : fesm2015 as esm2015
No suitable injection token for parameter 'ref' of class 'UIViewNgUpgrade'.
no type or decorator

when running ivy-ngcc with versions

"@uirouter/angular": "^6.0.1",
"@uirouter/angular-hybrid": "^10.0.0",
"@uirouter/angularjs": "^1.0.23",
"@uirouter/core": "^6.0.1",
"@uirouter/rx": "^0.6.4",

[petebacondarwin]

@oBusk - if you are using ivy-ngcc then you must be on an older version of Angular. Can you try with the most recent (yarn add @angular/compiler-cli@next, etc) - in which case the binary is now called ngcc. If it still erroring, let me know and I will look into it.

[oBusk]

@petebacondarwin Oh! Thanks for that! I had an outdated branch for ivy.

I got rid of that, got further, but now running into

ERROR in Symbol UIRouterModule declared in C:/MY_PROJECT/node_modules/@uirouter/angular/uiRouterNgModule.d.ts is not exported from @uirouter/angular-hybrid (import into C:/MY_PROJECT/src/app/cool-module/cool-module.module.ts)

I don't see any other option for importing UIRouterUpgradeModule from angular-hybrid?
I created an issue for it (ui-router/angular-hybrid#381), seems off-topic for this issue.

[wawyed]

What are the contents of cool-module.module.ts ?

[oBusk]

@wawyed The issue was that I was not using angular v9 release candidate which is required to run ivy with @uirouter/angular-hybrid. See ui-router/angular-hybrid#381 (comment)

However @uirouter/angular-hybrid has another issue; ui-router/angular-hybrid#382