Flex-layout: angular4 aot compilation

[daniele-zurico]

Hi all I've just update to angular4 but now it break when the application is render.
What I'm doing is using custom media query.
This is my code:

export const customBreakPoints: BreakPoint[ ] = [
    {
        alias: 'small',
        suffix: 'Xs',
        overlapping: false,
        mediaQuery: 'screen and (max-width: 319px)'
    },
    {
        alias: 'small',
        suffix: 'GtXs',
        overlapping: true,
        mediaQuery: 'screen and (max-width: 319px)'
    },
    {
        alias: 'mobile',
        suffix: 'Sm',
        overlapping: false,
        mediaQuery: 'screen and (min-width: 320px) and (max-width: 767px)'
    },
    {
        alias: 'mobile',
        suffix: 'GtSm',
        overlapping: true,
        mediaQuery: 'screen and (min-width: 320px) and (max-width: 767px)'
    },
    {
        alias: 'tablet',
        suffix: 'Md',
        overlapping: false,
        mediaQuery: 'screen and (min-width: 768px) and (max-width: 1023px)'
    },
    {
        alias: 'tablet',
        suffix: 'GtMd',
        overlapping: true,
        mediaQuery: 'screen and (min-width: 768px) and (max-width: 1023px)'
    },
    {
        alias: 'desktop',
        suffix: 'Lg',
        overlapping: false,
        mediaQuery: 'screen and (min-width: 1024px)'
    },
    {
        alias: 'desktop',
        suffix: 'GtLg',
        overlapping: true,
        mediaQuery: 'screen and (min-width: 1024px)'
    },
    {
        alias: 'desktop',
        suffix: 'Xl',
        overlapping: false,
        mediaQuery: 'screen and (min-width: 1024px)'
    }
];

@NgModule({
    bootstrap: [AppComponent],
    imports: [
        BrowserModule,
        HttpModule,
        FlexLayoutModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [
...
        {provide : BREAKPOINTS, useValue: customBreakPoints}
    ]
})
export class AppModule {
    constructor() {

    }
}

I did something wrong or something happen with angular4?
thanks

[ThomasBurleson]

Please refer to our Custom Breakpoints Documentation. Source examples can be seen here:

• BreakPoint Providers.ts
• Testing with Custom Breakpoint Providers

Note this feature will be available on npm with the next release. Before that you will need to access the nightly build with your local npm installs.

[ThomasBurleson]

Closing as not an issue.

[daniele-zurico]

Do we have any release schedule? I can't update just for that library. But angular4 should not be a smoothie upgrade?

[daniele-zurico]

I think that this issue should remain open for the other people as well that they have the same problem

[ThomasBurleson]

@angular/flex-layout works with Angular 4. Compiling with Angular 4 currently has some AOT-related errors. We will re-open until the Angular 4 AOT resolved.

[ThomasBurleson]

@mmalerba - would you mind investigating this issue?

Refs #236.

[daniele-zurico]

Hey guys I saw the new release! It does support AOT for angular4 or not yet?

[ThomasBurleson]

You can use the @angular/flex-layout builds with Angular 4.
But currently you cannot compile @angular/flex-layout with ngc v4.x

[daniele-zurico]

guys any news on that? I need to upgrade to angular4 but I'm stuck just for that library

[ThomasBurleson]

Angular 4 + AOT issue fixed with SHA fed87fa53850a873d2ed2b398eb3a5260a6b3e98.

And now available in @angular/flex-layout Beta.8 on npm.

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