Kompilierzeit OK, Laufzeitfehler beim Verwenden der Klasse aus dem Namespace in Typoskript mit Webpack

9

Ich verwende swagger-codegen mit der Option -l typescript-angular , um eine Bibliothek von REST-Consumer-Services zu generieren. Der generierte Code sieht so aus ( DefaultApi.ts ):

%Vor%

Wie Sie sehen können, gibt es konkrete Klassen, die verwendet werden müssen, aber innerhalb eines Namespaces deklariert sind, d. h. nicht import cable. Mein Editor (VSCode) beschwert sich nicht, wenn ich API.Client.DefaultApi referenziere, obwohl import fehlt, weil er die Definition als Teil eines deklarierten Namensraums annimmt, nehme ich an. Aber zur Laufzeit beschwert sich der Browser, dass API nicht definiert ist.

Ich verwende Webpack, um meinen Code zu bündeln. Ich sehe ein paar andere Fragen zu SO, die irgendwie wie diese sind, aber hatten kein Glück mit den Antworten dort.

BEARBEITEN:

Wie gewünscht, hier sind meine Konfigurationsdateien für ts und webpack:

webpack Konfigurationsdatei:

%Vor%

tsconfig.json:

%Vor%     
AndyPerlitch 22.12.2016, 06:29
quelle

2 Antworten

0

Die aktuelle Version von typagle Winkelsignalgenerator swagger-codegen umschließt die DefaultApi nicht in einem Namensraum.

Aktualisieren und neu generieren Lassen Sie es mich wissen, wenn Sie Probleme haben.

    
Martin 05.01.2017 18:32
quelle
0

Sie haben zwei Möglichkeiten, dies zu beheben, eine Leichtigkeit und einen anderen Komplex:

  1. Ändere die generierte ts-Datei.

Fügen Sie den folgenden Code am Ende des generierten Codes hinzu:

%Vor%

Nun können Sie import in Ihren Modulen ohne Probleme verwenden, zB:

%Vor%
  1. Aber wenn die Datei "change generated" keine Option ist, appelliere an den Salsa-Compiler !

Die Idee:

Teilen Sie den modularen Code und nicht den modularen Code mit verschiedenen tsconfig. Kombinieren Sie modularen Code und nicht modular mit Salsa, Webpack-Alias ​​und JavaScript-Unterstützung.

Lernprogramm:

  

TL; DR Hier ein GitHub-Repository , das diese Lösung anwendet.

>
  1. Erstellen Sie eine neue tsconfig.generate.json für den generierten Code, nur generierten Code, zB:
%Vor%
  1. In Ihrer ursprünglichen tsconfig.json müssen Sie generierte ts-Dateien ausschließen. Dadurch wird sichergestellt, dass kein unnötiger Code vorhanden ist, zB:
%Vor%
  1. Nun, das Ass im Loch! Sie fügen eine api.js -Datei hinzu und referenzieren sie in Ihrer tsconfig.generate.json . Ja, es ist eine js-Datei, hier kommt Salsa ins Spiel. Dazu müssen Sie allowJs feature in tsconfig
  2. aktivieren
%Vor%

Diese Dateien sollen grundsätzlich über commonjs Ihren generierten Code exportieren, ohne ihn zu berühren.

%Vor%

Beachten Sie jetzt in tsconfig.generate.json und in Ihrer outFile -Eigenschaft. Wenn Sie den Compiler ( tsc -p tsconfig.generate.json ) testen, sehen Sie alle Ihre generierten Dateien in module-generate-code.js verkettet, und die letzte Zeile muss wie folgt aussehen:

module.exports = API.Client;

Fast fertig!

Jetzt können Sie module-generate-code.js in Ihrem eigenen Code mit import verwenden! Aber wie js Dateien nicht die besten Definitionen haben, dann haben Sie eine resolve.alias in webpack.config und tsconfig.json

konfiguriert %Vor% %Vor%

Jetzt können Sie Ihren Generierungscode verwenden, ohne ihn zu berühren: import api from 'api';

Jeder Zweifel, hier ein GitHub Repo mit diesem Ansatz. Ich hoffe, ich habe geholfen

    
Abraão Alves 06.01.2017 01:34
quelle