2016-10-11 5 views
-1

Ich versuche, ein statisches Bündel meiner angular 2 App zu generieren (mein Ziel ist es, eine einzige minimierte js-Datei mit einem Skript-Tag ohne systemjs zu importieren). Meine App hat die folgende (vereinfachte) Struktur:Kann Systemjs-Builder mit Schluck nicht richtig konfigurieren

MyProject/ 
    app/ 
     monitoring/ 
      a.ts 
      b.ts 
     terminals/ 
      a.ts 
      b.ts 
     main.ts 
     app.module.ts 
... 

Das ist mein TSconfig ist:

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": true, 
    "noImplicitAny": false, 
    "outDir": "__dist__" 
    }, 
    "filesGlob": [ 
    "**/*.ts", 
    "**/*.tsx", 
    "!node_modules/**" 
    ] 
} 

Dieses die systemjs config:

(function() { 

    var DEFAULT_PACKAGE_CONFIG = { 
     main: './index.js', 
     defaultExtension: 'js' 
    }; 

    System.config({ 
     paths: { 
      'npm:': 'node_modules/' 
     }, 
     map: { 
      app: '__dist__', 
      monitoring: '__dist__/monitoring', 
      terminals: '__dist__/terminals', 
      statistics: '__dist__/statistics', 
      references: '__dist__/references', 

      '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 

      'rxjs': 'npm:rxjs', 
      'primeng': 'npm:primeng', 
      'wijmo': 'scripts/vendor', 
      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api' 
     }, 
     packages: { 
      app: { 
       main: './main.js', 
       defaultExtension: 'js' 
      }, 
      rxjs: { 
       defaultExtension: 'js' 
      }, 
      primeng: { 
       defaultExtension: 'js' 
      }, 
      wijmo: { 
       defaultExtension: 'js' 
      }, 
      monitoring: DEFAULT_PACKAGE_CONFIG, 
      terminals: DEFAULT_PACKAGE_CONFIG, 
      statistics: DEFAULT_PACKAGE_CONFIG, 
      references: DEFAULT_PACKAGE_CONFIG, 
      'angular2-in-memory-web-api': { 
       main: './index.js', 
       defaultExtension: 'js' 
      } 
     } 
    }); 

})(); 

... und schließlich meine Aufgabe schluck :

gulp.task('bundle:js', function() { 
    var builder = new SystemJsBuilder('.', './systemjs.config.js'); 
    return builder 
     .buildStatic('__dist__/app/main.js', buildFolder + '/bundle.js'); 
}); 

... aber wh en ich es laufen, erhalte ich:

> Error on fetch for __dist__/app/monitoring.js at 
> file:///MyProject/__dist__/app/monitoring.js Loading 
> __dist__/app/app.module.js Loading __dist__/app/main.js ENOENT: no such file or directory, open '/MyProject/__dist__/app/monitoring.js' 

... es scheint, es Unterordner unter "app" ist zu ignorieren ... warum? Wie kann ich diesen Fehler beheben?

+0

Haben Sie eine Lösung bekommen? –

Antwort

0

Es sieht tatsächlich so aus, als ob das Problem nicht darin besteht, das Verzeichnis app zu ignorieren, sondern in Ihrer Konfiguration.

Sie haben:

System.config({ 
    packages: { 
     monitoring: { 
      main: './index.js', 
      defaultExtension: 'js' 
     } 
    ... 

Also ich denke, irgendwo in Ihrem Code Sie monitoring importieren, die automatisch wegen der defaultExtension-monitoring.js übersetzt und deshalb wirft er einen Fehler, da diese Datei nicht existiert.

+0

Die Einstellungen für das Paket "monitoring" sind für systemjs während der Entwicklung erforderlich (und es funktioniert), andernfalls versucht es, monitoring.js zu laden, während ich in der Schluck-Compilation bin ... in den Quellcode-Importen sind wie dieser : 'import {DashboardComponent, AvailabilityComponent, AlertsComponent} von" ./monitoring ";' ... so verstehe ich wirklich nicht, was falsch ist und wie man es beheben kann :( – daveoncode

+0

Sie müssen nicht die selbe SystemJS config für verwenden Sowohl bei der Entwicklung als auch bei der Produktion: Wenn Sie sicher sind, dass Sie die Abhängigkeit im Browser laden können und Sie sie nicht kompilieren können, können Sie die Option 'build: false' für bestimmte Ressourcen verwenden. Siehe https://github.com/ systemjs/builder # ignore-resources – martin

+0

tatsächlich scheint es, dass das Problem der mehrere Import ist ... wenn ich einen einzelnen Import für jede Komponente im Paket definieren kompiliert es ohne Fehler – daveoncode

Verwandte Themen