web-dev-qa-db-fra.com

Séparez les fichiers Angular2 TypeScript et les fichiers JavaScript dans des dossiers différents, par exemple, 'dist'

J'utilise le site Web 5 min quickstart from angular.io, qui contient une structure de fichier similaire à celle-ci:

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

le tsconfig.json est un bloc de code comme ceci:

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

Aussi le 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"
  }
}

Je modifie le sourceMap de true en false, de sorte que dans l'éditeur de code, le fichier de mappage n'est pas généré à nouveau, mais le fichier js est toujours généré. 

Je veux travailler uniquement sur le fichier ts et ne pas vouloir obtenir un brunch de fichier js et js.map, que dois-je faire pour mettre tous mes fichiers ts dans mon dossier de développement régulier comme le dossier de l'application et tous les fichiers js et js mapper des fichiers dans un dossier appelé dist?

Un bon exemple de ceci pourrait être angular2-webpack-quickstart . Mais je n'ai pas compris comment ils font ça?

Tout conseil, comment faire cela, bien sûr, pas manuellement.

Merci,

javascriptjsonangular
81
Xinrui Ma

Probablement tard mais voici une solution en deux étapes.

Étape 1

Modifiez system.config.js en mettant à jour 'app' en 'dist/app':

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

Maintenant ça va ressembler à ça:

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

Étape 2

Créez le dossier dist . 

Éditez tsconfig.json et ajoutez:

"outDir": "dist"

Le tsconfig.json résultant:

{
  "compilerOptions": {
    .
    .
    .
    .

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

Exécutez npm start et vous devriez voir tous les fichiers .js et .map.js compilés dans le dossier dist .

Note : Passez par d'autres réponses. Ils sont très utiles et instructifs aussi.

96
Muhammad Raheel

Ma solution est un peu différente de ce qui précède . Je partais de la graine Angular2 Quickstart définie ici: https://github.com/angular/quickstart#create-a-new-project-based-on- the-quickstart

Et alors seulement changé ce qui suit:

  • Ajout de "outDir": "../dist" à tsconfig.json
  • Changement de l'attribut baseDir dans bs-config.json en "baseDir": ["dist", "src"]

Alors, npm run start fonctionne comme avant (même les fichiers html/css et autres sans aucune copie), mais les fichiers .js et .map compilés sont intégrés à dist/app et ne pollueront pas votre répertoire src/app.

Veuillez noter que je n'ai pas encore testé l'impact de cela sur les tests.

19
NagyI

Je suis peut-être aussi en retard mais je l'ai fait.

Commençons par faire ce que rahanle dit shan .

Puis créez le dist dossier. 

Après avoir créé le dossier, allez dans le fichier tsconfig.json et ajoutez ceci:

"outDir": "dist"

Le tsconfig.json résultant

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

Si vous exécutez maintenant npm start et enregistrez un fichier, vous devriez voir tous les .js et .map.js compilés dans le répertoire. dist dossier.

16
Lirianer

Thanx raheel shan, votre réponse a donné une longueur d'avance,

Comme @Adavo l'a demandé à juste titre dans les commentaires ci-dessus

Malheureusement, mes fichiers html/css ne sont pas présent dans le dossier dist. Comment faire pour copier tous les fichiers html/css dans dossier dist?

La réponse à cette question est * Indiquer le chemin complet du fichier HTML/CSS à l'aide de '/' (à partir du répertoire racine) dans tous les fichiers .ts et principalement dans la propriété "templateURL" de @Component

après beaucoup de temps - je l'ai compris - sans utiliser Gulp :) Yipppeee

8
Abdeali Chandanwala

Malheureusement, mes fichiers html/css ne sont pas présents dans le dossier dist. Comment faire pour copier tous les fichiers html/css dans le dossier dist?

Les chemins relatifs dans Angular 2 ne sont pas aussi simples car le framework veut être flexible dans le chargement de vos fichiers (CommonJs, SystemJs, etc.) En fonction de Chemins relatifs aux composants dans Angular 2 article.

Comme l'explique l'article, module.id utilisé avec CommonJs (vérifiez votre tsconfig.json) contient la racine absolue du module et peut être utilisé pour créer un chemin relatif.

Donc, une meilleure alternative pourrait être de laisser les fichiers css/html avec les fichiers ts et de configurer votre composant comme ci-dessous, en supposant que vous ayez juste vos fichiers de construction dans un dossier séparé appelé dist .. De cette façon, vos fichiers css et html sera chargé sans problème en utilisant les chemins relatifs en convertissant le chemin de construction dérivé en chemin source qui les contient - essentiellement en supprimant /dist/ ou en le renommant en /src/;)

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

si vous avez des dossiers distincts pour la source et la construction, vous pouvez le faire à la place:

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

Donc, pour résoudre ceci:

Malheureusement, mes fichiers html/css ne sont pas présents dans le dossier dist. Comment faire pour copier tous les fichiers html/css dans le dossier dist?

Suivez les étapes décrites dans les réponses @raheel shan et @ Lirianer. ... alors vous pouvez en finir avec ça.

J'ai résolu ce problème à l'aide de scripts npm. La section des scripts de mon fichier package.json est ci-dessous. La solution consiste à exécuter onchnage (un package npm - npm install --save onchange) simultanément à tsc et au serveur. Ensuite, utilisez rsync pour copier les actifs que vous souhaitez déplacer:

"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/"
}

Pour ceux d'entre vous sur Windows, vous pouvez obtenir rsync via Cygwin ou avec des solutions packagées telles que cwRsync .

7
WillyC

J'ai essayé la suggestion de @WillyC et j'ai travaillé comme un charme, il suffit de noter que vous devrez ajouter la dépendance onchange à votre fichier package.json. J'ai ajouté un petit peu plus de scripts pour avoir une configuration propre lors de la première utilisation et également pour supprimer les fichiers restants html/css (ce serait bien si cela pouvait être fait pour TSC)

Quoi qu’il en soit, voici une section de mon fichier package.json

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

Pour la suppression rsync, notez l'indicateur --delete sur la commande rsync du script watchassets

5
AlphaZygma

Fichiers TypeScript Angular2 et fichiers JavaScript dans un dossier différent

Voici ma configuration pour Angular 2 de la dernière version V2.1.1, et cela fonctionne très bien!

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

Inspiré par @Nagyl, j'ai développé ma propre voie et je crois que cela vaut la peine de partager:

1) Installer cpx

npm install cpx

2) Mettez à jour bs-config.json et remplacez baseDir de "src" par "dist"

"baseDir":"dist"

3) Mettez à jour tsconfig.json et ajoutez outDir à la fin de compilerOptions:

"outDir": "../dist"

4) Mettez à jour package.json: 4.1) ajoutez une nouvelle commande à la fin des scripts:

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

4.2) modifier la ligne "start" pour inclure la commande "cpx":

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

 Step 2 modification

 Step 3 modification

 Step 4 modification

3
Windchill

Vous pouvez transpiler des fichiers .ts dans le navigateur, comme le fait plunker dans leur modèle angulaire 2 ts.

Lancez simplement editor, sélectionnez new, puis AngularJS et l'option 2.0.x (TS) (tout en bas). Mais l’intérêt de Webpack (ou de tout autre outil de groupement) est d’extraire localement les fichiers.

2
Eggy

Pour Angular 4 avec les fichiers de quickstart, tout ce que je devais faire était le suivant (un mélange des réponses indiquées précédemment, mais des valeurs légèrement différentes): 

  • Dans tsconfig.json (add): "outDir": "../dist"
  • Dans bs-config.json (changement): "baseDir": ["dist", "src"],
  • Dans bs-config.e2e.json (changement): "baseDir": ["dist", "src"],

Aucun changement à systemjs.config.js.

2
M. Neuweiler

J'ai essayé quelques-unes des options mentionnées ci-dessus et, finalement, voici ce que j'ai choisi: Peep - une extension pour Visual Studio Code. 

Comment installer:

  • Vue -> Extensions
  • Piaulement
  • Installer
  • Recharger
  • Vue -> Palette de commande
  • Peep Aucun
  • modifiez .vscode/settings.json selon vos besoins (le mien est illustré ci-dessous)

-

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

01/25/2017 - Mises à jour: _ ​​{angular-cli} _ out of the box, s'en charge et les travaux d'installation et maintenant.

2
Anand Rockzz

J'ai essayé les solutions énumérées ici. Ils sont bons, mais pas idéaux pour moi. Je veux une solution simple. Je ne veux pas coder en dur les informations de chemin dans tous mes fichiers de composants. Je ne veux pas installer plus de paquets npm pour m'en occuper.

Je trouve donc une alternative plus facile. Ce n'est pas une réponse directe à cette question, mais cela fonctionne très bien pour moi.

Je modifie simplement les paramètres de mon espace de travail pour que les fichiers js sous /app ne soient pas affichés. Ils sont toujours là. Ils sont juste cachés de mon espace de travail. Pour moi, ça suffit.

J'utilise Sublime Text, voici donc ce que j'ai pour les paramètres de mon projet:

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

Je suis sûr que beaucoup d'autres éditeurs ont des fonctions similaires.

METTRE À JOUR:

Il suffit d'utiliser CLI angulaire. Tout est pris en charge automatiquement.

2
Shawn

Je travaille avec Angular 2.4. J'avais besoin d'une étape supplémentaire pour que cela fonctionne. Il s'agissait de la référence systèmeJs de mise à jour du fichier main.js dans index.html

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

à:

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

1
Eugenio

J'ai essayé la suggestion de @raheel et cela a fonctionné pour moi. J'ai modifié la structure en fonction de mes besoins. 

J'utilise la structure suivante

 I am using the following structure

Pour obtenir cela, je n'ai modifié que deux fichiers: 1. systemjs.config.js et 2.tsconfig.json

Dans systemjs.config.js j'ai changé pour

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

 systemjs.config.js

et dans tsconfig.json je dois ajouter "outDir": "app/js"

 tsconfig.json

1
Sanjoy Kanrar

Ajoutant au-dessus de ce que raheel shan a dit ... Je devais apporter des modifications supplémentaires dans index.html afin de refléter l’importation correcte du fichier javascript.

Voici le résumé de mon côté.

tsconfig.json

Avant

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

Après:

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

Avant:

'app': 'app',

Après:

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

index.html

Avant:

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

Après:

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