DEV Community

loading...
Cover image for Angular Ivy: Overcome the first obstacles

Angular Ivy: Overcome the first obstacles

negue
Full-Stack(s) Developer - likes to optimize `stuff`
・2 min read

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>;

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

Discussion (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 Author

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 "../".