When attempting to import css-animator in Angular2/Typescript, a 404 error is displayed, indicating that the

Recently, I delved into the world of Angular2 and decided to experiment with some animations using 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 encountered errors like 

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 the browser console.

Seeking assistance to resolve these issues. Any help would be much appreciated!

Thank you.

typescriptangularangular2-directivespolyfills

Answer №1

When you directly include animation_builder.js in the <head> section:

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

You might encounter a ReferenceError, as the individual files in the css-animator package are compiled to CommonJS format, which is not native to browsers.

Consider deleting that line and let SystemJS handle file loading automatically when importing them elsewhere. SystemJS is compatible with CommonJS.

Alternatively, you can add the SystemJS bundle provided by the package in the <head> section. By doing this, if you import a module from css-animator, SystemJS will already have it registered for quick loading.

You have the option to include either the minified or unminified bundle like so:

<!-- 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>

Just a heads up: I’m the creator of this package.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Access your Angular 2 application on an external device during the development process

Is there a way to view your app in an external device like a cell phone web browser, instead of just running npm start and viewing it in your desktop browser? ...

angularnpm

What is the best way to retrieve the height and width of a device's display in Angular 2 using Typescript

I came across this code snippet. Do you think it's valid? import {Component} from '@angular/core'; import {Platform} from 'ionic-angular'; @Component({...}) export MyApp { constructor(platform: Platform) { platform.ready().then ...

angulartypescript

Steps to set angular for all items in the dropdown menu:

I am currently working on implementing a dropdown feature within my Angular application. The dropdown will display a list of shops, and when a shop is selected, it will show the content related to that particular shop. I need to add a new item called "ALL ...

angulartypescriptangular2-templateangular2-formsangular2-services

Updating Angular 9 Reactive Form: How to Use PatchValue with a Nested FormArray in a FormGroup

I am currently working on maintaining an existing project that involves using a FormGroup helper to transform data into the FormGroup format. The FormGroup includes four nested FormArray elements, and my task is to update all the data within the FormGroup ...

angularangular-reactive-formsformbuilderformarrayformgroups

Angular Material's floating label feature disrupts the form field's outline styling

Whenever I try to change the appearance of the form field to outline, the floating label ends up breaking the outline. Here is a code snippet for reference: <mat-form-field appearance="outline"> <mat-label>Password&l ...

angularangular-material

I am working on a project where I have a parent component that contains a textarea element. My goal is to dynamically adjust the height of this textarea

Is there a way to adjust the size of a textarea component in a child component? textarea.html <textarea style = "height"=150px></textarea> // The height is defined globally here xyz.html <app-textarea></app-textarea> // Looking ...

angular

Encountering a TypeScript error while calling a Vue lifecycle hook method

Struggling to call a method in a Vue root component from a lifecycle method in typescript? See below for a simple example that showcases this issue: import Vue from "vue"; class Game { a: number; b: number; constructor() { this.a = 3; ...

typescriptvue.js

The function signature '(event: ChangeEvent<HTMLInputElement>) => void' does not match the expected type 'ChangeEvent<HTMLInputElement>'

This is my first time using TypeScript to work on a project from the ZTM course, which was initially written in JavaScript. I am facing an issue where I am unable to set a type for the event parameter. The error message I receive states: Type '(event: ...

reactjstypescripttypescomponents

What is the comparable alternative to promise<void> in observables?

I've been working with Angular using TypeScript and I'm attempting to return a promise from an observable. What is the correct way to accomplish this? So far, I have tried the following: of(EMPTY).toPromise() // error: Promise<Observable<n ...

angulartypescriptpromiseobservable

Troubleshooting Paths with Angular's NgFor Directive

Within my Angular project, I have implemented a basic ngFor loop to display logo images. Here is a snippet of the code: <div *ngFor="let item of list" class="logo-wrapper"> <div class="customer-logo"> & ...

htmlangulartypescript

Can a discriminated union be generated using mapped types in TypeScript?

Imagine you have an interface called X: type X = { red: number, blue: string } Can a union type Y be created using mapped types? If not, are there other ways to construct it at the type level? type Y = { kind: "red" payload: number } | ...

typescript

Using Angular with Web API to transmit FormFile data from client to API

I am facing a challenge with creating an object (referred to as a "Ticket") along with 0-n children (known as "Attachments") in my Angular application and sending this information to my dotnet core Web API. However, this is more of a logical inquiry that I ...

angularasp.net-web-api.net-coreasp.net-core-webapi

The issue in Angular2 viewmodel where the boolean value fails to update the *ngIf template

I'm seeking assistance with an unusual issue in my Angular2 and Typescript application. Within my template, I have the following HTML utilizing ngIf: <div *ngIf="loading" class="row"> <div class="small-3 small-centered columns" > ...

typescriptangular

The mat select option does not have the correct width for the mat

Can someone please help me with this issue? I'm having trouble with the width of the options in a mat-select within a form. When I try to select an option, the width extends to 100% instead of staying within the select box. Here is a snapshot showing ...

angularangular-material

Matching the types of method parameters to the types of callback function parameters in Typescript generics

I am currently working on creating a class that takes a function as a parameter in the constructor. The function can have arguments of any type. My goal is to add a method to the class that also accepts the same arguments as the function parameter, essenti ...

node.jstypescript

Revamping elements according to ordered array. Angular version 4.3

Dealing with an array of data that needs to be sorted for displaying in a component seems to be a challenge. Despite having a functional code sample demonstrating the concept, the sorting is not reflected in the Angular app's DOM. The original data i ...

javascriptarraysangulartypescript

What are some ways to enhance this TypeScript code using Functional Programming with the FP-TS library?

i am struggling to write some typescript code using fp-ts Below are the tasks that i want the algorithm to carry out: Once a path is received from the command line, it should check if the given path exists search for all files in the directory and locat ...

typescriptfp-ts

Show the alias of a type in Vscode Typescript instead of its definition

Here is some code that I am working with: type Opaque<T,U> = T & {_:U}; type EKey = Opaque<number,'EKey'>; type AKey = Opaque<EKey,'AKey'>; type PKey = Opaque<AKey,'PKey'>; let a = <PKey>1; ...

typescriptvisual-studio-codevscode-extensions

Number as the Key in Typescript Record<number, string> is allowed

As a newcomer to TypeScript, I am still learning a lot and came across this code snippet that involves the Record utility types, which is quite perplexing for me. The code functions correctly in the playground environment. const data = async (name: string ...

typescriptpromise

Unable to utilize the "let" keyword in WebStorm

Currently, I am delving into learning typescript and attempting to create a simple 'let' statement. However, I encountered an error indicating the need to use ECMAScript 6 or later versions. The exact message from the typescript compiler states: ...

javascripttypescriptwebstorm