Flex-layout: Error on ```$ng serve``` after upgrade to Angular 8 and enable Ivy.

Created on 29 May 2019 · 4Comments · Source: angular/flex-layout

Bug Report

What is the expected behavior?

To compile

What is the current behavior?

Does not compile

What are the steps to reproduce?

Upgrade to Angular 8 and enable Ivy

$ cat tsconfig.json 
{
  "compileOnSave": false,
  "compilerOptions": {...},
  "angularCompilerOptions": {
    "enableIvy": true
  }
}

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

Upgrade to Angular 8 and enable Ivy

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

$ ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.0.0
Node: 8.10.0
OS: linux x64
Angular: 8.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, material, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.0
@angular-devkit/build-angular     0.800.0
@angular-devkit/build-optimizer   0.800.0
@angular-devkit/build-webpack     0.800.0
@angular-devkit/core              8.0.0
@angular-devkit/schematics        8.0.0
@angular/flex-layout              8.0.0-beta.26
@ngtools/webpack                  8.0.0
@schematics/angular               8.0.0
@schematics/update                0.800.0
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.30.0

Is there anything else we should know?

$ ng serve
  0% compiling
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

Date: 2019-05-29T21:24:53.803Z
Hash: cb628fba24121c6d85bf
Time: 109606ms
chunk {main} main.js, main.js.map (main) 2.83 MB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 442 kB [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 462 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 2.49 MB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 2.39 MB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 16.6 MB [initial] [rendered]

WARNING in Entry point '@w11k/angular-sticky-things' contains deep imports into 'rxjs/internal/scheduler/animationFrame'. This is probably not a problem, but may cause the compilation of entry points to be out of order.

ERROR in ./node_modules/@angular/flex-layout/__ivy_ngcc__/esm2015/extended.js 133:578
Module parse failed: Unexpected token (133:578)
You may need an appropriate loader to handle this file type.
|     }
| }
> DefaultImgSrcDirective.ngDirectiveDef = ɵngcc0.ɵɵdefineDirective({ type: DefaultImgSrcDirective, selectors: [["img", "src.xs", ""], ["img", "src.sm", ""], ["img", "src.md", ""], ["img", "src.lg", ""], ["img", "src.xl", ""], ["img", "src.lt-sm", ""], ["img", "src.lt-md", ""], ["img", "src.lt-lg", ""], ["img", "src.lt-xl", ""], ["img", "src.gt-xs", ""], ["img", "src.gt-sm", ""], ["img", "src.gt-md", ""], ["img", "src.gt-lg", ""]], factory: function DefaultImgSrcDirective_Factory(t) { return ɵDefaultImgSrcDirective_BaseFactory((t || DefaultImgSrcDirective)); }, inputs: { src.xs: "src.xs", src.sm: "src.sm", src.md: "src.md", src.lg: "src.lg", src.xl: "src.xl", "src.lt-sm": "src.lt-sm", "src.lt-md": "src.lt-md", "src.lt-lg": "src.lt-lg", "src.lt-xl": "src.lt-xl", "src.gt-xs": "src.gt-xs", "src.gt-sm": "src.gt-sm", "src.gt-md": "src.gt-md", "src.gt-lg": "src.gt-lg" }, features: [ɵngcc0.ɵɵInheritDefinitionFeature] });
| const ɵDefaultImgSrcDirective_BaseFactory = ɵngcc0.ɵɵgetInheritedFactory(DefaultImgSrcDirective);
| /*@__PURE__*/ ɵngcc0.ɵsetClassMetadata(DefaultImgSrcDirective, [{
ERROR in ./node_modules/@angular/flex-layout/__ivy_ngcc__/esm2015/flex.js 192:653
Module parse failed: Unexpected token (192:653)
You may need an appropriate loader to handle this file type.
|     }
| }
> DefaultLayoutDirective.ngDirectiveDef = ɵngcc0.ɵɵdefineDirective({ type: DefaultLayoutDirective, selectors: [["", "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", ""]], factory: function DefaultLayoutDirective_Factory(t) { return ɵDefaultLayoutDirective_BaseFactory((t || DefaultLayoutDirective)); }, inputs: { fxLayout: "fxLayout", fxLayout.xs: "fxLayout.xs", fxLayout.sm: "fxLayout.sm", fxLayout.md: "fxLayout.md", fxLayout.lg: "fxLayout.lg", fxLayout.xl: "fxLayout.xl", "fxLayout.lt-sm": "fxLayout.lt-sm", "fxLayout.lt-md": "fxLayout.lt-md", "fxLayout.lt-lg": "fxLayout.lt-lg", "fxLayout.lt-xl": "fxLayout.lt-xl", "fxLayout.gt-xs": "fxLayout.gt-xs", "fxLayout.gt-sm": "fxLayout.gt-sm", "fxLayout.gt-md": "fxLayout.gt-md", "fxLayout.gt-lg": "fxLayout.gt-lg" }, features: [ɵngcc0.ɵɵInheritDefinitionFeature] });
| const ɵDefaultLayoutDirective_BaseFactory = ɵngcc0.ɵɵgetInheritedFactory(DefaultLayoutDirective);
| /*@__PURE__*/ ɵngcc0.ɵsetClassMetadata(DefaultLayoutDirective, [{
ERROR in ./node_modules/@angular/flex-layout/__ivy_ngcc__/esm2015/grid.js 92:719
Module parse failed: Unexpected token (92:719)
You may need an appropriate loader to handle this file type.
|     }
| }
> DefaultGridAlignDirective.ngDirectiveDef = ɵngcc0.ɵɵdefineDirective({ type: DefaultGridAlignDirective, selectors: [["", "gdGridAlign", ""], ["", "gdGridAlign.xs", ""], ["", "gdGridAlign.sm", ""], ["", "gdGridAlign.md", ""], ["", "gdGridAlign.lg", ""], ["", "gdGridAlign.xl", ""], ["", "gdGridAlign.lt-sm", ""], ["", "gdGridAlign.lt-md", ""], ["", "gdGridAlign.lt-lg", ""], ["", "gdGridAlign.lt-xl", ""], ["", "gdGridAlign.gt-xs", ""], ["", "gdGridAlign.gt-sm", ""], ["", "gdGridAlign.gt-md", ""], ["", "gdGridAlign.gt-lg", ""]], factory: function DefaultGridAlignDirective_Factory(t) { return ɵDefaultGridAlignDirective_BaseFactory((t || DefaultGridAlignDirective)); }, inputs: { gdGridAlign: "gdGridAlign", gdGridAlign.xs: "gdGridAlign.xs", gdGridAlign.sm: "gdGridAlign.sm", gdGridAlign.md: "gdGridAlign.md", gdGridAlign.lg: "gdGridAlign.lg", gdGridAlign.xl: "gdGridAlign.xl", "gdGridAlign.lt-sm": "gdGridAlign.lt-sm", "gdGridAlign.lt-md": "gdGridAlign.lt-md", "gdGridAlign.lt-lg": "gdGridAlign.lt-lg", "gdGridAlign.lt-xl": "gdGridAlign.lt-xl", "gdGridAlign.gt-xs": "gdGridAlign.gt-xs", "gdGridAlign.gt-sm": "gdGridAlign.gt-sm", "gdGridAlign.gt-md": "gdGridAlign.gt-md", "gdGridAlign.gt-lg": "gdGridAlign.gt-lg" }, features: [ɵngcc0.ɵɵInheritDefinitionFeature] });
| const ɵDefaultGridAlignDirective_BaseFactory = ɵngcc0.ɵɵgetInheritedFactory(DefaultGridAlignDirective);
| /*@__PURE__*/ ɵngcc0.ɵsetClassMetadata(DefaultGridAlignDirective, [{
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Failed to compile.
ℹ ｢wdm｣: Compiling...

Source