Flex-layout: 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 https://github.com/angular/angular/issues/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

[CaerusKaru]

I've opened a draft PR #1056 to upgrade to v8. There is one issue which is blocking builds, despite passing unit tests. We need to consult with the Core team, which I'll do either during or after ng-conf. Either way, we'll have a v8 version of Layout before the end of the RC period.

[fxck]

I'm getting

ERROR in __ng_typecheck__.ts(20,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 '"ngOnDestroy" | "ngOnChanges" | "activatedValue"'.
Type '"fxLayout"' is not assignable to type '"ngOnDestroy" | "ngOnChanges" | "activatedValue"'.

is that related to me using angular rc.3 and material rc.0?

[bogacg]

Meanwhile for a small v.8 project I'll be using CDK's LayoutModule and vanilla CSS grid instead.

[playground]

It seems to work now with the following updates
"@angular/animations": "^8.0.0-rc.4",
"@angular/cdk": "^8.0.0-rc.1",
"@angular/common": "^8.0.0-rc.4",
"@angular/compiler": "^8.0.0-rc.4",
"@angular/core": "^8.0.0-rc.4",
"@angular/elements": "^8.0.0-rc.4",
"@angular/flex-layout": "^7.0.0-beta.23",
"@angular/forms": "^8.0.0-rc.4",
"@angular/material": "^8.0.0-rc.1",
"@angular/platform-browser": "^8.0.0-rc.4",
"@angular/platform-browser-dynamic": "^8.0.0-rc.4",
"@angular/platform-server": "^8.0.0-rc.4",
"@angular/pwa": "^0.800.0-rc.4",
"@angular/router": "^8.0.0-rc.4",
"@angular/service-worker": "^8.0.0-rc.4",

[Enngage]

@playground, not sure how you tested that, but I still get this._delegate.setNgClass is not a function error with the dependencies you listed...

Nevertheless, the fix for this has been merged and hopefully will be available soon :-)

[fxck]

Still doesn't seem to work.

[fxck]

Looks like angular problem https://github.com/angular/angular/issues/30114

[Splaktar]

Just for clarity, beta.26 supports Angular 8.0.0. The opt-in preview of Ivy is not yet ready and should be announced next week as part of the Angular 8.1.0-next.1 announcement. If you are using this library and want to try Ivy, follow https://github.com/angular/angular/issues/30114 and wait for that to be resolved.

Optionally, you can try Ivy in a project that isn't using this library for now. This would probably be recommended in most cases as Ivy is not yet ready to work with your production apps.

Update: The official Ivy opt-in preview blog post is out.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}