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:
- angular 8.2.0-next.1
- appending
"rootDir": "."
to thecompilerOptions
in the roottsconfig.json
- 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. :)
Top comments (3)
I made an account on this website just so I could say Thank you!
Oh wow! Thank you !! I'm glad it still helps people! I would've thought those kind of issues were already fixed / improved :)
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 "../".