Flex-layout: Webpack fails to compile updating from beta.4 to beta.5 using angular-cli

[daveo1001]

During ng serve I get:

ERROR in Error encountered resolving symbol values statically. Calling function 'FlexLayoutModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in blah/blah/src/app/app.module.ts, resolving symbol AppModule in blah/blah/src/app/app.module.ts

Compiles fine when I change angular/flex-layout back to beta.4.

angular-cli beta 31

Let me know if any additional info would be helpful.

[bkarv]

Thanks I had the same issue when I update Angular Cli to 1.0.0-beta.31 and Angular 2.4.7. I confirm reverting flex-layout back to beta.4, resolves the issue.

[d3viant0ne]

No issues on a fresh repo. I'll need the full log output & if it's public or can be put in a public repo to help reproduce, that would certainly expedite things.

[ThomasBurleson]

@d3viant0ne - I have discovered real challenges with upgrading CLI to beta.30. It seems the CLI team's recommendation is to start "fresh"... (which seems horrible BTW). And I think this mix of old/new CLI has issues with flex-layout.

I also have no issues with a fresh install of @angular/cli beta.30 and flex-layout beta.5

[d3viant0ne]

I haven't dared update my current work project to beta.31 yet given the problems I have had in the past.

The best way I have found to do it is run run ng update in the repo, let it overwrite what it wants to and then clean / take in vscode file by file. Less than optimal but effective so far.

[ThomasBurleson]

Closing as "not a flex-layout" issue

[daveo1001]

New clean angular-cli project from beta.30 with flex-layout beta.5.

Same issue.
Here's a new clean angular-cli project from beta.30 with flex-layout beta.4.

Works.

Steps to reproduce

1. global install for angular-cli yarn global add @angular/[email protected] (or 31 or 29)
2. create a new project ng new my-project
3. add flex-layout cd my-project yarn add @angular/[email protected] (beta.4 to see it work)
4. add flex-layout to app.module.ts
5. ng serve

[ThomasBurleson]

Here is the issue related to angular-cli beta.30:
https://github.com/angular/angular-cli/issues/4425#issuecomment-278646371

@daveo1001 - I think this is an issue for angular-cli... not Flex-Layout.

[daveo1001]

And here it is failing at beta.5 using cli beta.29

And working with beta.4

[daveo1001]

@ThomasBurleson looks like a flex-layout issue, guy. It worked yesterday when I was using cli beta 30 and flex-layout beta 4.

What you linked has nothing to do with what I'm experiencing.

[ThomasBurleson]

@daveo1001 - investigating.

[daveo1001]

@ThomasBurleson thanks!

[ThomasBurleson]

@daveo1001 - I just tried this with a completely new, blank folder... and followed your steps. It works great!

1) I already have @angular/cli: 1.0.0-beta.30 installed globally
2) ng init
3) yarn add @angular/flex-layout
4) update app.module.ts

import { FlexLayoutModule } from '@angular/flex-layout';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    FlexLayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

5) run ng serve

All works great.

[daveo1001]

Son of a bee sting.

I've got the same issue on two different computers.

Windows 10 screwing me, maybe?

[ThomasBurleson]

Ah... the notorious Windows OS. Yep. Betcha a $10.

BTW, I love that phrase: "Son of a bee sting". I will have to use that in the future. :-)

[daveo1001]

Busted on Windows 7 too. :/

[daveo1001]

Quick, @ThomasBurleson let me borrow your computer.

[garyforsterio]

Not sure if this is any help to anyone but I just got rid of the error by removing the forRoot() method call from the import. So

imports: [
    ...
    FlexLayoutModule.forRoot(),
   ...
  ],

to

imports: [
    ...
    FlexLayoutModule,
    ...
  ],

[edoardoVD]

Windows 10 version: Ultimate Pro Majestic Supreme .. ..

_angular-cli: 1.0.0-beta.24
node: 6.9.2
os: win32 x64
@angular/common: 2.4.7
@angular/compiler: 2.4.7
@angular/core: 2.4.7
@angular/flex-layout: 2.0.0-beta.5
@angular/forms: 2.4.7
@angular/http: 2.4.7
@angular/platform-browser: 2.4.7
@angular/platform-browser-dynamic: 2.4.7
@angular/router: 3.4.7
@angular/compiler-cli: 2.4.7_

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    LayoutModule,
    FlexLayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

When I import FlexLayoutModule = "Unexpected value 'undefined' imported by the module 'AppModule'"

When I remove it from the import = happily ever after...

Was barely going to check out FlexLayout and this happened.. .. :'( sniff .. . .

So.... I ended up setting @angular/flex-layout: 2.0.0-beta.4 to start get intimately acquainted with angular flexLayout

[ThomasBurleson]

@edoardoVD, @daveo1001 - @see https://github.com/angular/flex-layout/issues/176#issuecomment-279056717

[daveo1001]

@ThomasBurleson does this mean you owe me $100? 😁

[ThomasBurleson]

@daveo1001 - It means I owe you $10 (see https://github.com/angular/flex-layout/issues/174#issuecomment-279008446). send me your email and I will gift you an iTune card.

[daveo1001]

@ThomasBurleson emailed!

[edoardoVD]

Well after a failed attempt of trying to use angular FlexBox last week.. . I decided to give it another shot (in da face.. .)

To get it working, I ended up:

Upgrading FROM @angular-cli: 1.0.0-beta.24 TO @angular/cli: 1.0.0-beta.31
(did not had to upgrade from Windows to MAC.. . . 😄 )
As well follow the instructions on not using FlexLayoutModule.forRoot() JUST use FlexLayoutModule

Cheerio mates 🤓

[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._}