Angular 2: System.import(): Nicht mit vollem Pfad arbeiten

Question

Ich verwende unter zwei verschiedenen Code, um eine Dateilaufzeit zu importieren, einer von ihnen funktioniert gut, während andere einen Fehler werfen.

Arbeits:

System.import('../../FileName.ts').then(classObj => {   
     console.log(classObj);    
}); 

funktioniert nicht:

System.import('App/Models/FileName.ts').then(classObj => {   
     console.log(classObj);    
}); 

Es unten Fehler werfen:

nicht gefunden Modul ‚App/Modelle/FileName.ts '

Dateistruktur in dem Code geschrieben ist, und ich versuche auch Datei aus derselben Struktur zu importieren:

(1) Code: ActivityModel.ts (2) Importieren: ApplicationModel.ts

Jeder kann mir helfen, über das volle Pfadüberlegungsproblem zu lösen.

Answer 1

Zunächst einmal sicher, dass Sie neueste Version von webpack haben installed.Then Sie mit folgenden Änderungen ausprobieren können:

In webpack.config.js Datei mit dem folgenden Code ändern,

resolve: { 
     extensions: ['.ts', '.js', 'css'], 
     "modules": [ 
      "./node_modules", 
      "content" 
     ] 
    }, 

Und

output: { 
      path: path.resolve(__dirname, 'dist'), 
      filename: '[name].js', 
      publicPath: 'dist/', 
     } 

In .ts Datei ändern,

System.import('horizontal/models/FileName.ts').then(classObj => {   
     console.log(classObj);    
}); 

• The resolver wird verwendet, um Dateien in Bezug auf die Anwendung von Wurzel und Lösung content Ordner in webpack.config.js, Datei innerhalb dieses Ordners laden kann, wie oben gezeigt, durch absoluten Pfad zugegriffen werden.

  (Nun Pfad wie content/horizontal/models/FileName.ts wird nicht funktionieren)

• Die Bundle-Datei von FileName.ts wird in dist Ordner erstellt und wird im Browser geladen werden dynamically.Webpack einen Fehler im Browser werfen , dass es cannot load chunk 0 oder etwas ist.Das ist weil es versucht, die anderen Dateien relativ zu Ihrer HTML -Datei zu laden und nicht relativ zu der ersten JavaScript-Datei, die Sie über das Skript geladen haben.

  Um dies zu migrieren, müssen Sie einen publicPath zu Ihrem Webpack config hinzufügen.

Hoffnung, es wird helfen!

Answer 2

Fügen Sie diese auf Ihre TSconfig

"baseUrl": "." 

austauschen "" mit einem Pfad, der beschreibt, wo sich der Basisordner für Ihre Importe befindet. In meinem Fall befand sich tsconfig im selben Ordner wie mein App-Ordner, also habe ich einfach "."