angular: UIrouter compile error with Angular Ivy

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

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 15
Comments: 27 (15 by maintainers)

Most upvoted comments

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

christopherthielen on Nov 12, 2019

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

christopherthielen on Oct 9, 2019

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 🥇

jr01 on Sep 17, 2019

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 on Jun 18, 2019

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

christopherthielen on Jun 14, 2019

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

christopherthielen on Nov 26, 2019

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.

petebacondarwin on Nov 18, 2019

@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?

oBusk on Jul 14, 2019

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.

christopherthielen on Jul 14, 2019

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/rx@0.5.0
yarn add @uirouter/core@5.0.23

christopherthielen on Sep 8, 2019