webentwicklung-frage-antwort-db.com.de

Probleme beim Importieren von Klassen aus Angular 2 Module mit TypeScript 1.7

Ich habe Probleme mit dem Importieren von Klassen aus Modulen in TypeScript, speziell für Angular 2 in Visual Studio 2015 (Update 1) mit TypeScript 1.7.

Überall in der Dokumentation zu Angular 2 sehe ich Importanweisungen wie: import {Component} from 'angular2/core';. Diese Dateien befinden sich in node_modules/angular2/*. Was macht nur angular2/*

Ich kann die Fehler in Visual Studio nur beseitigen, wenn ich einen relativen Pfad aus dem App-Verzeichnis habe: ./../node_modules/angular2/platform/browser';. Dies behebt die Visual Studio-Build-Fehler, aber wenn ich die App mit System.import('app/boot') ausführe und ausführen, erhalte ich eine Reihe von Fehlern wie diese:

system.src.js: 1049 GET http: // localhost: 8080/knotenmodule/angle2/platform/browser 404 (nicht gefunden)

Ein anderes Problem ist die Möglichkeit, Anweisungen wie die folgenden verwenden zu können: import {SearchComponent} from './Components/Search/search.component'; in Visual Studio, aber wenn ich es ausführen werde, gibt es eine Menge GET-Fehler bei system.src.js:2476.

Ich dachte, dass das Einstellen des defaultExtension: 'js' für System.config sich dieses Problems hätte erledigen sollen.

UPDATE Hier sind alle Dateien, die ich für relevant halte:

views/home/index.html

<script src="node_modules/es6-shim/es6-shim.js"></script>
<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>
System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            }
        }
    });
System.import('app/app')
    .then(null, console.error.bind(console));

test.csproj

<TypeScriptToolsVersion>1.7</TypeScriptToolsVersion>
<TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
<TypeScriptModuleResolution>Node</TypeScriptModuleResolution>
<TypeScriptTarget>ES5</TypeScriptTarget>
<TypeScriptJSXEmit>None</TypeScriptJSXEmit>
<TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
<TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
<TypeScriptModuleKind>CommonJS</TypeScriptModuleKind>
<TypeScriptRemoveComments>False</TypeScriptRemoveComments>
<TypeScriptOutFile />
<TypeScriptOutDir />
<TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
<TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
<TypeScriptSourceMap>True</TypeScriptSourceMap>
<TypeScriptMapRoot />
<TypeScriptSourceRoot />

typings/tsd.d.ts

export * from './../node_modules/angular2/core';
export * from './../node_modules/angular2/common';
export * from './../node_modules/angular2/http';
export * from './../node_modules/angular2/router';
export * from './../node_modules/angular2/platform/browser';

Dateistruktur:

app/
    app.ts
    components/
    models/
    services/
node_modules/ (npm install using Angular 2 quickstart's package.json)
    angular2/ (not all the files listed)
        bundles/ (not all the files listed)
            angular2.dev.js
        platform/
        src/
        ts/
        typings/
        common.d.ts
        core.d.ts
        http.d.ts
        router.d.ts
    es6-module-loader/
    es6-promise/
    es6-shim/
    rxjs/
    systemjs/
    zone.js/
    TypeScript/ (not sure if this needs to be here)

Ich bin mit TypeScript nicht vertraut. Kann ein Fehler durch verschiedene TypeScript-Modulsysteme verursacht werden? Angular 2 empfohlenes System.config mit format: 'register' eingestellt, aber https://www.npmjs.com/package/angular2 besagt, dass die Dateien mit CommonJs verwendet werden können.

Mit diesen Dateien erhalte ich diese zwei Konsolenfehler:

app.ts:1 Uncaught ReferenceError: require is not defined(anonymous function) @ app.ts:1
angular2-polyfills.js:143 Uncaught TypeError: Cannot read property 'split' of undefined
18
Adam Hitchens

Ich musste einige Änderungen am 5-Minuten-Schnellstart vornehmen, damit er mit MAMP funktioniert. 

Sie müssen SystemJS mitteilen, wo sich Ihre benutzerdefinierten Module befinden, Sie können baseURL jedoch nicht so einstellen, dass . Das Festlegen von baseURL scheint die Modulauflösung für die Knotenmodule zu beeinträchtigen (z. B. eckig). Fügen Sie dies stattdessen Ihrer systemjs config hinzu:

map: {
    app: 'path/to/app/folder'
},

Ändern Sie jedoch nicht die Anweisungen für den Winkelimport. Das sind keine Pfade, sondern Modulnamen, und Systemjs sollten sie gut auflösen, wenn Sie, wie Sie es getan haben, angle2.dev.js in ein Head-Script-Tag eingefügt hat. 

Möglicherweise müssen Sie auch Folgendes angeben: 

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>

an der Spitze Ihrer Anwendung (oder wo auch immer Sie Bootstrap aufrufen) 

5
Brad

Wie lädt Ihre HTML-Datei die Angular 2-Bibliothek? Es sollte so einfach sein wie

<script src="path/to/my/libs/angular2.dev.js"></script>

Sie werden feststellen, dass die Datei die gesamte integrierte/verkettete Angular 2-Bibliothek enthält. Sie sollten Ihre Webseite nicht auf die unformatierten Quelldateien zeigen.

SystemJS weiß, was angular2/core bedeutet, weil die erstellte Bibliothek definiert, was dieses Muster bedeutet. Obwohl es sich scheinbar um eine Verzeichnisstruktur handelt (die wahrscheinlich in der unbiblierten Bibliothek enthalten ist), ist es eigentlich nur ein Name für die erstellte Bibliothek. Suchen Sie nach diesem Text in der erstellten Bibliothek, und Sie sehen, dass er definiert ist:

System.register("angular2/core", ...

0
pe8ter

"Ich habe dieses Problem behoben, aber ich habe immer noch das Problem" Nicht abgefangene Referenzfehler: Anforderung ist nicht definiert ".

systemjs kann für die Verwendung des erforderlichen Formats konfiguriert werden: 

System.config({
  packages: {
    app: {   // must be replaced 
      format: 'AMD'
    }
  }
});

wenn es sich jedoch in Ihrem eigenen Code befindet, kann die TypeScript-Compiler-Ausgabe in tsconfig gesetzt werden:

{
  "compilerOptions": {
    ...
    "module": "system"
    ... 
  }
}

in Ihrer Visual Studio-Konfigurationsdatei kann dies bedeuten:

<TypeScriptModuleKind>system</TypeScriptModuleKind>
0
Dániel Kis

Folgendes hat für mich gearbeitet.

System.config({    
          transpiler: 'TypeScript', 
          typescriptOptions: { emitDecoratorMetadata: true }, 
          packages: {       
          app: {
              defaultExtension: 'ts'
          }
        }
      });

Ich habe auch das TypeScript in den Header eingefügt

<script src="https://code.angularjs.org/tools/TypeScript.js"></script>
0
Jerry

Die kleinen roten Linien sind wahrscheinlich auf Ihre tsconfig.json zurückzuführen. Zumindest verursachte das das Problem für mich. Das Problem, das ich hatte, war, dass ich beide Dateien [] verwendete und [] ausschließt. Dies funktioniert nicht wie erwartet und ist keine gültige Konfiguration.

Ich habe dieses Problem behoben, aber ich habe immer noch das Problem "Unrecept ReferenceError: required ist nicht definiert".

0
user3448990