webentwicklung-frage-antwort-db.com.de

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

Ich verwende die 5 min Quickstart von angle.io-Website, die eine Dateistruktur wie diese enthält:

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

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 das 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, daher wird die Map-Datei im Code-Editor nicht erneut generiert, die js-Datei wird jedoch weiterhin generiert. 

Ich möchte nur an der TS-Datei arbeiten und möchte nicht einen Brunch der Js- und Js.map-Datei erhalten. Was soll ich tun, um alle meine TS-Dateien in meinen regulären Floder-App-Ordner und alle JS- und JS-Dateien zu legen. Dateien in einen Ordner namens dist ordnen?

Ein gutes Beispiel hierfür ist angle2-webpack-quickstart . Aber ich habe nicht herausgefunden, wie sie das machen?

Irgendwelche Ratschläge, wie das geht, natürlich nicht manuell.

Vielen Dank,

81
Xinrui Ma

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

Schritt 1

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

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

Jetzt sieht es so aus:

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

Schritt 2

Erstellen Sie den Ordner dist

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

"outDir": "dist"

Der resultierende tsconfig.json:

{
  "compilerOptions": {
    .
    .
    .
    .

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

Starten Sie npm start und Sie sollten alle kompilierten .js- und .map.js-Dateien im Ordner dist sehen.

Hinweis : Andere Antworten durchgehen. Sie sind sehr nützlich und auch informativ.

96
Muhammad Raheel

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.

19
NagyI

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.

16
Lirianer

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

8

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',
...
});
7

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.

7
WillyC

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

5
AlphaZygma

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

 enter image description here

3
xgqfrms

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\"",

 Step 2 modification

 Step 3 modification

 Step 4 modification

3
Windchill

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.

2
Eggy

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.

2
M. Neuweiler

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.

2
Anand Rockzz

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.

2
Shawn

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

1
Eugenio

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

 I am using the following structure

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', ...

 systemjs.config.js

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

 tsconfig.json

1
Sanjoy Kanrar

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