Angular Ivy: Overcome the first obstacles

This is a list of Ivy-related issues that occured to me, while trying out Ivy on an already existing Angular (7) App, after upgrading to 9.0.0-next.2.

After the initial needed changes of upgrade notes I stumbled upon these issues:

1. Unable to write a reference to {X} from {Y}

I had a library (with using a path-alias) which exported multiple modules from directories (lower than src/lib/{name}/) and on the first ivy-try this issue occurred.

At first I tried to allow wildcard alias @my/lib-name/subfolder and export each subfolder with its own barrel. While that worked on one module, it had to be done on each sub-module. After some luck I found this:

Solution 🎉

Add "rootDir": ".", to the "compilerOptions" in your {project-root}/tsconfig.json.

Source:

Comment for #29361

rt-gavrilov commented on Jul 12, 2019

@p3x-robot this works in my case:

1. angular 8.2.0-next.1
2. appending "rootDir": "." to the compilerOptions in the root tsconfig.json
3. using index.ts like this:

"paths": {
    "@libs/api": ["libs/api/src/index.ts"],

BTW, thank you guys @pburkindine @james-criscuolo, you're my favorite

View on GitHub

2. Cannot combine @Input decorators with query decorators

This was a weird issue (for me). Even after finding some posts on GitHub/Stackoverflow, the answers didn't really made sense (or I just didn't find the "right" ones. 😄)

To figure it out, I added a breakpoint at the error to see what property-name is used in the argument call. Once found, I saw what I did wrong in my code.

I somehow had this in my component, don't know how I got there 😄 :

  @Input()
  @ContentChild('template', {static: true})
  itemTemplate: TemplateRef<ElementRef>;

Solution 🎉

So if you have an @Input() and @ContentChild() (probably also @ViewChild()) .. choose one! :)

Thankfully those were the only ones I (yet) had. I'll continue to update this post, if I come across others.

If you also had any other weird issues, please comment. :)

Comments

[Radu Blana]

I made an account on this website just so I could say Thank you!

[negue]

Oh wow! Thank you !! I'm glad it still helps people! I would've thought those kind of issues were already fixed / improved :)

[Radu Blana]

My use-case was a monorepo with 2 separate angular apps and one shared library. While I had path aliases for imports from the shared library so typescript would know where to find all relevant files, angular did not know to follow those aliased paths, prompting me with the confusing Unable to write a reference to {X} from {Y} error. The solution was to set rootDir to "../".