Universal issue due to packaging format issue

[cyrilletuzi]

I run an app with Material and FlexLayout, server-side rendered with the new option of @angular/cli 1.3.0-rc.

No problem with Material, but FlexLayout generates this error :

/node_modules/@angular/flex-layout/media-query/breakpoints/break-points-token.js:8
import { InjectionToken } from '@angular/core';
^^^^^^

SyntaxError: Unexpected token import

I suspect it's because flex-layout is not distributed in the official way like other Angular modules. Some entry points (main, module, es2015, umd...) are missing compared to other Angular packages.

[ThomasBurleson]

@cyrilletuzi: We recently upgraded our build process for Angular (v4.x) and AOT. Please retry with the latest builds on HEAD: see Installing @angular/flex-layout@HEAD

[cyrilletuzi]

Imports are working now, but I get this error :

/node_modules/@angular/core/bundles/core.umd.js:382
            throw 'reflect-metadata shim is required when using class decorators';
            ^
reflect-metadata shim is required when using class decorators

It's OK if I include the polyfill, but all other librairies stopped using it, and it will be removed soon from @angular/cli.

It may be because flex-layout is not requesting the good format of other Angular packages (like core).

[ThomasBurleson]

@cyrilletuzi - what do you mean "it may be because flex-layout is not requesting the good format of other Angular packages (like core)" ?

[cyrilletuzi]

I'm not an expert about how official Angular packages are distributed, but the error seems to show flex-layout is importing core in umd format, and I think now Angular modules are imported via the es2015 entry point. But I see that HEAD version of flex-layout has now the es2015 entry point so I don't know what's the problem...

[ThomasBurleson]

@hansl, @Brocco - any thoughts on the issue with the CLI rc ?

[cyrilletuzi]

And I may have been optimist about saying it works with reflect, rendering is not working anymore, but I think it's related to #353

[ThomasBurleson]

@cyrilletuzi - Oh wait... you said SSR above. Yes, you will need the code changes in PR #353.

[cyrilletuzi]

Yes, but I think the reflect issue is a different one. Will see.

[hansl]

@ThomasBurleson do you use reflect metadata outside of angular decorators?

[CaerusKaru]

This issue persists even with the merge of #353

cc @ThomasBurleson @hansl

[hansl]

@ThomasBurleson After talking to @chuckjaz, you can fix this by adding an importAs key to your index.metadata.json file. See this PR in Material: angular/components#6132

I suggest talking to Jeremy about it.

[ThomasBurleson]

@hansl - Thx Hans. I will investigate and review with @jelbourn. I do appreciate your help.

[hansl]

@ThomasBurleson actually after discussion with @chuckjaz and @tbosch it seems like using flatModuleId might be the way to go (see here).

[cyrilletuzi]

As a more general perspective, shouldn't be the recommended configuration for building librairies for Angular available for every one ?

There will be similar problem with every third party librairies, and if even official librairies seems to don't know all what is necessary...

It's causing some important issues like angular/angular-cli#7200

[ThomasBurleson]

Depends on angular/components#6132

[cyrilletuzi]

Fixed in nightly builds.

[ghost]

Please check the latest build. Line 79 has an import statement stuck on the end of the line that causes it to error.

[angular-automatic-lock-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.}