flex-layout doesn't compile with ngc when importing into an AoT app

[pdavin-zz]

I think this is a bug, so filing as an issue. Started as the thread here (but no replies yet): https://groups.google.com/d/topic/angular-flex-layout/VM9b-pIkYOc/discussion

I'll try to work on putting together a demo project that demonstrates this (can't do a Plunkr since I don't know of an online code editor that supports running the ngc compiler).

Command failed: node_modules/.bin/ngc -p tsconfig-aot.json
can't resolve module ./api/layout from /.../src/client/node_modules/@angular/flex-layout/flexbox/_module.d.ts

Error: Cannot read property 'LayoutDirective' of undefined, 
resolving symbol FlexLayoutModule in /.../src/client/node_modules/@angular/flex-layout/flexbox/_module.d.ts, 
resolving symbol FlexLayoutModule in /.../src/client/node_modules/@angular/flex-layout/flexbox/_module.d.ts
at simplifyInContext (/.../third_party/content/src/client/node_modules/@angular/compiler-cli/src/static_reflector.js:475:23)

[ThomasBurleson]

Are you by-chance, using angular-cli beta 30 or higher: angular/angular-cli#4425 (comment)

[pdavin-zz]

No, I'm using ngc directly. I can send my tsconfig file but it has some project specific stuff. The project setup is similar to this one: https://github.com/ibqn/ng2-heroes-gulp/blob/master/tsconfig-aot.json

[pdavin-zz]

Aha, I was able to create a repro project relatively easily:

https://github.com/pdavin/ng2-aot-demo

Repro by: npm i; gulp --type aot ngc

That produces a slightly different error, about resolving symbol values statically.

I was also able to repro my error (above referenced one) by downgrading package.json dependencies a little bit to match the version levels my core project is at. I put that at package.json.modified.
Repro by: cp package.json.modified package.json; rm -r node_modules; npm i; gulp --type aot ngc

[ThomasBurleson]

@pdavin - your new error may be related to #175

[ThomasBurleson]

@pdavin - meanwhile I will investigate your Github repo issue. Thx.

[pdavin-zz]

I think you're right about the 'static values' error. I changed flex-layout back to version 2.0.0-beta.4 (which is also what I'm on in my core project) and ngc compilation is passing now. My original issue still reproes with package.json.modified though. That mirrors my core project's dependencies and is on flex-layout beta.4 with angular 2.2.4. So the issue is with some dependency difference but I don't know which one exactly.
I'll try upgrading to Angular 2.3.0.

[pdavin-zz]

Confirmed: Angular @ 2.3.1 && flex-layout @ 2.0.0-beta.4 fixes my issue. It would be helpful if the NPM package peer dependencies could be updated! They say '^2.2.3'. The README says 2.4.3, but the peer dependency declaration (plus the fact flex-layout has been around longer than 2.4.3 I think?) made me think it would work with earlier versions. And in fact it does work with versions earlier than 2.4.3 - ie, 2.3.1 - but not 2.2.4.
It'd also be helpful if flex-layout got on the same version system as Angular (ie, match version #s). Then we'd have "known good" inter-dependencies.

[ThomasBurleson]

@pdavin for you, does @angular ^2.3.1 work also for @angualr/flex-layout 2.0.0-beta.5 ?

[pdavin-zz]

Yes, no issues for me with angular @ 2.3.1 and flex-layout 2.0.0-beta.5 - on my core project. On the demo project (ng2-aot-demo), I hit the static values error on beta.5 with angular 2.3.1. Not sure what the difference is between my two projects to cause this difference.

[ThomasBurleson]

@pdavin - In your sample repos (https://github.com/pdavin/ng2-aot-demo), I do not see a package.json entry for @angular/flex-layout. Am I missing something ?

[pdavin-zz]

@ThomasBurleson, yes, sorry about that, I overwrote the package.json with the original before I pushed. I still had flex-layout in my local node_modules though because I hadn't uninstalled or deleted. I made a push just now which cleans up the package.json.

Also see my comment above about beta.5, I'm editing it with an additional finding.

[ThomasBurleson]

@pdavin - OK, I found the issue.

• npm i -D @angular/flex-layout

And I could reproduce your error ^.

Reason, the static forRoot has a console.warn() which creates AOT issues.

export class FlexLayoutModule {
  static forRoot(): ModuleWithProviders {
    console.warn('FlexLayoutModule.forRoot() has been deprecated and is no longer needed.');
    return {  ngModule: FlexLayoutModule  };
  }
}

This ^ creates your errors because of the use of console.warn().

For now simply remove the forRoot() call:

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        InMemoryWebApiModule.forRoot(InMemoryDataService),
        AppRoutingModule,
        FlexLayoutModule
    ],
    providers: [HeroService],
    declarations: [
        AppComponent,
        HeroesComponent,
        DashboardComponent,
        HeroDetailComponent,
        HeroSearchComponent
    ],
    bootstrap:    [ AppComponent ]
})
export class AppModule {}