[Ivy] rewrite directives in Ivy after stable release

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! ngx-starter-kit@0.0.0 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?

[CaerusKaru]

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.

[wynfred]

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