Search code examples
typescriptangularangular2-directivespolyfills

Angular2/Typescript returns 404 not found when trying to import css-animator

I just started to play with angular2 and trying to do some animations with css-animator

package.json

"dependencies": {
    "@angular/common": "2.0.0-rc.3",
    "@angular/compiler": "2.0.0-rc.3",
    "@angular/core": "2.0.0-rc.3",
    "@angular/forms": "0.1.1",
    "@angular/http": "2.0.0-rc.3",
    "@angular/platform-browser": "2.0.0-rc.3",
    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
    "@angular/router": "3.0.0-alpha.7",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.3",
    "angular2-in-memory-web-api": "0.0.12",
    "bootstrap": "^3.3.6",
    "chokidar": "^1.6.0",
    "core-js": "^2.4.0",
    "css-animator": "^1.2.4",
    "http-proxy": "^1.14.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.12"
 }

index.html

<html>
  <head>
   <title>Angular 2 QuickStart</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="app/css/bootstrap.css">
   <link rel="stylesheet" href="app/css/style.css">
   <!-- 1. Load libraries -->
 <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
   <script src="node_modules/systemjs/dist/system.src.js"></script>
   <script src="node_modules/css-animator/builder/animation_builder.js">      </script>
   <!-- 2. Configure SystemJS -->
   <script src="systemjs.config.js"></script>
   <script>
     System.import('app').catch(function(err){ console.error(err); });
   </script>
         </head>
     <!-- 3. Display the application -->
        <body class="bg-image">
          <my-app>Loading...</my-app>
          </body>
      </html>

systemjs.config.js

var map = {
    'app':                        'app', // 'dist',

    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs',
    'css-animator':               'node_modules/css-animator'
  };
   var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js'   },
     };
     System.config(config);

custom.animate.directive.ts

import {Directive, ElementRef, Renderer} from '@angular/core';
 import {AnimationService, AnimationBuilder} from 'css-animator';

 @Directive({
    selector: '[login-method]',
    host: {
      '(click)':'onClick()'
   }
})

export class LoginOptionsDirective{
   private animator : AnimationBuilder;

   constructor(animationService: AnimationService, private el: ElementRef, private renderer: Renderer){
      this.animator = animationService.builder();
  }

  onclick(){
      this.renderer.setElementStyle(this.el, 'color','black');
      console.log(this.el.nativeElement.getAttribute("login-method"));
   }
 }

I got animation_builder.js:434 Uncaught ReferenceError: exports is not defined and localhost/:18 Error: Error: XHR error (404 Not Found) loading http://localhost:3000/node_modules/css-animator(…) on browser console.

Can someone help me with this?

Thanks.

Solution

  • You are including animation_builder.js directly in the <head> section:

    <script src="node_modules/css-animator/builder/animation_builder.js"></script>

    You get a ReferenceError, because the single files included in the css-animator package are compiled to CommonJS, which the browser doesn't understand natively.

    Try removing that line, and SystemJS should load the files automatically, if you import them somewhere. Also SystemJS understands CommonJS.

    Alternatively, you could include the SystemJS bundle provided by the package in the <head> section. If you then import a module from css-animator, SystemJS has this module already registered and can load it instantly.

    You may include the minified or unminified bundle like this:

    <!-- Unminified Source -->
<script src="node_modules/css-animator/bundles/css-animator.js"></script>

<!-- Minified Source -->
<script src="node_modules/css-animator/bundles/css-animator.min.js"></script>

    Disclaimer: I'm the author of this package.