Wie strukturiere ich den Import von einem Drittanbieter-angular2 App

Ich bin mir nicht sicher, wie die Import-Anweisung für eine Drittanbieter-Bibliothek zu strukturieren.Wie strukturiere ich den Import von einem Drittanbieter-angular2 App

Ich versuche, ng2-Datei-Upload von einem Angular2 Projekt in Visual Studio zu verwenden. https://github.com/valor-software/ng2-file-upload

Ich habe dies in meiner Komponente:

import {FILE_UPLOAD_DIRECTIVES, FileUploader} from 'ng2-file-upload';

Visual Studio verwendet, wird dies bauen und intellisense findet die Richtlinien in der Bibliothek. Zur Laufzeit bekomme ich diesen Fehler:

GET http://localhost:54675/ng2-file-upload 404 (Not Found)

Offensichtlich ist das nicht der richtige Pfad.

Unten ss meine Verzeichnisstruktur. Der Import erfolgt in documentUpload.component.ts.

> wwwroot 
> -------app 
> ----------shared 
> -------------documentUpload 
> ----------------documentUpload.component.ts 
> -------node_modules 
> ----------ng2-file-upload 
> -------------ng2-file-upload.js 
> -------------components 
> ----------------file-upload 
> -------------------file-uploader.js

Meine Quelle für NG2-Datei-Upload ist in der Projektwurzel und ein Schluck Datei bewegt sich nur die js und CSS zu meinem wwwroot/node_modules Ordner. Ich denke zur Entwurfszeit benutzt es die Quelle in meinem Root (so dass Intellisense funktioniert und es baut), aber zur Laufzeit versucht es, von wwwroot zu ziehen und etwas fehlt oder referenziert falsch.

Update: Basierend auf dem Feedback ich dieses Modul zu dem system.config hinzugefügt, wie unten dargestellt:

System.config({ 
     packages: { 
      app: { 
       format: 'register', 
       defaultExtension: 'js' 
      } 
     }, 
     map: { 
      'ng2fileupload': 'node_modules/ng2-file-upload/ng2-file-upload.js' 
     } 
    }); 

    System.import('app/boot') 
     .then(null, console.error.bind(console)); 
    System.import('ng2fileupload') 
     .then(null, console.error.bind(console));

An dieser Stelle ich einen 404-Fehler beim Laden: http://localhost:54675/node_modules/ng2-file-upload/components/file-upload/file-select

Diese Datei -select-Komponente befindet sich in einem Unterverzeichnis unter ng2-file-upload. Ich fügte es als ein Kartenmodul hinzu, aber das erzeugte nur ähnliche Fehler für andere Komponenten, die es verwendet.

Aktueller Fortschritt Hier ist meine index.html Datei.

<!DOCTYPE html> 
<html> 

<head> 
    <title>FMS</title> 
    <base href="/" /> 
    <!-- 1. Load libraries --> 
    <script src="/node_modules/angular2/bundles/angular2-polyfills.js"></script> 
    <script src="/node_modules/systemjs/dist/system.src.js"></script> 
    <script src="/node_modules/rxjs/bundles/Rx.js"></script> 
    <script src="/node_modules/angular2/bundles/angular2.dev.js"></script> 
    <script src="node_modules/angular2/bundles/router.dev.js"></script> 
    <script src="node_modules/es6-shim/es6-shim.js"></script> 

    <script src="/node_modules/jquery/dist/jquery.js"></script> 
    <script src="/node_modules/bootstrap/dist/js/bootstrap.js"></script> 
    <script src="/node_modules/angular2/bundles/http.js"></script> 
    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css" /> 
    <link rel="stylesheet" href="/node_modules/spinkit/css/spinkit.css" /> 

    <link rel="stylesheet" href="/app/assets/site.css" /> 

    <!-- 2. Configure SystemJS --> 
    <script> 
     System.config({ 
     packages: { 
      app: { 
      format: 'register', 
      defaultExtension: 'js' 
      } 
     }, 
     map:{ 
     'ng2-file-upload':'node_modules/ng2-file-upload/ng2-file-upload.js' 
     } 

     }); 
     System.import('app/boot') 
      .then(null, console.error.bind(console)); 
    </script> 

</head> 

<!-- 3. Display the application --> 
<body> 
    <fmssupport-app></fmssupport-app> 
</body> 

</html>

Hier ist meine Komponente:

import {Component} from 'angular2/core'; 
import {FILE_UPLOAD_DIRECTIVES} from 'ng2-file-upload'; 

@Component({ 
    selector: 'document-upload', 
    templateUrl: 'app/shared/documentUpload/documentUpload.component.html', 
    directives: [FILE_UPLOAD_DIRECTIVES] 
}) 

export class DocumentUploadComponent { 

}

Und das sind die Fehler, die ich erhalten:

GET http://localhost:54675/node_modules/ng2-file-upload/components/file-upload/file-select 404 Error: XHR error (404 Not Found) loading http://localhost:54675/node_modules/ng2-file-upload/components/file-upload/file-select (…) GET http://localhost:54675/node_modules/ng2-file-upload/components/file-upload/file-drop 404 GET http://localhost:54675/node_modules/ng2-file-upload/components/file-upload/file-uploader 404 (Not Found)

Daraus kann ich sehen, dass es die NG2-Datei-Upload-Komponente ist das Auffinden aber es schlägt fehl, wenn diese Komponente versucht, Komponenten in einem Unterordner zu laden.

Quelle

2016-03-22 Don Chambers

Normalerweise tun Sie dies über die Datei System.config in Ihrer index.html, die Ihre eckige App aufruft.

Etwas wie folgt aus:

System.config({ 
     defaultJSExtensions: true, 
     packages: { 
      "/angular2": {"defaultExtension": false} 
     }, 
     map: { 
      'ng2-file-upload': 'node_modules/ng2-file-upload' 
     } 
});

Sie werden bemerken, die map: Funktion, das ist eine einfache Möglichkeit, innerhalb angular2 zusätzliche Pakete zu konfigurieren.

Edit:

Ihr Index.HTML-Datei sollte wie folgt aussehen:

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> 
<script src="node_modules/es6-shim/es6-shim.min.js"></script> 
<script src="node_modules/systemjs/dist/system.js"></script> 
<script src="node_modules/ng2-file-upload></script> //Note how I am grabbing it here. 
<script> 
    System.config({ 
     packages: { 
      app: { 
      format: 'register', 
      defaultJSExtensions: true 
      }, 
     }, 
     map: { 
      "ng2-file-upload": "/node_modules/ng2-file-upload"//This is so we map it to the name ng2-file-upload for use in our application. 
      } 
     }); 
</script> 
<script src="node_modules/rxjs/bundles/Rx.js"></script> 
<script src="node_modules/angular2/bundles/angular2.js"></script> 
<script src="node_modules/angular2/bundles/http.min.js"></script> 
<script src="node_modules/angular2/bundles/router.min.js"></script> 
<script> 
    System.import('app/boot') 
     .then(null, console.error.bind(console)); 
</script>

Danach tun Sie sollten in der Lage sein:

import {Ng2-file-uploader} from 'ng2-file-upload'

Ich bin nicht sicher, was die Ausfuhr von NG2-Datei-Upload wäre, so dass Sie‘ d haben die Namen zu finden, und wenn der Ordner auf die Datei 3 Verzeichnisse unten ist es werden Sie gefallen verweisen müssen:

'ng2-file-upload/second_directory/third_directory/name_of_component'

, dass es bis zum Laufen bekommen sollte.

Die Dokumente auf System.js sind ziemlich gut und einfach zu lesen ist hier eine gute Möglichkeit zu sehen, wie man Plugins von ihrem Github hinzufügt. https://github.com/systemjs/systemjs/blob/master/docs/overview.md#plugin-loaders

Hoffe, das hilft! Tut mir leid, dass ich das gestern nicht gepostet habe, großer Schneesturm hier und Strom ging den ganzen Tag aus!

Edit 2:

Ok so ein paar Dinge, geben Sie an, eine Datei und kein Verzeichnis in Ihrer map-Funktion, die in Ordnung ist, wenn man immer nur, dass bestimmte Datei für NG2-Datei verwenden möchten -hochladen. Aber du hast die Datei falsch geschrieben, was dir Kopfschmerzen bereitet, es sollte ng2-file-uploader.js sein. Auch

{FILE_UPLOAD_DIRECTIVES} from 'ng2-file-upload';

Die Import-Anweisung ungültig ist, gibt es keine FILE_UPLOAD_DIRECTIVES in dem NG2-Datei-Upload. Es hat nur eine FileUploader Class. Sie können sich selbst von ihrer Quelle https://github.com/valor-software/ng2-file-upload/blob/master/components/file-upload/file-uploader.ts überprüfen.

Sie verwenden:

import {FileUploader} from 'ng2-file-upload'

oder

import {FileUploader as FILE_UPLOAD_DIRECTIVES} from 'ng2-file-upload'

ich einige der Probleme, denken Sie in obwohl laufen, ist die Tatsache, dass Sie nicht das Verzeichnis angeben und die Angabe nur die Datei direkt. Welches ist, warum Sie in den Fehler ausgeführt werden:

http://localhost:54675/node_modules/ng2-file-upload/components/file-upload/file-select

Da Sie die Datei-Auswahlmodul ziehen aus dem Verzeichnis referenziert werden, werden Sie immer nur Ihre Datei-Uploader zu bekommen. Sie können das umgehen, aber in Ihrer HTML-Datei referenzieren Sie dieses Skript überhaupt nicht. Sie benötigen ein Skript-Tag:

<script src="node_modules/ng2-file-upload></script>

Wie ich zuvor erwähnt hatte.

Quelle

2016-03-22 03:34:59

Versuchte es hinzufügen - hat nicht funktioniert. Gleiche Ergebnisse. –

Gleiche Fehlermeldung? Können Sie zeigen, wie Sie es in Ihre Komponente importieren? –

Ich habe den Post mit der system.config aktualisiert. Wie kann ich sehen, welche Module geladen sind? –

Index.HTML .. Wo "Libs" Ihre Js unter wwwroot Ordner ist

System.config({ 
     packages: { 
      appScripts: { 
       defaultExtension: 'js' 
      } 
      , 'ng2-file-upload': { defaultExtension: 'js' } 
       }, map: { 'ng2-file-upload': 'libs/ng2-file-upload/' } 
      } 

    );

und Komponente ... {Directpry/Datei}

import {FILE_UPLOAD_DIRECTIVES, FileUploader} from 'ng2-file-upload/ng2-file-upload';

Quelle

2016-04-07 16:56:13

Grundsätzlich ich @Morgan bin nach Gs Antwort, aber ich drehe ein bisschen herum. Jetzt stelle ich meinen Code hier zur Verfügung, hoffe, dass er anderen hilft.

installieren NG2-Datei-Upload npm install ng2-file-upload --save
Import in index.html

<script src="node_modules/es6-shim/es6-shim.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> 
<script src="node_modules/systemjs/dist/system.js"></script> 
<script src="node_modules/ng2-toastr/bundles/ng2-toastr.min.js"></script> 

<script src="node_modules/rxjs/bundles/Rx.js"></script> 
<script src="node_modules/angular2/bundles/angular2.dev.js"></script> 
<script src="node_modules/angular2/bundles/router.dev.js"></script> 
<script src="node_modules/angular2/bundles/http.dev.js"></script> 

<!-- 2. Configure SystemJS --> 
<script> 
    System.config({ 
    packages: { 
     app: { 
     format: 'register', 
     defaultExtension: 'js' 
    }, 
    'ng2-file-upload': { "defaultExtension": "js" } 
    }, 
    map: { 
     "ng2-file-upload": "/node_modules/ng2-file-upload" 
    } 
    }); 
    System.import('app/main') 
     .then(null, console.error.bind(console)); 
</script>

3. Import-Richtlinie:

@Component({ 
... 
directives: [FILE_UPLOAD_DIRECTIVES] })

Und import {FILE_UPLOAD_DIRECTIVES, FileUploader} from 'ng2-file-upload/ng2-file-upload'; 4. Dann sollten Sie in der Lage sein

<input type="file" ng2-file-select [uploader]="uploader" multiple />

in Ihrer Vorlage

Quelle

2016-04-21 18:39:56 user2038560

Wie strukturiere ich den Import von einem Drittanbieter-angular2 App

Antwort

Verwandte Themen