Flex-layout: [Ivy] rewrite directives in Ivy after stable release

Created on 21 Jan 2019 · 11Comments · Source: angular/flex-layout

Design Discussion

As mentioned in https://github.com/angular/flex-layout/issues/1002#issuecomment-455967676, when Ivy is stable, we can use this issue to track rewriting the library with Ivy-specific features.

Original Report

Bug Report

Unable to enable Ivy to project.

What is the expected behavior?

should be able to enable Ivy

What is the current behavior?

Error

What are the steps to reproduce?

create new project with --experimental-ivy

ng new ngx-starter-kit  --prefix=ngx  --experimental-ivy
ng add @angular/material
npm i @angular/flex-layout
ng serve

Error when dev server started

Compiling @angular/flex-layout/extended - fesm2015
Error: Failed to resolve @Directive.inputs
    at parseFieldArrayValue (/ngx-starter-kit/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/directive.js:251:19)
    at parseFieldToPropertyMapping (/ngx-starter-kit/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/directive.js:261:26)
    at extractDirectiveMetadata (/ngx-starter-kit/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/directive.js:102:30)
    at DirectiveDecoratorHandler.analyze (/ngx-starter-kit/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/directive.js:43:35)
    at DecorationAnalyzer.analyzeClass (/ngx-starter-kit/node_modules/@angular/compiler-cli/src/ngcc/src/analysis/decoration_analyzer.js:105:30)
    at /ngx-starter-kit/node_modules/@angular/compiler-cli/src/ngcc/src/analysis/decoration_analyzer.js:87:87
    at Array.map (<anonymous>)
    at DecorationAnalyzer.analyzeFile (/ngx-starter-kit/node_modules/@angular/compiler-cli/src/ngcc/src/analysis/decoration_analyzer.js:87:51)
    at /ngx-starter-kit/node_modules/@angular/compiler-cli/src/ngcc/src/analysis/decoration_analyzer.js:76:59
    at Array.map (<anonymous>)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `ivy-ngcc`
npm ERR! Exit status 1

What is the use-case or motivation for changing an existing behavior?

trying to test Ivy 's capability to produce smaller bundles

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

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

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.13.0-beta.0
@angular-devkit/build-angular      0.13.0-beta.0
@angular-devkit/build-ng-packagr   0.13.0-beta.0
@angular-devkit/build-optimizer    0.13.0-beta.0
@angular-devkit/build-webpack      0.13.0-beta.0
@angular-devkit/core               7.2.2
@angular-devkit/schematics         7.2.2
@angular/cdk                       7.2.1
@angular/cli                       7.3.0-beta.0
@angular/flex-layout               7.0.0-beta.23
@angular/material                  7.2.1
@angular/pwa                       0.12.2
@ngtools/json-schema               1.1.0
@ngtools/webpack                   7.3.0-beta.0
@schematics/angular                7.2.2
@schematics/update                 0.13.0-beta.0
ng-packagr                         4.6.0
rxjs                               6.3.3
typescript                         3.1.6
webpack                            4.28.4

Is there anything else we should know?

P5 discussion

Source

xmlking

👍16

Most helpful comment

I don't think it's unreasonable to say that the onus here is on the Ivy compiler, since it is meant to be backwards-compatible. That is: there's nothing we can do to fix this issue, it has to be fixed on angular/angular (which they are actively working to do).

That being said, I'm going to keep this issue open so that when Ivy is stable, we can use this to track rewriting the library with Ivy.

CaerusKaru on 21 Jan 2019

👍8

All 11 comments

That being said, I'm going to keep this issue open so that when Ivy is stable, we can use this to track rewriting the library with Ivy.

CaerusKaru on 21 Jan 2019

👍8

Any update now that Angular 8 arrived?

When trying to build my project with "angularCompilerOptions": {"enableIvy": true} in tsconfig.app.json I get errors.

However the compiling process looks fine:

...

Compiling @angular/flex-layout/core : es2015 as esm2015

Compiling @angular/flex-layout/extended : es2015 as esm2015

Compiling @angular/flex-layout/flex : es2015 as esm2015

Compiling @angular/flex-layout/grid : es2015 as esm2015

Compiling @angular/flex-layout : es2015 as esm2015

...

Here are the errors:

ERROR in __ng_typecheck__.ts(112,62): error TS2344: Type '"fxLayout" | "fxLayout.xs" | "fxLayout.sm" | "fxLayout.md" | "fxLayout.lg" | "fxLayout.xl" | "fxLayout.lt-sm" | "fxLayout.lt-md" | "fxLayout.lt-lg" | "fxLayout.lt-xl" | "fxLayout.gt-xs" | "fxLayout.gt-sm" | "fxLayout.gt-md" | "fxLayout.gt-lg"' does not satisfy the constraint '"ngOnChanges" | "activatedValue" | "ngOnDestroy"'.
  Type '"fxLayout"' is not assignable to type '"ngOnChanges" | "activatedValue" | "ngOnDestroy"'.
__ng_typecheck__.ts(113,65): error TS2344: Type '"fxLayoutGap" | "fxLayoutGap.xs" | "fxLayoutGap.sm" | "fxLayoutGap.md" | "fxLayoutGap.lg" | "fxLayoutGap.xl" | "fxLayoutGap.lt-sm" | "fxLayoutGap.lt-md" | "fxLayoutGap.lt-lg" | ... 4 more ... | "fxLayoutGap.gt-lg"' does not satisfy the constraint '"ngOnChanges" | "activatedValue" | "ngOnDestroy" | "ngAfterContentInit"'.
  Type '"fxLayoutGap"' is not assignable to type '"ngOnChanges" | "activatedValue" | "ngOnDestroy" | "ngAfterContentInit"'.
__ng_typecheck__.ts(115,61): error TS2344: Type '"fxFlex" | "fxFlex.xs" | "fxFlex.sm" | "fxFlex.md" | "fxFlex.lg" | "fxFlex.xl" | "fxFlex.lt-sm" | "fxFlex.lt-md" | "fxFlex.lt-lg" | "fxFlex.lt-xl" | "fxFlex.gt-xs" | "fxFlex.gt-sm" | "fxFlex.gt-md" | "fxFlex.gt-lg"' does not satisfy the constraint '"ngOnChanges" | "activatedValue" | "ngOnDestroy" | "shrink" | "grow"'.
  Type '"fxFlex"' is not assignable to type '"ngOnChanges" | "activatedValue" | "ngOnDestroy" | "shrink" | "grow"'.
__ng_typecheck__.ts(116,66): error TS2344: Type '"fxFlexAlign" | "fxFlexAlign.xs" | "fxFlexAlign.sm" | "fxFlexAlign.md" | "fxFlexAlign.lg" | "fxFlexAlign.xl" | "fxFlexAlign.lt-sm" | "fxFlexAlign.lt-md" | "fxFlexAlign.lt-lg" | ... 4 more ... | "fxFlexAlign.gt-lg"' does not satisfy the constraint '"ngOnChanges" | "activatedValue" | "ngOnDestroy"'.
  Type '"fxFlexAlign"' is not assignable to type '"ngOnChanges" | "activatedValue" | "ngOnDestroy"'.

But I'm not sure if this library is the issue or my code, because I don't understand what the error messages want to tell me 😄

So far I can tell, that all fxFlex errors disappear when I remove all fx directives from my code. The error messages above are coming from this little piece of template code:

<mat-card-content fxLayout="column" fxLayoutGap="8px">
  <div fxLayout="row" fxLayoutGap="8px">
      <mat-icon fxFlex fxFlexAlign="center">person</mat-icon>
      <mat-form-field fxFlex="grow">
        <input matInput placeholder="Email" [formControl]="email">
      </mat-form-field>
  </div>
  <div fxLayout="row" fxLayoutGap="8px">
    <mat-icon fxFlex fxFlexAlign="center">lock</mat-icon>
    <mat-form-field fxFlex="grow">
      <input type="password" matInput placeholder="Password" [formControl]="password">
    </mat-form-field>
  </div>
</mat-card-content>

benneq on 4 Jun 2019

@benneq See https://github.com/angular/angular/issues/30114. I'm also waiting for flex-layout to be fixed.

wynfred on 4 Jun 2019

👍7

¿Tiene alguna solución en este momento?

ERROR in __ng_typecheck__.ts(55,63): error TS2344: Type '"fxLayout" | "fxLayout.xs" | "fxLayout.sm" | "fxLayout.md" | "fxLayout.lg" | "fxLayout.xl" | "fxLayout.lt-sm" | "fxLayout.lt-md" | "fxLayout.lt-lg" | "fxLayout.lt-xl" | "fxLayout.gt-xs" | "fxLayout.gt-sm" | "fxLayout.gt-md" | "fxLayout.gt-lg"' does not satisfy the constraint '"ngOnChanges" | "ngOnDestroy" | "activatedValue"'.
  Type '"fxLayout"' is not assignable to type '"ngOnChanges" | "ngOnDestroy" | "activatedValue"'.
__ng_typecheck__.ts(56,68): error TS2344: Type '"fxLayoutAlign" | "fxLayoutAlign.xs" | "fxLayoutAlign.sm" | "fxLayoutAlign.md" | "fxLayoutAlign.lg" | "fxLayoutAlign.xl" | "fxLayoutAlign.lt-sm" | "fxLayoutAlign.lt-md" | ... 5 more ... | "fxLayoutAlign.gt-lg"' does not satisfy the constraint '"ngOnChanges" | "ngOnDestroy" | "activatedValue"'.
  Type '"fxLayoutAlign"' is not assignable to type '"ngOnChanges" | "ngOnDestroy" | "activatedValue"'.
__ng_typecheck__.ts(57,66): error TS2344: Type '"fxLayoutGap" | "fxLayoutGap.xs" | "fxLayoutGap.sm" | "fxLayoutGap.md" | "fxLayoutGap.lg" | "fxLayoutGap.xl" | "fxLayoutGap.lt-sm" | "fxLayoutGap.lt-md" | "fxLayoutGap.lt-lg" | ... 4 more ... | "fxLayoutGap.gt-lg"' does not satisfy the constraint '"ngOnChanges" | "ngAfterContentInit" | "ngOnDestroy" | "activatedValue"'.
  Type '"fxLayoutGap"' is not assignable to type '"ngOnChanges" | "ngAfterContentInit" | "ngOnDestroy" | "activatedValue"'.
__ng_typecheck__.ts(71,66): error TS2344: Type '"fxShow" | "fxShow.print" | "fxShow.xs" | "fxShow.sm" | "fxShow.md" | "fxShow.lg" | "fxShow.xl" | "fxShow.lt-sm" | "fxShow.lt-md" | "fxShow.lt-lg" | "fxShow.lt-xl" | "fxShow.gt-xs" | ... 17 more ... | "fxHide.gt-lg"' does not satisfy the constraint '"ngOnChanges" | "ngAfterViewInit" | "ngOnDestroy" | "activatedValue"'.
  Type '"fxShow"' is not assignable to type '"ngOnChanges" | "ngAfterViewInit" | "ngOnDestroy" | "activatedValue"'.

devpala on 18 Jun 2019

Do we consider Ivy stable-ish now that Angular 9 is in RC? Looking for a roadmap of Angular 9 support as this package is one of the blockers upgrading to Angular 9 in my project (not an immediate issue just trying it out to see what we will need to do it).

biltongza on 4 Nov 2019

@biltongza Flex Layout is fully Ivy-compatible as of v8.0.0-beta.27. ngcc will convert the library into a suitable Ivy format when you compile your application. This issue is mostly about taking advantage of new Ivy features to attempt to reduce the size and complexity of the library.

CaerusKaru on 4 Nov 2019

👍2

We're getting this when following the update instructions. I think there's a problem with the dot in the middle? fxLayout.xs:

ERROR in ../../libs/ui/src/lib/formly/flex-layout-type/formly-flex-layout-type.ts:10:7 - error TS1117: An object literal cannot have multiple properties with the same name in strict mode.

10       [fxLayout.xs]="fxLayoutXs"
         ~~~~~~~~~~~~~~~~~~~~~~~~~~
../../libs/ui/src/lib/formly/flex-layout-type/formly-flex-layout-type.ts:12:7 - error TS1117: An object literal cannot have multiple properties with the same name in strict mode.

12       [fxLayoutGap.xs]="fxLayoutGapXs"
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../../libs/ui/src/lib/formly/flex-layout-type/formly-flex-layout-type.ts:10:7 - error TS2349: This expression is not callable.
  Type '{ fxLayout: any; (Missing): any; }' has no call signatures.

10       [fxLayout.xs]="fxLayoutXs"
         ~~~~~~~~~~~~~~~~~~~~~~~~~~
../../libs/ui/src/lib/formly/flex-layout-type/formly-flex-layout-type.ts:10:7 - error TS18004: No value exists in scope for the shorthand property 'fxLayout'. Either declare one or provide an initializer.

10       [fxLayout.xs]="fxLayoutXs"
         ~~~~~~~~~~~~~~~~~~~~~~~~~~
../../libs/ui/src/lib/formly/flex-layout-type/formly-flex-layout-type.ts:12:7 - error TS2349: This expression is not callable.
  Type '{ fxLayoutGap: any; (Missing): any; }' has no call signatures.

12       [fxLayoutGap.xs]="fxLayoutGapXs"
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../../libs/ui/src/lib/formly/flex-layout-type/formly-flex-layout-type.ts:12:7 - error TS18004: No value exists in scope for the shorthand property 'fxLayoutGap'. Either declare one or provide an initializer.

12       [fxLayoutGap.xs]="fxLayoutGapXs"
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Versions:

$ ng v
Angular CLI: 9.0.0-rc.0
Node: 10.16.0
OS: darwin x64
Angular: 9.0.0-rc.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.3
@angular-devkit/build-angular     0.900.0-rc.0
@angular-devkit/build-optimizer   0.900.0-rc.0
@angular-devkit/build-webpack     0.900.0-rc.0
@angular-devkit/core              9.0.0-rc.0
@angular-devkit/schematics        8.3.3
@angular/cdk                      8.2.3
@angular/flex-layout              8.0.0-beta.27
@angular/material                 8.2.3
@ngtools/webpack                  9.0.0-rc.0
@nguniversal/common               8.1.1
@nguniversal/express-engine       8.1.1
@schematics/angular               8.3.3
@schematics/update                0.900.0-rc.0
rxjs                              6.5.3
typescript                        3.6.4
webpack                           4.41.2

intellix on 4 Nov 2019

👍2

@intellix please open a new issue in angular/angular as that failure is not related to this issue. Also please reference https://github.com/angular/angular/issues/32496 and https://github.com/angular/angular/issues/32099 in your new issue.

Splaktar on 4 Nov 2019

I get the same issue as @intellix that's why I asked :)

biltongza on 5 Nov 2019

Created @biltongza @Splaktar https://github.com/angular/angular/issues/33590

intellix on 5 Nov 2019

👍2

I had yesterday same error @intellix reported. I remember similar errors were present during Angular v7 to v8 passage. Probably at that time its cause was a different one yet it would be great if this project had a test procedure to catch them on build time and report.

Update:
Today I upgraded dependencies to rc.4
No more errors 🥂💪😀👏👏