Support for Angular v8

[naveedahmed1]

Bug Report

What is the expected behavior?

It should work without any error and should be compatible with latest version of Angular.

What is the current behavior?

After upgrading my app to Angular 8.0.0-beta.6. I started receiving below errors:

core.js:4699 ERROR TypeError: this._delegate.setNgClass is not a function
    at NgClass.set [as ngClass] (common.js:3241)
    at DefaultClassDirective.push../node_modules/@angular/flex-layout/esm5/extended.es5.js.ClassDirective.updateWithValue (extended.es5.js:207)
    at MediaMarshaller.push../node_modules/@angular/flex-layout/esm5/core.es5.js.MediaMarshaller.updateElement (core.es5.js:3309)
    at MediaMarshaller.push../node_modules/@angular/flex-layout/esm5/core.es5.js.MediaMarshaller.setValue (core.es5.js:3197)
    at DefaultClassDirective.push../node_modules/@angular/flex-layout/esm5/core.es5.js.BaseDirective2.setValue (core.es5.js:605)
    at core.es5.js:443
    at Array.forEach (<anonymous>)
    at DefaultClassDirective.push../node_modules/@angular/flex-layout/esm5/core.es5.js.BaseDirective2.ngOnChanges (core.es5.js:437)
    at checkAndUpdateDirectiveInline (core.js:17257)
    at checkAndUpdateNodeInline (core.js:25086)
defaultErrorLogger @ core.js:4699
8core.js:4699 ERROR TypeError: this._delegate.applyChanges is not a function
    at NgClass.push../node_modules/@angular/common/fesm5/common.js.NgClass.ngDoCheck (common.js:3246)
    at DefaultClassDirective.push../node_modules/@angular/flex-layout/esm5/extended.es5.js.ClassDirective.ngDoCheck (extended.es5.js:225)
    at checkAndUpdateDirectiveInline (core.js:17264)
    at checkAndUpdateNodeInline (core.js:25086)
    at checkAndUpdateNode (core.js:25048)
    at prodCheckAndUpdateNode (core.js:25589)
    at Object.eval [as updateDirectives] (MyComponent.ngfactory.js:112)
    at Object.updateDirectives (core.js:25377)
    at checkAndUpdateView (core.js:25030)
    at callViewAction (core.js:25271)

When I downgraded the package @angular/common to 8.0.0-beta.5 it started working fine.

I initially thought I should report this error to @angular/flex-layout repo, but then I thought that since downgrading @angular/common to 8.0.0-beta.5 fixes problem, it could be an issue with @angular/common package. Therefore I opened the issue on Angular repo angular/angular#29088

Later I was informed by the Angular team that the issue is with the Angular Flex-Layout.

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

Angular: 8.0.0-beta.6

[CaerusKaru]

Flex Layout won't support Angular v8 until Angular Material does. I'll keep this open as a tracking issue.

[naveedahmed1]

Angular Material's latest version works without any issue with Angular 8, so wouldn't it be better if the same approach is followed for Angular Flex-Layout?

One more question, does fixing this issue breaks the support of earlier versions of Angular 7.x and Angular Material 7.x.

[CaerusKaru]

Yes, the issue is that Angular Flex Layout uses internal APIs relating to ngClass that are changed in Angular v8. Angular Material may or may not be unaffected, but we can't support a version they don't explicitly support.

[naveedahmed1]

Thanks for the clarification.

[Enngage]

Hello, is there any update regarding issue? Since both Angular & Components libs are in their RC version it would be awesome to be able to use flex-layout.

[darkbasic]

Material just released first RC for Angular 8