Clarity: Angular 9 & Ivy Support

[gnomeontherun]

Describe the bug

Testing Clarity with Ivy enabled throws errors in build process, we need to work through them.

How to reproduce

ng new ivy-test --enable-ivy
ng add @clr/angular

First error is below, but possibly not the last error.

Compiling @clr/angular : fesm2015 as esm2015
Error: In Ivy, decorator metadata must be inline.
    at extractInjectableMetadata (/Volumes/Data/clarity/test/ivy/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/injectable.js:142:23)
    at InjectableDecoratorHandler.analyze (/Volumes/Data/clarity/test/ivy/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/injectable.js:55:27)
    at DecorationAnalyzer.analyzeClass (/Volumes/Data/clarity/test/ivy/node_modules/@angular/compiler-cli/ngcc/src/analysis/decoration_analyzer.js:161:38)
    at /Volumes/Data/clarity/test/ivy/node_modules/@angular/compiler-cli/ngcc/src/analysis/decoration_analyzer.js:104:87
    at Array.map (<anonymous>)
    at DecorationAnalyzer.analyzeFile (/Volumes/Data/clarity/test/ivy/node_modules/@angular/compiler-cli/ngcc/src/analysis/decoration_analyzer.js:104:51)
    at /Volumes/Data/clarity/test/ivy/node_modules/@angular/compiler-cli/ngcc/src/analysis/decoration_analyzer.js:92:59
    at Array.map (<anonymous>)
    at DecorationAnalyzer.analyzeProgram (/Volumes/Data/clarity/test/ivy/node_modules/@angular/compiler-cli/ngcc/src/analysis/decoration_analyzer.js:92:18)
    at Transformer.analyzeProgram (/Volumes/Data/clarity/test/ivy/node_modules/@angular/compiler-cli/ngcc/src/packages/transformer.js:89:57)

Expected behavior

Success!

Versions

App

Clarity 2.0.0-beta.1

Angular CLI: 8.0.0-beta.10
Node: 10.12.0
OS: darwin x64
Angular: 8.0.0-beta.10
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package Version

@angular-devkit/architect 0.800.0-beta.10
@angular-devkit/build-angular 0.800.0-beta.10
@angular-devkit/build-optimizer 0.800.0-beta.10
@angular-devkit/build-webpack 0.800.0-beta.10
@angular-devkit/core 8.0.0-beta.10
@angular-devkit/schematics 8.0.0-beta.10
@ngtools/webpack 8.0.0-beta.10
@schematics/angular 8.0.0-beta.10
@schematics/update 0.800.0-beta.10
rxjs 6.4.0
typescript 3.3.4000
webpack 4.29.6

Device:

• Type: MacBook
• OS: MacOS
• Browser: N/A
• Version: N/A

Additional notes

https://blog.angular.io/its-time-for-the-compatibility-opt-in-preview-of-ivy-38f3542a282f

https://docs.google.com/document/d/1Dije0AsJ0PxL3NaeNPxpYDeapj30b_QC0xfeIvIIzgg/preview

[DwieDave]

Whats the status for this issue?
Im still getting the exact same Error mentioned above and I use the current 2.0.1 Version of every clarity package. (Angular 8.0.3)

[hippee-lee]

This issue is in the backlog. Ivy is opt-in for Angular v8 and the team hasn't had the time to look into this issue yet. Is this something affecting your development?

[DwieDave]

Okay thanks for your reply.
No not really; just wanted to try ivy with an existing project and ran into the error.
And it wasn‘t clear if or when this issue is addressed but thanks for your information!

[webmasters964]

ERROR in In Ivy, decorator metadata must be inline. Angular CLI: 8.1.2 @coryrylan

[gnomeontherun]

Partially blocked by https://github.com/angular/angular/issues/29361.

[spitfjre]

Progress.

[TekSiDoT]

Now blocked by angular/angular#33482

[gnomeontherun]

Interestingly enough, I can run the latest Clarity v2 on Angular 9-next.14 correctly with Ivy. The compilation of Clarity with Ivy is working since this was merged https://github.com/angular/angular/pull/33264.

What is blocked now is updating our project repository to Angular 9. However, as far as I can tell it should work with Angular 9-next.14.

[spitfjre]

Angular 9 with angularCompilerOptions enableIvy and strictTemplates enabled, will result in these kind of errors.

error TS2322: Type 'string' is not assignable to type 'boolean'.

<clr-dropdown-menu *clrIfOpen>

error TS2322: Type 'string' is not assignable to type 'boolean'.

<clr-accordion-content *clrIfExpanded>

[gnomeontherun]

Thanks, we're currently blocked by https://github.com/angular/angular/issues/33659.

[gnomeontherun]

Closed by #4232

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.