Trennen Sie Angular2 TypeScript-Dateien und JavaScript-Dateien in verschiedene Ordner, möglicherweise 'dist'.

Ich verwende den 5-minütigen Schnellstart von der Website angle.io, der eine Dateistruktur wie die folgende enthält:

angular2-quickstart
 app
   app.component.ts
   boot.ts
 index.html
 license.md
 package.json
 tsconfig.json

Die Datei tsconfig.json ist ein Codeblock wie folgt:

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
} 

Auch die package.json:

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "typescript": "^1.7.3"
  }
}

Ich ändere die sourceMap von true in false, sodass im Code-Editor die Map-Datei nicht erneut generiert wird, die js-Datei jedoch weiterhin generiert wird.

Ich möchte nur an der ts-Datei arbeiten und möchte keinen Brunch von js und js.map-Dateien erhalten. Was soll ich tun, um alle meine ts-Dateien in meinem regulären Entwicklungs-Floder wie dem App-Ordner und allen js und js abzulegen? Dateien in einen Ordner namens dist?

Ein gutes Beispiel hierfür könnte der Angular2-Webpack-Schnellstart sein . Aber ich habe nicht herausgefunden, wie sie das machen?

Irgendwelche Ratschläge dazu natürlich nicht manuell.

Vielen Dank,

Wahrscheinlich spät, aber hier ist eine zweistufige Lösung.

Schritt 1

Ändern Sie system.config.js, indem Sie 'app'auf Folgendes aktualisieren 'dist/app':

var  map = {
    'app':                        'app', // 'dist/app',
    .
    .
    .
};

Jetzt wird es so aussehen:

var  map = {
    'app':                        'dist/app', // 'dist/app',
    .
    .
    .
};

Schritt 2

Erstellen Sie den dist- Ordner.

Bearbeiten Sie tsconfig.json und fügen Sie hinzu:

"outDir": "dist"

Das Ergebnis tsconfig.json:

{
  "compilerOptions": {
    .
    .
    .
    .

    "outDir": "dist" // Pay attention here
  },
  "exclude": [
    .
    .
    .
  ]
}

Führen npm startSie es aus, und Sie sollten alle kompilierten Dateien .jsund .map.jsDateien im Ordner dist sehen .

Hinweis : Gehen Sie andere Antworten durch. Sie sind auch sehr nützlich und informativ.

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

Und dann nur folgendes geändert:

• Hinzugefügt "outDir": "../dist"zutsconfig.json
• Changed das baseDirAttribut innen bs-config.jsonzu"baseDir": ["dist", "src"]

Funktioniert dann npm run startwie zuvor (auch HTML / CSS und andere Dateien ohne Kopieren), aber kompiliert .jsund .mapDateien sind integriert dist/appund verschmutzen Ihr src/appVerzeichnis nicht.

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

Ich kann auch zu spät sein, aber ich habe das getan.

Mach zuerst, was Raheel Shan gesagt hat .

Erstellen Sie dann den dist- Ordner.

Gehen Sie nach dem Erstellen des Ordners zur Datei tsconfig.jsonund fügen Sie Folgendes hinzu:

"outDir": "dist"

Das Ergebnis 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 laufen npm startund Speichern einer Datei sollten Sie alle die kompilierte sehen .jsund .map.jsin der dist - Ordner.

Vielen Dank, Raheel Shan, Ihre Antwort gab einen Vorsprung,

Wie @Adavo oben in den Kommentaren zu Recht gefragt hat

Leider sind meine HTML / CSS-Dateien nicht im dist-Ordner vorhanden. Wie geht man vor, um alle HTML / CSS in dist Ordner zu kopieren?

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

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

Leider sind meine HTML / CSS-Dateien nicht im dist-Ordner vorhanden. Wie geht man vor, um alle HTML / CSS in dist Ordner zu kopieren?

Relative Pfade in Angular 2 sind nicht so einfach, da das Framework flexibel sein möchte, wie Sie Ihre Dateien (CommonJs, SystemJs usw.) gemäß dem Artikel über komponentenrelative Pfade in Angular 2 laden .

Wie im Artikel erläutert, module.identhält die Verwendung mit CommonJs (überprüfen Sie Ihre tsconfig.json) die absolute Wurzel des Moduls und kann zum Erstellen eines relativen Pfads verwendet werden.

Eine bessere Alternative könnte also sein, die CSS / HTML-Dateien mit den ts-Dateien zu belassen und Ihre Komponente wie unten zu konfigurieren, vorausgesetzt, Sie haben Ihre Build-Dateien nur in einem separaten Ordner namens dist . Auf diese Weise werden Ihre CSS- und HTML-Dateien mit geladen Kein Problem bei der Verwendung relativer Pfade durch Konvertieren des abgeleiteten Erstellungspfads in den Quellpfad, der sie enthält - im Wesentlichen Entfernen /dist/oder Umbenennen in /src/;)

@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 dist-Ordner vorhanden. Wie geht man vor, um alle HTML / CSS in dist Ordner zu kopieren?

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

Ich habe dies für meine Zwecke mit npm-Skripten gelöst. Der Skriptabschnitt in meiner Datei package.json befindet sich unten. Die Lösung besteht darin, onchnage(ein npm-Paket - npm install --save onchange) gleichzeitig mit tscdem Server auszuführen . Verwenden Sie dann rsync, um die Assets zu kopieren, die Sie verschieben möchten:

"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 diejenigen von Ihnen unter Windows können Sie rsyncüber Cygwinoder mit Paketlösungen wie cwRsync erhalten .

Ich habe den Vorschlag von @WillyC ausprobiert und wie ein Zauber gearbeitet. Beachten Sie jedoch, dass Sie die onchangeAbhängigkeit zu Ihrer package.jsonDatei hinzufügen müssen . Ich habe ein paar zusätzliche Skripte hinzugefügt, um beim ersten Start ein sauberes Setup zu haben und um übrig gebliebene HTML / CSS-Dateien zu entfernen (es wäre schön, wenn dies auch für TSC möglich wäre).

Wie auch immer, hier ist ein Abschnitt meiner package.jsonDatei

{
  ...
  "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"
  }
}

rsyncBeachten Sie beim Löschen das --deleteFlag im rsyncBefehl des watchassetsSkripts

Angular2 TypeScript-Dateien und JavaScript-Dateien in verschiedenen Ordnern

Hier ist meine Konfiguration für Angular 2, die neueste Version V2.1.1, und sie 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 habe ich meinen eigenen Weg entwickelt 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 von compilerOptions hinzu:

"outDir": "../dist"

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

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

4.2) Ändern Sie die Zeile "start" so, dass sie den Befehl "cpx" enthält:

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

Sie können .tsDateien im Browser transpilieren , genau wie Plunker in seiner eckigen 2-ts-Vorlage tut.

Starten Sie einfach den Editor, wählen Sie die Option Neu, dann AngularJS und 2.0.x (TS) (ganz unten). Bei der Verwendung von Webpack (oder einem anderen Bündelungswerkzeug) geht es jedoch vor allem darum, Dateien lokal zu transpilieren.

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

Wie installiert man:

• Ansicht -> Erweiterungen
• Gucken
• Installieren
• Neu laden
• Ansicht -> Befehlspalette
• Peep Keine
• Ändern Sie .vscode / settings.json nach Bedarf (meins unten gezeigt).

- -

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

25.01.2017 - Updates: Angular -Cli aus der Box, kümmert sich darum. und Installation funktioniert 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 in allen meinen Komponentendateien nicht fest codieren. Ich möchte nicht mehr npm-Pakete installieren, um dies zu erledigen.

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

Ich habe nur meine Arbeitsbereichseinstellungen so angepasst, dass die jsDateien unter /appnicht angezeigt werden. Sie sind immer noch da. Sie sind nur vor meinem Arbeitsbereich versteckt. Für mich ist das genug.

Ich verwende Sublime Text. Daher habe ich Folgendes für meine Projekteinstellungen:

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

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

AKTUALISIEREN:

Verwenden Sie einfach Angular CLI. Alles wird automatisch erledigt.

Für Angular 4 mit Dateien vom Schnellstart musste ich nur Folgendes tun (eine Mischung aus den zuvor angegebenen Antworten, aber leicht unterschiedlichen Werten):

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

Keine Änderung an systemjs.config.js.

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

Ich benutze die folgende Struktur

Um dies zu erhalten, habe ich nur zwei Dateien geändert: 1. systemjs.config.js und 2.tsconfig.json

In systemjs.config.js habe ich zu geändert

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

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

Ich arbeite mit Angular 2.4. Ich brauchte einen zusätzlichen Schritt, damit es funktioniert. Dies war der Verweis des Aktualisierungssystems auf die Datei main.js in der Datei index.html.

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

zu:

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

Hinzu kommt, was Raheel Shan gesagt hat. Ich musste zusätzliche Änderungen in index.html vornehmen, um zu reflektieren, dass jetzt die richtige Javascript-Datei importiert wird.

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); });