Flex-layout: ES2015 support

Created on 21 Dec 2018 · 44Comments · Source: angular/flex-layout

Bug Report

What is the expected behavior?

To make FlexLayoutServerModule work under firebase cloud function.

What is the current behavior?

Getting an error after successful deploy to a firebase.

What are the steps to reproduce?

1) Create Angular repo with SSR
2) Add FlexLayout
3) Use firebase to deploy cloud function

functions/package.json

```{
"name": "functions",
"scripts": {
"lint": "tslint --project tsconfig.json",
"build": "tsc",
"serve": "npm run build && firebase serve --only functions",
"shell": "npm run build && firebase functions:shell",
"start": "npm run shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log"
},
"main": "index.js",
"dependencies": {
"@angular/animations": "^7.1.0",
"@angular/cdk": "^7.1.0",
"@angular/common": "^7.1.0",
"@angular/compiler": "^7.1.0",
"@angular/core": "^7.1.0",
"@angular/flex-layout": "^7.0.0-beta.22",
"@angular/forms": "^7.1.0",
"@angular/http": "^7.1.0",
"@angular/platform-browser": "^7.1.0",
"@angular/platform-browser-dynamic": "^7.1.0",
"@angular/platform-server": "^7.1.0",
"@angular/router": "^7.1.0",
"@nguniversal/common": "^7.0.2",
"@nguniversal/express-engine": "^7.0.2",
"@nguniversal/module-map-ngfactory-loader": "^7.0.2",
"@types/smoothscroll-polyfill": "^0.3.0",
"firebase-admin": "^6.4.0",
"firebase-functions": "^2.1.0",
"compression": "^1.7.3",
"core-js": "^2.5.4",
"express": "^4.16.4",
"hammerjs": "^2.0.8",
"rxjs": "^6.3.3",
"smoothscroll-polyfill": "^0.4.3",
"ts-loader": "^5.3.0",
"zone.js": "^0.8.26",
"reflect-metadata": "^0.1.12"
},
"devDependencies": {
"tslint": "^5.11.0",
"typescript": "^3.1.6"
},
"private": true
}

**app.server.module.ts**

```@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ModuleMapLoaderModule,
    ServerTransferStateModule,
    FlexLayoutServerModule,
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

error I am getting
ERROR { Error: Uncaught (in promise): TypeError: this.marshal.init is not a function TypeError: this.marshal.init is not a function at LayoutAlignDirective.BaseDirective2.init (/user_code/node_modules/@angular/flex-layout/bundles/flex-layout-core.umd.js:2416:22) at new LayoutAlignDirective (/user_code/node_modules/@angular/flex-layout/bundles/flex-layout-flex.umd.js:1529:15) at createClass (/user_code/node_modules/@angular/core/bundles/core.umd.js:20747:24) at createDirectiveInstance (/user_code/node_modules/@angular/core/bundles/core.umd.js:20616:24) at createViewNodes (/user_code/node_modules/@angular/core/bundles/core.umd.js:21842:40) at callViewAction (/user_code/node_modules/@angular/core/bundles/core.umd.js:22158:17) at execComponentViewsAction (/user_code/node_modules/@angular/core/bundles/core.umd.js:22077:17) at createViewNodes (/user_code/node_modules/@angular/core/bundles/core.umd.js:21870:9) at createRootView (/user_code/node_modules/@angular/core/bundles/core.umd.js:21756:9) at Object.createProdRootView [as createRootView] (/user_code/node_modules/@angular/core/bundles/core.umd.js:22268:16) at resolvePromise (/user_code/node_modules/zone.js/dist/zone-node.js:814:31) at resolvePromise (/user_code/node_modules/zone.js/dist/zone-node.js:771:17) at /user_code/node_modules/zone.js/dist/zone-node.js:873:17 at ZoneDelegate.invokeTask (/user_code/node_modules/zone.js/dist/zone-node.js:421:31) at Object.onInvokeTask (/user_code/node_modules/@angular/core/bundles/core.umd.js:16192:37) at ZoneDelegate.invokeTask (/user_code/node_modules/zone.js/dist/zone-node.js:420:36) at Zone.runTask (/user_code/node_modules/zone.js/dist/zone-node.js:188:47) at drainMicroTaskQueue (/user_code/node_modules/zone.js/dist/zone-node.js:595:35) at ZoneTask.invokeTask (/user_code/node_modules/zone.js/dist/zone-node.js:500:21) at ZoneTask.invoke (/user_code/node_modules/zone.js/dist/zone-node.js:485:48) rejection: TypeError: this.marshal.init is not a function at LayoutAlignDirective.BaseDirective2.init (/user_code/node_modules/@angular/flex-layout/bundles/flex-layout-core.umd.js:2416:22) at new LayoutAlignDirective (/user_code/node_modules/@angular/flex-layout/bundles/flex-layout-flex.umd.js:1529:15) at createClass (/user_code/node_modules/@angular/core/bundles/core.umd.js:20747:24) at createDirectiveInstance (/user_code/node_modules/@angular/core/bundles/core.umd.js:20616:24) at createViewNodes (/user_code/node_modules/@angular/core/bundles/core.umd.js:21842:40) at callViewAction (/user_code/node_modules/@angular/core/bundles/core.umd.js:22158:17) at execComponentViewsAction (/user_code/node_modules/@angular/core/bundles/core.umd.js:22077:17) at createViewNodes (/user_code/node_modules/@angular/core/bundles/core.umd.js:21870:9) at createRootView (/user_code/node_modules/@angular/core/bundles/core.umd.js:21756:9) at Object.createProdRootView [as createRootView] (/user_code/node_modules/@angular/core/bundles/core.umd.js:22268:16), promise: ZoneAwarePromise { __zone_symbol__state: 0, __zone_symbol__value: TypeError: this.marshal.init is not a function at LayoutAlignDirective.BaseDirective2.init (/user_code/node_modules/@angular/flex-layout/bundles/flex-layout-core.umd.js:2416:22) at new LayoutAlignDirective (/user_code/node_modules/@angular/flex-layout/bundles/flex-layout-flex.umd.js:1529:15) at createClass (/user_code/node_modules/@angular/core/bundles/core.umd.js:20747:24) at createDirectiveInstance (/user_code/node_modules/@angular/core/bundles/core.umd.js:20616:24) at createViewNodes (/user_code/node_modules/@angular/core/bundles/core.umd.js:21842:40) at callViewAction (/user_code/node_modules/@angular/core/bundles/core.umd.js:22158:17) at execComponentViewsAction (/user_code/node_modules/@angular/core/bundles/core.umd.js:22077:17) at createViewNodes (/user_code/node_modules/@angular/core/bundles/core.umd.js:21870:9) at createRootView (/user_code/node_modules/@angular/core/bundles/core.umd.js:21756:9) at Object.createProdRootView [as createRootView] (/user_code/node_modules/@angular/core/bundles/core.umd.js:22268:16) }, zone: Zone { _properties: { isAngularZone: true }, _parent: Zone { _properties: {}, _parent: null, _name: '<root>', _zoneDelegate: [Object] }, _name: 'angular', _zoneDelegate: ZoneDelegate { _taskCounts: [Object], zone: [Circular], _parentDelegate: [Object], _forkZS: null, _forkDlgt: null, _forkCurrZone: [Object], _interceptZS: null, _interceptDlgt: null, _interceptCurrZone: [Object], _invokeZS: [Object], _invokeDlgt: [Object], _invokeCurrZone: [Circular], _handl

build angular-core

Source

S-Johny

👍10

Most helpful comment

@CaerusKaru Do you know why this would be popping up again(with angular 8 and flex-layout beta 26) when building using the following options? I think the fix would be in that release.

npx ng build --prod --aot=false --build-optimizer=false

It works fine if you do a regular prod build with aot and the build optimizer enabled but a prod build without that doesn't work. Also works in dev mode or if you target es5 instead of es2015(differential loading in angular 8).

Maybe it is a bug with the fix that it works in full aot+prod but not in prod with aot+build optimizer turned off?

epelc on 11 Jun 2019

👍6

All 44 comments

Can you post a minimal reproduction repository for this? SSR issues are tough to debug unless we have the while picture.

CaerusKaru on 21 Dec 2018

I am afraid that I can do that only after holidays. I can try to create a demo but my hopes are very low during the holidays sorry.

S-Johny on 21 Dec 2018

Didn't notice this was a duplicate at first. Thanks for pointing out @CaerusKaru hopefully I added some helpful info in the other issue.

Anyways @Layyy you should be able to workaround for now if you can get the firebase project to target es5.

epelc on 21 Dec 2018

@epelc No worries, it was non-obvious. Thanks for identifying the root cause, I'll work with Paul to track this down.

CaerusKaru on 21 Dec 2018

👍1

Marking this as blocked on https://github.com/angular/angular/issues/27267. Workaround for now is as @epelc said, use ES5. Alternatively, you could reimplement the directives using explicit constructors, and declare those instead. We're opting not to in order to cut down on complexity and breaking changes for people using custom breakpoints.

CaerusKaru on 21 Dec 2018

I have similar issue #959.
I solve the problem by downgrade version to beta.19 for now.

perjerz on 26 Dec 2018

👍3

In my project for flex-layout I use this workaround from material.

dima11221122 on 1 Jan 2019

👍1

@dima11221122 Be advised that Material reverted that change, see here. The workaround may still work for you if you don't use Closure Compiler, but for those who do beware.

CaerusKaru on 1 Jan 2019

At least for angular-cli projects it works properly:)

dima11221122 on 1 Jan 2019

Angular cli projects default to es5. I’m actually using an angular cli project but wanted to target es2015 instead.

epelc on 1 Jan 2019

@CaerusKaru - Has this been fixed with @devversion UMD Build improvements ?

ThomasBurleson on 22 Jan 2019

@ThomasBurleson Nope, this is a deeper issue involving the Angular compiler

CaerusKaru on 22 Jan 2019

"La solución": Volver a es5
"target": "es6" to "target": "es5",
Eso es una simple solutions cerebritos

devpala on 20 Mar 2019

👎6 👍2

angular/angular#27267 has been patched, so this should be fixed in the next release.

CaerusKaru on 19 May 2019

Should be fixed with the latest release.

CaerusKaru on 21 May 2019

@CaerusKaru I'm sorry I missed that, which release version you are saying this is fixed? Is it 8.x? If so does that mean we need to upgrade everything to latest 8.x

talamaska on 1 Jun 2019

@CaerusKaru Do you know why this would be popping up again(with angular 8 and flex-layout beta 26) when building using the following options? I think the fix would be in that release.

npx ng build --prod --aot=false --build-optimizer=false

Maybe it is a bug with the fix that it works in full aot+prod but not in prod with aot+build optimizer turned off?

epelc on 11 Jun 2019

👍6

fyi - for me this issue occurs for using flex layout v7.0.0-beta.24 with angular 7.2.15 (i.e. not just an angular 8 issue as suggested above). I had rolled back a failed ng 8 upgrade, but my tsconfig was still targeting es2015, and that's when this flex layout issue cropped up for me. I changed my tsconfig.json's back to targeting es5 and the issue cleared up in my dev build (ng build --dev).

sarora2073 on 17 Jun 2019

Having same issue as @epelc

Using flex beta 26 and angular 8

And this is set in my prod build

"optimization": true, "outputHashing": "all", "sourceMap": true, "extractCss": true, "namedChunks": false, "aot": false, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": false, "budgets": [ { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" }

Only solution I have found is to set "optimization": false, and then it will run but then that isnt really ideal. Is there any update on a resolution for this?

Update:

I set target to es5 in the tsconfig.json and build worked, but es2015 does not

spencerfontein on 18 Jun 2019

@CaerusKaru can we get this reopened?

spencerfontein on 18 Jun 2019

👍5

Same here, does not work when with ivy.

es2015:

core.js:9110 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'init' of undefined
TypeError: Cannot read property 'init' of undefined
    at DefaultLayoutDirective.init (core.js:463)
    at new LayoutDirective (flex.js:176)
    at new DefaultLayoutDirective (flex.js:188)
    at core.js:9075
    at NodeInjectorFactory.DefaultLayoutDirective_Factory [as factory] (flex.js:192)
    at getNodeInjectable (core.js:8939)
    at instantiateAllDirectives (core.js:15215)
    at createDirectivesAndLocals (core.js:14611)
    at ɵɵelementStart (core.js:19505)
    at PresentationLayoutComponent_Template (template.html:18)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:34184)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:469)
    at invokeTask (zone-evergreen.js:1603)

es5:

javascript core.js:7376 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'init' of undefined TypeError: Cannot read property 'init' of undefined at DefaultLayoutDirective.push../node_modules/@angular/flex-layout/__ivy_ngcc__/esm5/core.es5.js.BaseDirective2.init (core.es5.js:539) at DefaultLayoutDirective.LayoutDirective [as constructor] (flex.es5.js:178) at new DefaultLayoutDirective (flex.es5.js:193) at core.js:7351 at NodeInjectorFactory.DefaultLayoutDirective_Factory [as factory] (flex.es5.js:197) at getNodeInjectable (core.js:7254) at instantiateAllDirectives (core.js:12015) at createDirectivesAndLocals (core.js:11540) at ɵɵelementStart (core.js:15419) at PresentationLayoutComponent_Template (template.html:18) at resolvePromise (zone.js:852) at resolvePromise (zone.js:809) at zone.js:913

Enngage on 1 Jul 2019

👍3

All: this is an issue with Angular or the Angular CLI (my thought it the latter). Please direct all requests to those repositories, but feel free to link back to this issue.

Keep in mind, this was _never_ actually a Flex Layout issue, we just needed to wait for the requisite changes in the Angular compiler before we closed it since so many people encountered it with this library.

CaerusKaru on 1 Jul 2019

👍1

Does anyone know if there is an open issue at the angular repo?
Or some other place to see how this is evolving?
Thanks

mfreirehfexp on 10 Jul 2019

@mfreirehfexp iirc there is an issue on the main angular repo. It's basically just waiting for ivy to release fully since it will fix this and the es2015 related compilation issues(ivy supports es2015). Sorry can't find the link but follow general ivy developments.

epelc on 10 Jul 2019

❤1

@mfreirehfexp could you post link if you find it?

@epelc thanks for the reply, it is my understanding ivy wont be released until Angular 9, so are you saying this will not be fixed until then?

spencerfontein on 10 Jul 2019

@spencerfontein Yeah, from my understanding we are waiting until angular 9 at least now(hopefully it's fully released for 9). You are pretty much SOL until then(forced to compile to different target) since ivy is still so early now(I've tried you just keep running into other bugs and isn't worth attempting yet).

epelc on 10 Jul 2019

Thanks @epelc !
I have a couple of months so I guess I'll wait

mfreirehfexp on 10 Jul 2019

👍3

For those wondering, I changed all of my angular packages to be 8.2.0, or higher. Still not able to use flex-layout @CaerusKaru

CharlieGreenman on 5 Aug 2019

I'm also seeing this with CLI 8.2.0 with ivy enabled and target es2015 (flex-layout 8.0.0-beta.26).

james-schwartzkopf on 6 Aug 2019

I'm having this error in CLI 8.2.3 with ivy enabled, flex-layout 8.0.0-beta.26. Switch off ivy could get my app run without error. But it would be nice to have ivy.

nnworkspace on 10 Aug 2019

👍4

@Enngage that issue was reported to angular/angular in https://github.com/angular/angular/issues/32289. However, it looks like it was mistakenly marked as a duplicate.

Splaktar on 27 Aug 2019

There are some new updates related to Ivy in https://github.com/angular/angular/issues/31956.

Splaktar on 30 Aug 2019

I ran into this issue, but without Ivy enabled. The fix/workaround for me was to set "aot": true; along with "optimization": true and I kept the tsconfig target to ES2015.

drc-nloftsgard on 4 Sep 2019

In relation to Ivy, this should be fixed in v8.0.0-beta.27.

Splaktar on 7 Sep 2019

I was running into this error message without having opted into Ivy.

My build command has --aot=false and --buildOptimizer=false. Also adding --optimization=false seems to have fixed the issue for me.

plurch on 13 Sep 2019

👍1

@plurch thanks! I add --optimization=false and it really helps.

mohaxspb on 15 Sep 2019

You certainly want to avoid deploying to production if you have --buildOptimizer=false --optimization=false in your build config, unless it's an internal only app that is only used via the internal company network...

Splaktar on 16 Sep 2019

@Splaktar

You certainly want to avoid deploying to production if you have --buildOptimizer=false --optimization=false in your build config, unless it's an internal only app that is only used via the internal company network...

Could you provide more details? Do you mean performance issues or there are some security problems? For now I, seems to be, have no choice... I have empty error message with --aot=false and --buildOptimizer=false, so can't imaging what I need to fix. And with this options my app builds, but fails on load in browser, and only --optimization=false helps here. And I also can't use ng update --all, as there are dependencies issues.

May be I'll try to update each dep manually, but is it worth it? I'm not sure, that this will help...

mohaxspb on 16 Sep 2019

@mohaxspb Performance is the primary concern. Both runtime and load time.

You really should try to get your app building and working with AOT, otherwise it's not production ready.

You can run ng update --all --force, but there are some bugs currently that may update your dependencies for a -next.x release. If that occurs, you can manually downgrade the libraries to the latest 8.2.x release. The migrations that are applied should still work with that version.

Personally, I like to do ng update @angular/cli --force first, then run ng update again to see if anything else needs to be updated. Then I also use npm-check -u (here) to update any other non-ng-update dependencies that aren't breaking. Of course, if something breaks, then you will need to revert to the old version of that library (hopefully for only 1 or 2 dependencies).

If you run into problems, please feel free to create a StackOverflow question and then ping me on Gitter/Twitter and I can try to take a look.

Splaktar on 16 Sep 2019

@Splaktar thanks for details! I'll try to update deps this week and write here about result)

mohaxspb on 16 Sep 2019

👍1

@Splaktar hello again!

I tried to update, but it doesn't help. While updating with ng update --all --force I have to decrease manually only zone.js and typescript.

So there is a question on stackoverflow:
https://stackoverflow.com/questions/57978475/angular-prod-build-error-in-cannot-assign-to-a-reference-or-variable

It would be great if you find time to take a look at it!

Anyway, thanks for helping, at least I managed deps updating)

mohaxspb on 17 Sep 2019

👍1

@Splaktar , at last I have error reason (SO user https://stackoverflow.com/users/10123947/shadow found it): there were attempt to change value of variable in template, defined in template with help of self-made directive.

Problem here is in poor error message. Mentioned user received details only via debugging compiler (as I understand). There are some details https://stackoverflow.com/a/57981144/3212712. Same in Russian: https://ru.stackoverflow.com/a/1025417/17609

To get error message I have to edit node_modules/@angular/compiler/bundles/compiler.umd.js, adding console.log(ast); before error throwing here (class _AstToIrVisitor, method visitPropertyWrite):

console.log(ast);
// Otherwise it's an error.
throw new Error('Cannot assign to a reference or variable!');

So I get this message:

PropertyWrite {
  span: ParseSpan { start: 0, end: 73 },
  receiver: ImplicitReceiver { span: ParseSpan { start: 0, end: 0 } },
  name: 'translation',
  value: MethodCall {
    span: ParseSpan { start: 14, end: 73 },
    receiver: ImplicitReceiver { span: [ParseSpan] },
    name: 'getTranslationForLanguageFromArticle',
    args: [ [PropertyRead], [PropertyRead] ]
  }
}

With this info I can immediately find problem in code.

UPD:

I found a way to use my directive and do not ruin prod build. But this needs to edit compiler script here

There is check for type of expression in template if (localExpr instanceof ReadPropExpr) and, if add one more condition || localExpr instanceof ReadVarExpr) everything is OK (prod build succeeded, so as deploy and run in browser). I'll try tomorrow to create pull request to compiler with example. Also there is a way to provide more info in error by adding JSON.stringify(ast) to error message.

mohaxspb on 17 Sep 2019

@Splaktar, hello again!

I add issues and PRs to angular repository to fix it.