Angular 2 + Typoskript Compiler Kopie HTML und CSS-Dateien

Question

In Angular2 würde ich

"outDir": "dist/app" 

in tsconfig.json haben. Als Ergebnis werden die transrapierten .js- und .map-Dateien im Ordner/dist/app/und/oder seinen Unterordnern generiert. Das funktioniert ganz gut.

In meiner components.ts Dateien Ich habe auch HTML und CSS wie diese

@Component({ 
    selector: 'my-app', 
    templateUrl: 'app/appshell/app.component.html', 
    styleUrls: ['app/appshell/app.component.css'], 
    ...... 
} 

verwiesen Gibt es eine Möglichkeit Compiler die referenzierten HTML und CSS-Dateien für das gesamte Projekt auch zu machen zu kopieren? Wenn ja, wie würde ich meine tsconfig.json konfigurieren?

Ich habe hier in den Compiler-Optionen untersucht, aber nichts über das Kopieren von HTML/CSS-Dateien gefunden.

Update: Meine Ordnerstruktur ist wie diese

Root 
    |--app  // for ts 
    |--dist/app // for js 

tsconfig.json

"outDir": "dist/app" 

package.json

{ 
    "name": "TestApp", 
    "version": "1.0.0", 
    "scripts": { 
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ", 
    "html": "find ./app -name '*.html' -type f -exec cp --parents {} ./dist \\;", 
    ...... 
} 

Es ist nicht HTML-Dateien kopiert. Es gibt jedoch keinen Fehler.

-Update wieder:

Für diejenigen, die auf Linux OS, Bernardo-Lösung ist eine Arbeits ein. Für diejenigen, die unter Windows OS sind, sollte das folgende funktionieren.

Answer 1

Nein, der TypeScript-Compiler ist nur für * .ts-Datei.

Sie müssen andere Dateien wie * .html und * .css mit einer Kopiermethode wie cp Shell-Befehl in einem Npm-Skript oder grunt-contrib-copy zum Beispiel kopieren.

Beispiel mit npm Skript:

"scripts": { 
    "html": "find ./app -name '*.html' -type f -exec cp --parents {} ./dist \\;" 
} 

Gerade npm run html in der Shell ausgeführt.

Beispiel mit Grunzen:

copy: { 
     html: { 
      src: ['**/*.html'], 
      dest: 'dist', 
      cwd: 'app', 
      expand: true, 
     } 
} 

Answer 2

Aus der Antwort des Bernardo änderte ich diese

 "html": "find ./app -name '.html' -type f -exec cp --parents {} ./dist \\;"

für diesen

"html": "cd app && tsc && find . \(-name '.html' -or -name '*.css' \) -type f -exec cp --parents {} ../dist \\;"

und arbeiten gut. Kompiliere und kopiere html und css Dateien in einer Anweisung Ich habe auch diese

"clean": "rm -rf dist"

hinzugefügt, um das gesamte Verzeichnis dist zu entfernen. Ich hoffe das hilft!

Answer 3

Als eine Alternative von meiner detaillierten Antwort hier: https://stackoverflow.com/a/40694657/986160 könnte sein, Ihre CSS und HTML mit den ts-Dateien zu verlassen. Dann können Sie das Modul verwenden.ID, die den Weg zu den js der Komponente zeigen wird und, nachdem es entsprechend Umwandlung können Sie im Wesentlichen relative Pfade verwenden :)

Für Ihren Fall denke ich, so etwas wie das funktioniert:

@Component({ 
    moduleId: module.id.replace("/dist/", "/"), 
... 
}); 

Answer 4

Für eine OS unabhängige Lösung, verwenden copyfiles

npm install copyfiles --save-dev 

Dann ein Skript in den package.json

"scripts": { 
    "html": "copyfiles app/**/*.html app/**/*.css dist/" 
} 

Jetzt NPM laufen html sollten alle CSS und HTML-Dateien aus dem app/Ordner kopieren dist/app/

EDIT: Ich mag würde meine Antwort ändern angular-cli hinweisen. Dieses Werkzeug für die Befehlszeilenprogrammierung wird vom eckigen Team unterstützt und macht die Bündelung unter anderem zu einem Kinderspiel (ng build --prod).