Angular2/Typoskript gibt 404 nicht gefunden, wenn sie versuchen CSS-Animation

Ich habe gerade angefangen zu importieren mit angular2 zu spielen und einige Animationen mit css-animator Angular2/Typoskript gibt 404 nicht gefunden, wenn sie versuchen CSS-Animation

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 zu tun versuchen, .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>

sy stemjs.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 animation_builder.js:434 Uncaught ReferenceError: exports is not defined und localhost/:18 Error: Error: XHR error (404 Not Found) loading http://localhost:3000/node_modules/css-animator(…) auf Browser-Konsole bekam.

Kann mir jemand dabei helfen?

Danke.

Quelle

2016-06-23 blitzen12

Ich glaube, RC3 ist nicht existent. Ändern Sie Ihre Abhängigkeitsversionen zu "rc.2" –

rc3 ist die letzte Versionsveröffentlichung letzten 21. Juni 2016 nach https://github.com/angular/angular/blob/master/CHANGELOG.md – blitzen12

Du animation_builder.js direkt im <head> Abschnitt einschließlich:

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

Sie einen Reference bekommen, weil die einzelnen Dateien im css-animator Paket enthalten sind Commonjs zusammengestellt, die der Browser nicht nativ nicht versteht.

Versuchen Sie, diese Zeile zu entfernen, und SystemJS sollte die Dateien automatisch laden, wenn Sie sie irgendwo importieren. Auch SystemJS versteht CommonJS.

Alternativ können Sie das vom Paket bereitgestellte SystemJS-Bundle in den Abschnitt <head> aufnehmen. Wenn Sie dann ein Modul von css-animator importieren, hat SystemJS dieses Modul bereits registriert und kann es sofort laden.

Sie können das minimierte oder unminified Bündel wie folgt umfassen:

<!-- 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: Ich der Autor dieses Pakets ist.

Quelle

2016-06-25 11:31:20 Fabian

'animation_builder.js: 434 Uncaught ReferenceError: exports ist nicht definiert' ist gelöst, aber ich habe immer noch einen Fehler 'zone.js: 101 GET http: // localhost: 3000/knotenmodule/css-animator/404 (Nicht gefunden) ' – blitzen12

Ich denke, du musst es sagen SystemJS, was der Hauptzugangspunkt zu "css-animator" ist. Versuchen Sie, "css-animator" hinzuzufügen: {main: 'index.js', defaultExtension: 'js'}, 'zum' packages'-Objekt. Wenn Sie Zeit haben, sollten Sie in [jspm] (http://jspm.io) nach Ihrem Front-End-Abhängigkeitsmanagement suchen. Es generiert die SystemJS-Konfigurationsdatei für Sie. – Fabian

Danke, es funktioniert .. Ich musste 'Css-Animator' hinzufügen: {main: 'index.js', defaultExtension: 'js'} in meinen Paketen. – blitzen12

Angular2/Typoskript gibt 404 nicht gefunden, wenn sie versuchen CSS-Animation

Antwort

Verwandte Themen