Trennen Sie Angular2 TypeScript-Dateien und JavaScript-Dateien in verschiedene Ordner.

Meine Lösung unterscheidet sich ein wenig von der oben genannten. Ich begann mit dem hier definierten Angular2 Quickstart-Startwert: https://github.com/angular/quickstart#create-a-new-project-based-on- der Schnellstart

Und dann nur das Folgende geändert:

• "outDir": "../dist" zu tsconfig.json hinzugefügt
• Das baseDir-Attribut in bs-config.json wurde in "baseDir": ["dist", "src"] geändert.

Dann funktioniert npm run start wie zuvor (auch html/css und andere Dateien ohne Kopieren), aber .js- und .map-Dateien sind in dist/app integriert und beschädigen das src/app-Verzeichnis nicht.

Bitte beachten Sie, dass ich noch nicht getestet habe, wie sich dies auf das Testen auswirkt.

Ich komme vielleicht auch zu spät, aber ich habe es getan.

Zuerst mache was raheel shan sagte .

Dann erstellen Sie die dist Mappe. 

Nachdem Sie den Ordner erstellt haben, gehen Sie in die Datei tsconfig.json und fügen Sie Folgendes hinzu:

"outDir": "dist"

Der resultierende tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "dist"
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

Wenn Sie jetzt npm start ausführen und eine Datei speichern, sollten Sie alle kompilierten .js und .map.js in sehen dist Mappe.

Thanx raheel shan, deine Antwort gab einen Vorsprung

Wie @Adavo zu Recht oben in Kommentaren gefragt hat

Meine HTML/CSS-Dateien sind leider nicht im dist-Ordner vorhanden. So gehen Sie vor, um alle HTML/css in .__ zu kopieren. dist Ordner?

Die Antwort auf diese Frage lautet * Bietet den vollständigen Pfad zur HTML/CSS-Datei mit '/' (vom Stammverzeichnis) in allen .ts-Dateien und hauptsächlich in der Eigenschaft "templateURL" von @Component

nach langer Zeit - ich habe es herausgefunden - ohne Gulp :) Yipppeee

Leider sind meine HTML/CSS-Dateien nicht im Ordner dist vorhanden. Wie kann man html/css im Ordner dist kopieren?

Relative Pfade in Angular 2 sind nicht so einfach, da das Framework beim Laden Ihrer Dateien (CommonJs, SystemJs usw.) flexibel sein will.... Nach Komponentenrelative Pfade in Angular 2 article.

Wie der Artikel erklärt, enthält module.id bei Verwendung mit CommonJs (überprüfen Sie Ihre tsconfig.json) den absoluten Stamm des Moduls und kann zum Erstellen eines relativen Pfads verwendet werden.

Eine bessere Alternative wäre es, die css/html-Dateien bei den ts-Dateien zu belassen und Ihre Komponente wie unten beschrieben zu konfigurieren. Angenommen, Sie haben nur Ihre Build-Dateien in einem separaten Ordner namens dist wird problemlos mit relativen Pfaden geladen, indem der abgeleitete Build-Pfad in den Quellpfad konvertiert wird, der sie enthält - im Wesentlichen /dist/ entfernt oder in /src/;) umbenannt;)

@Component({
   moduleId: module.id.replace("/dist/", "/"),
   templateUrl: 'relative-path-to-template/component.html',
...
});

wenn Sie separate Ordner für Quelle und Build haben, können Sie dies stattdessen tun:

@Component({
   moduleId: module.id.replace("/dist/", "/src/"),
   templateUrl: 'relative-path-to-template/component.html',
...
});

Um dies zu lösen:

Leider sind meine HTML/CSS-Dateien nicht im Ordner dist vorhanden. Wie kann man html/css im Ordner dist kopieren?

Führen Sie die Schritte in den Antworten von @raheel shan und @ Lirianer aus. ... dann können Sie damit Schluss machen.

Ich habe dies für meine Zwecke mit npm-Skripten gelöst. Der Abschnitt scripts in meiner package.json-Datei befindet sich unten. Die Lösung besteht darin, onchnage (ein npm-Paket - npm install --save onchange) gleichzeitig mit tsc und dem Server auszuführen. Dann kopieren Sie die zu verschiebenden Assets mit rsync:

"scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" \"npm run watchassets\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings",
    "movesssets": "rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' ./app/ ./build/",
    "watchassets": "onchange 'app/**/*.css' 'app/**/*.html' -e 'build/*' -v -- rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' ./app/ ./build/"
}

Für die von Ihnen unter Windows können Sie rsync über Cygwin oder mit Paketlösungen wie cwRsync erhalten.

Ich habe den Vorschlag von @WillyC ausprobiert und wie ein Zauber gearbeitet. Beachten Sie, dass Sie die onchange-Abhängigkeit zu Ihrer package.json-Datei hinzufügen müssen. Ich habe ein wenig nur ein paar zusätzliche Skripte hinzugefügt, um beim ersten Durchlauf ein sauberes Setup zu haben und übrig gebliebene HTML/CSS-Dateien zu entfernen (es wäre schön, wenn man es für TSC tun könnte)

Wie auch immer, hier ist ein Abschnitt meiner package.json-Datei

{
  ...
  "scripts": {
    "start": "npm run cleandist && npm run moveassets && tsc && concurrently \"tsc -w\" \"lite-server\" \"npm run watchassets\" ",
    ...
    "cleandist": "rm -rf dist/*",
    "moveassets": "rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' ./app/ ./dist/",
    "watchassets": "onchange 'app/**/*.css' 'app/**/*.html' -e 'dist/*' -v -- rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' --delete ./app/ ./dist/"
  },
  ...
  "devDependencies": {
    ...
    "onchange":"^3.0.2"
  }
}

Beachten Sie für rsync delete das Flag --delete im Befehl rsync des watchassets-Skripts

Angular2 TypeScript-Dateien und JavaScript-Dateien in einen anderen Ordner

Hier ist meine Konfiguration für Angular 2 die neueste Version V2.1.1 und es funktioniert sehr gut!

tsconfig.json 

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "outDir": "./app/dist"
    }
}

systemjs.config.js 

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      // app: 'app/dist',  &&  main: './dist/main.js',
      // Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/app/dist/dist/main.js(…)
      app: 'app',
      // angular bundles
      '@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',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        // index.html import path
        // Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/app/dist/main.js(…)
        // app: 'app/dist',  &&  main: './main.js',
        main: './dist/main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

Inspiriert von @Nagyl entwickelte ich meinen eigenen Weg und ich glaube, es lohnt sich zu teilen:

1) Installieren Sie cpx

npm install cpx

2) Aktualisieren Sie bs-config.json und ändern Sie baseDir von "src" in "dist".

"baseDir":"dist"

3) Aktualisieren Sie tsconfig.json und fügen Sie outDir am Ende der CompilerOptions hinzu:

"outDir": "../dist"

4) Aktualisieren Sie package.json: 4.1) Fügen Sie einen neuen Befehl am Ende der Skripte hinzu:

"cpx": "cpx \"src/**/*.{html,css,js,png,jpg}\" dist --watch"

4.2) Ändern Sie die Startzeile so, dass der Befehl "cpx" enthalten ist:

"start": "concurrently \"npm run build:watch\" \"npm run cpx\" \"npm run serve\"",

Sie können .ts-Dateien im Browser transpilieren, genau wie plunker in ihrer eckigen 2-ts-Vorlage.

Starten Sie einfach den Editor, wählen Sie new, dann AngularJS und die Option 2.0.x (TS) (ganz unten). Bei der Verwendung von Webpack (oder einem anderen Bündelungswerkzeug) müssen Dateien jedoch lokal lokal verschoben werden.

Für Angular 4 mit Dateien von Quickstart musste ich nur Folgendes tun (eine Mischung aus den zuvor genannten Antworten, jedoch etwas anderen Werten): 

• In tsconfig.json (hinzufügen): "outDir": "../dist"
• In bs-config.json (Änderung): "baseDir": ["dist", "src"],
• In bs-config.e2e.json (Änderung): "baseDir": ["dist", "src"],

Keine Änderung an systemjs.config.js.

Ich habe einige der oben genannten Optionen ausprobiert und schließlich habe ich mich dazu entschieden: Peep - eine extension für Visual Studio Code. 

Wie installiert man:

• Ansicht -> Erweiterungen
• Gucken
• Installieren
• Neu laden
• Ansicht -> Befehlspalette
• Guck nicht
• Ändern Sie .vscode/settings.json nach Bedarf (meines wird unten gezeigt)

-

{
  "TypeScript.check.workspaceVersion": false,
  "files.exclude": {
    "**/*.js": true,
    "**/*.js.map": true,
    "node_modules/": true,
    "dist/": true,
    "lib/": true
  }
}

25.01.2017 - Updates: _ ​​angle-cli aus der Box, kümmert sich darum. und Installationsarbeiten und jetzt.

Ich habe die hier aufgeführten Lösungen ausprobiert. Sie sind gut, aber nicht ideal für mich. Ich möchte eine einfache Lösung. Ich möchte die Pfadinformationen nicht in allen meinen Komponentendateien hartcodieren. Ich möchte nicht mehr npm Pakete installieren, um das zu erledigen.

Also komme ich auf eine einfachste Alternative. Es ist keine direkte Antwort auf diese Frage, aber es funktioniert sehr gut für mich.

Ich ändere einfach meine Arbeitsbereichseinstellungen, damit die js-Dateien unter /app nicht angezeigt werden. Sie sind immer noch da. Sie sind nur vor meinem Arbeitsbereich versteckt. Für mich ist das genug.

Ich verwende Sublime Text, also habe ich hier meine Projekteinstellungen:

"file_exclude_patterns": ["app/*.js"]

Ich bin mir sicher, dass viele andere Editoren ähnliche Funktionen haben.

UPDATE:

Verwenden Sie einfach Angular CLI. Alles wird automatisch erledigt.

Ich arbeite mit Angular 2.4. Ich brauchte einen zusätzlichen Schritt, damit es funktioniert. Dies war das Update von systemJs auf die main.js-Datei in index.html

System.import ('main.js'). Catch (function (err) {console.error (err); });

zu:

System.import ('dist/main.js'). Catch (function (err) { Console.error (err);});

Ich habe den Vorschlag von @raheel ausprobiert und es hat für mich funktioniert. Ich habe die Struktur an meine Bedürfnisse angepasst. 

Ich verwende die folgende Struktur

Zu diesem Zweck habe ich nur zwei Dateien geändert: 1. systemjs.config.js und 2.tsconfig.json

In systemjs.config.js habe ich geändert

map: { // previously it was app: 'app', app: 'app/js', ...

und in tsconfig.json muss ich "outDir": "app/js" hinzufügen

Ich fügte hinzu, was raheel shan sagte ..

Hier ist eine Zusammenfassung von meiner Seite.

tsconfig.json

Vor

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

Nach dem:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "outDir": "dist"
  },
  "exclude": [ 
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

systemjs.config.js

Vor:

'app': 'app',

Nach dem:

'app': 'dist/app', //'app

index.html

Vor:

System.import('main.js').catch(function(err){ console.error(err); });

Nach dem:

System.import('dist/main.js').catch(function(err){ console.error(err); });