Angular Ivy: Overcome the first obstacles

negue

negue

Posted on August 23, 2019

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

💖 💪 🙅 🚩
negue
negue

Posted on August 23, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related