DEV Community

Cover image for Angular Ivy: Overcome the first obstacles
negue
negue

Posted on

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

@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

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>;
Enter fullscreen mode Exit fullscreen mode

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. :)

Top comments (3)

Collapse
 
radubl profile image
Radu Blana

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

Collapse
 
negue profile image
negue

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

Collapse
 
radubl profile image
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 "../".