Angular compatibility

[stevenlayne12]

Angular compatibility

[stevenlayne12]

Ah, awesome! Downgrading to v1.x worked! Thanks!

[robertvanhoesel]

I found the culprit which was quit difficult to spot. I do not have a lot of experience with publishing Angular Libraries so spent some time today reading into the spec and such to understand the problem.

TL;DR: The Angular Compiler Linker transforms both backwards compatible ViewEngine libraries as well as partial Ivy Libraries (like this one) to Ivy code. When using it in a custom setup you'd use a babel loader (@angular/compiler-cli/linker/babel). Typically you don't run babel over your node_modules – which is the important part. When using the loader on just our own application, it is able to detect backwards compatible view engine libs and compile them, but fails to detect the newer partial libs. Only when I explicitly configure the loader to include this lib it is able to transform the code.

In depth explanation of the issue

Someone pointed out the error I encountered can be the result of OAT compilation not creating full ivy code for a library. Angular Compatibility Compiler is what transforms the partial style output ("compilationMode": "partial" in tsconfig) on NPM to Ivy. This is typically done by running ngcc and in more recent versions implicitly by the CLI through the Angular Compiler Linker, in custom build pipelines you use the Babel plugin @angular/compiler-cli/linker/babel.

In the debug logs I noticed ngx-tiptap is not being picked up by the Compatibility Compiler, so I suspected something was going wrong there.

When comparing the lib to others we use, inspecting the published package.json, it is missing the metadata entry point and file, which should point to the projects metadata.json used by the OAT compiler (Spec) – apparently this spec is not taking in account the new Partial Ivy libs.

When creating a new lib in Angular 12, the defaults are no longer configured to output these files. Instead, the compiler linker should be able to detect and pick up partial style libs without the need for metadata output.

Now the linker is unable to detect the lib as needing to be compiled to Ivy and is ignored. Unless we specifically run the babel-loader over the libraries we want compiled, it stays like it is and outputs runtime errors, like the once shared above.

I created an issue in the Angular project angular/angular#42677 to get their eyes on it.

[sibiraj-s]

You should be able to use v1.x. I haven't tested v1 with older versions of angular but it should be compatible till v9. The only breaking change in v2 is angular compatibility.

[robertvanhoesel]

@sibiraj-s Thanks for bringing TipTap to Angular!

On the topic of compatibility, what do you think causes the below JIT error (on V2)? Today I pushed our codebase across 2 major Angular versions, switching from JIT to AOT, in the hopes it would comply. While this was absolutely worth the effort in itself and happy I found the motivation, it did not help :')

Uncaught Error: Angular JIT compilation failed: '@angular/compiler' not loaded!
  - JIT compilation is discouraged for production use-cases! Consider AOT mode instead.
  - Did you bootstrap using '@angular/platform-browser-dynamic' or '@angular/platform-server'?
  - Alternatively provide the compiler with 'import "@angular/compiler";' before bootstrapping.

We're not using the angular-cli, but rather @ngtools/webpack. I fear the lib is not entirely set up correctly yet, even though looking at the docs it seems it should work.

[sibiraj-s]

@robertvanhoesel I have never used angular application outside CLI. Everything angular recommend to publish a library is followed.

If you could provide a minimal reproducible repo to reproduce this. I will try to fix what could have gone wrong.

[sibiraj-s]

Awesome 🚀

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs and link to relevant comments in the thread.