Ng-packagr: Build error when referencing constant in a separate file for animations

Created on 1 Nov 2017 · 4Comments · Source: ng-packagr/ng-packagr

Type of Issue

ng-packagr crashes when I externalize animations to a constant in a dedicated file

[x] Bug Report
[ ] Feature Request

Description

I have a small component which makes use of @angular/animations. I wieh to externalize the description of animations in a dedicated file containing just a constant like

import {animate, state, style, transition, trigger} from '@angular/animations';
export const swipeAnimation =
  trigger('transition', [
    state('in', style({transform: 'translateX(0)', opacity: '1'})),
    transition('void => *', [
...
    ]),
...
  ]);

and I use it in my component the following way:

@Component({
             selector: 'app-swiper',
             templateUrl: './swiper.component.html',
             styleUrls: [ './swiper.component.scss' ],
             animations: [ swipeAnimation ]
           })

When I launch the command "ng-packagr -p ng-package.json" then it crashes with the following exception:

BUILD ERROR
Error at /Users/loicsalou/IdeaProjects/component-lib/.ng_pkg_build/component-lib/ts/src/app/swiper/swiper/swiper-animations.ts:4:14: Exported variable 'swipeAnimation' has or is using name 'AnimationTriggerMetadata' from external module "/Users/loicsalou/IdeaProjects/component-lib/node_modules/@angular/animations/src/animation_metadata" but cannot be named.
Error: Error at /Users/loicsalou/IdeaProjects/component-lib/.ng_pkg_build/component-lib/ts/src/app/swiper/swiper/swiper-animations.ts:4:14: Exported variable 'swipeAnimation' has or is using name 'AnimationTriggerMetadata' from external module "/Users/loicsalou/IdeaProjects/component-lib/node_modules/@angular/animations/src/animation_metadata" but cannot be named.
    at new UserError (/Users/loicsalou/IdeaProjects/component-lib/node_modules/@angular/tsc-wrapped/src/tsc.js:27:28)
    at check (/Users/loicsalou/IdeaProjects/component-lib/node_modules/@angular/tsc-wrapped/src/tsc.js:93:15)
    at Tsc.typeCheck (/Users/loicsalou/IdeaProjects/component-lib/node_modules/@angular/tsc-wrapped/src/tsc.js:173:9)
    at /Users/loicsalou/IdeaProjects/component-lib/node_modules/@angular/tsc-wrapped/src/main.js:122:23

An easy workaround is to include the animations in the component directly instead of externalizing them in a separate file.

How To Reproduce

I have a repository here.

Branch develop contains working version with workaround.
Branch bugfix/ng-packagr-crashes-animations contains crashing version.

Expected Behaviour

We should be able to externalize animations in a separate file, as constants, so as to share them between components.

Version Information

ng-packagr: v1.5.0-rc.1
node: v8.4.0
npm: v5.5.1
@angular: v4.4.6
rxjs: 5.1.0
zone.js: 0.8.4

I'm using primeng but issue is not related, I had it before adding Primeng.

question

Source

loicsalou

👍1

Most helpful comment

Thank you for the repro. It made debugging much easier.

An import is missing, so not everything is present during the bundle process. Adding the following should make your swipe animation compile correctly:

import {AnimationTriggerMetadata, animate, state, style, transition, trigger} from '@angular/animations';

export const swipeAnimation: AnimationTriggerMetadata =
  trigger('transition', [
     ...

DavidParks8 on 2 Nov 2017

👍4

All 4 comments

Thank you for the repro. It made debugging much easier.

An import is missing, so not everything is present during the bundle process. Adding the following should make your swipe animation compile correctly:

import {AnimationTriggerMetadata, animate, state, style, transition, trigger} from '@angular/animations';

export const swipeAnimation: AnimationTriggerMetadata =
  trigger('transition', [
     ...

DavidParks8 on 2 Nov 2017

👍4

...how could I miss that !? feeling stupid...
Thanks a lot, so everything is fine on my side too.

loicsalou on 2 Nov 2017

No worries. We all make mistakes.

DavidParks8 on 2 Nov 2017

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

_{_This action has been performed automatically by a bot._}