Erstellen Sie Angular2 HTML und TypeScript in einer einzigen Datei

Question

Ich mache eine App (Large Scale) mit Angular2 und TypeScript. Es muss in zahlreiche Projekte unterteilt werden und jedes Projekt wird zahlreiche Komponenten mit jeweils einer .html Ansicht, .css Stylesheet und .ts Logik/Klasse haben.

Ich möchte jedes Projekt zu einer einzigen *.js Datei kompilieren und auf eine Host-Website kopiert werden, die in IIS ausgeführt wird. Dies wäre vergleichbar mit der Erstellung einer WPF- oder Silverlight-App mit den Dateien .xaml, die alle in die Datei .dll kompiliert werden.

Ich habe mich im Internet umgesehen und bin in der Lage, die .ts Dateien zu einer einzigen .js Datei unter Verwendung der --outFile Option zu erstellen. Aber das hilft mir nicht mit den .html Dateien oder css.

Jede Hilfe wäre sehr, auch wenn es zu sagen, versteht sich, dass unmöglich :-)

Stephen

Answer 1

Wenn Sie die Standard Angular2 tsconfig.json mit SystemJS loader verwenden, was ich frage ist:

Sie können die ganze schwere Arbeit auf SystemJS Build Tool verlassen. Dies ist zum Beispiel, wie ich es tue in meinen Projekten gulp mit:

1. Compile * .ts und Inline * .html Vorlagen

   ich gulp-angular-embed-templates sofort bin mit Inline all templateUrl in template Saiten (dieses Plugin funktioniert mit Angular 1. * und Angular 2).

   var tsc = require('gulp-typescript'); 
   var tsProject = tsc.createProject('tsconfig.json'); 
   var embedTemplates = require('gulp-angular-embed-templates'); 
   
   gulp.task('app.build', function() { 
       var tsResult = gulp.src('app/src/**/*.ts', {base: './app/src'}) 
        .pipe(embedTemplates()) // inline templates 
        .pipe(tsc(tsProject)); 
   
       return tsResult.js 
        .pipe(gulp.dest('build/js')); 
   }); 
   

   Dies wird viele anonymous System.register modules in build/js Verzeichnis erzeugen. Alle von ihnen haben ihre templateUrl bereits inline.

2. Bundle alles in einer einzigen Datei .js

   Ich benutze SystemJS Build Tool für das, weil ich es ist viel einfacher denken, als zum Beispiel webpack verwenden. Also, habe ich noch einen Schluck Aufgabe für diese den Prozess zu automatisieren:

   var SystemBuilder = require('systemjs-builder'); 
   
   gulp.task('app.systemjs.bundle', function() { 
       var builder = new SystemBuilder('build/js, { 
        paths: { 
         '*': '*.js' 
        }, 
        meta: { 
         'angular2/*': { 
          build: false 
         }, 
         'rxjs/*': { 
          build: false 
         } 
        } 
       }); 
   
       return builder.bundle('main', 'build/js/app.bundle.js'); 
   }); 
   

   Der Builder nimmt die gleichen Optionen wie SystemJS so ihre Config API überprüfen.

   Aufruf builder.bundle('main', ...) sucht nach main.js (die mit kantigem des bootstrap Anruf meine erste Skript. Es ist die gleiche Datei, die Sie in the 5 min quickstart sehen können), weil ich .js auf alle Pfade vom Builder gesucht hängen. Dies liegt daran, wenn Sie ein Modul in TS importieren Sie in der Regel rufen:

   import {ModalResultComponent} from './modal-result.component'; 
   

   die als ./modal-result.component Abhängigkeit kompiliert wird, und es ist über die Dateierweiterung nicht.Deshalb musste ich alle Pfade um *.js erweitern, damit der Ersteller alle kompilierten JavaScript-Dateien finden kann.

   Die Optionen meta weisen den Builder nur an, Abhängigkeiten zu ignorieren, die ich nicht bündeln möchte. Das ist Angular2 selbst und rxjs Bibliothek, weil ich import 'rxjs/add/operator/map' in main.ts.

   Dies generiert eine einzelne app.bundle.js Datei mit allen Modulen, die als benannte Module unter Verwendung System.register registriert sind.

3. Mit unserem app.bundle.js

   Der letzte Teil ist ein Stück Kuchen. Wir importieren einfach die standardmäßigen Angular2-Dateien und verwenden dann bundle option, um SystemJS mitzuteilen, wo alle unsere Abhängigkeiten liegen.

   <script> 
   System.config({ 
       packages: { 
        '/web': { 
         format: 'register', 
         defaultExtension: 'js' 
        } 
       }, 
       bundles: { 
        '/web/app.bundle': ['main'] 
       } 
   }); 
   System.import('main').then(null, console.error.bind(console)); 
   </script> 
   

   Wenn wir System.import('main') es in der Tat zuerst Downloads /web/app.bundle.js und registrieren alle Module im Paket aufrufen und nach, dass es Module main mit unserer Angular2 Bootstrap importiert.

   Und das war's!

Sie brauchen eigentlich nicht gulp überhaupt zu benutzen und alles mit reinem node Skript zu tun.

Das Bündeln von CSS-Dateien ist einfach mit Dingen wie cssnano und ich bin sicher, dass Sie Tutorials finden, wie Sie es überall verwenden können.

Ich bin sicher, es gibt andere Möglichkeiten, um das Gleiche zu tun. Angular2 soll Sie nicht nur auf eine Technologie beschränken. Die Verwendung von SystemJS scheint mir jedoch der einfachste Weg zu sein, da es standardmäßig das gleiche Modulsystem wie Angular2 verwendet.

Ich bin sicher, Sie könnten auch zum Beispiel commonjs Format verwenden, aber das würde erfordern, dass Sie auch einige Polyfill für require() Loader verwenden, aber ich habe es noch nicht versucht. Ich glaube, UMD könnte auch einen Versuch wert sein.