Séparer Angular2 Tapuscrit de fichiers et les fichiers JavaScript dans différents dossiers, peut-être 'dist‘
Je suis en utilisant le 5 min de démarrage rapide angulaires.io site web, qui contiennent un fichier de structure comme ceci:
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"
]
}
Également 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 changer la sourceMap de true à false, alors dans l'éditeur de code, le fichier n'est pas généré de nouveau, mais le fichier js toujours générée.
Je veux travailler sur un seul fichier ts et ne voulez pas d'obtenir un brunch de js et js.fichier de la carte, que dois-je faire pour mettre tous mes fichiers ts dans mes habitudes de développer floder comme dossier app et tous les js et js.carte fichiers dans un dossier appelé dist?
Un bon exemple de cela pourrait être angular2-webpack-démarrage rapide. Mais je n'arrive pas à comprendre comment ils font ça?
Tout conseils sur la façon de le faire, bien sûr, pas manuellement.
Merci,
- vous devez compiler le fichier d'enregistrement pour js c'est la façon dont le navigateur lit, prendre un coup d'oeil au format: "s'inscrire", defaultExtension: 'js' dans votre index.html
- angular2-webpack-démarreur est très bien jusqu'à date, il est actuellement sur la beta 1. Vous suggérons de vous familiariser avec git (en particulier git pull).
- Je prends la angular2-webpack-démarrage et commencer à se développer comme il y a un mois, mais il est réglé sur une autre distance privé github url déjà, donc dans ce cas, comment dois-je mettre à jour avec angular2-webpack-démarreur, la partie de qui dois-je mettre à jour? Merci.
- Vous pouvez simplement remplacer votre colis.json avec de l'actuel à partir d'ici, lien effacer
node_modules
etnpm install
de mettre tout à jour - Ne ce raheel shan a dit. À l'EXCEPTION de system.config.js il doit être 'app': 'dist/app' // au lieu de simplement 'dist'
- Il y a une extension pour VS Code voir ma réponse: stackoverflow.com/a/41256608/234110 pour plus de détails
Vous devez vous connecter pour publier un commentaire.
Probablement en retard, mais voici une solution en deux étapes.
Étape 1
Changement system.config.js par la mise à jour
'app'
à'dist/app'
:Maintenant, il ressemblera à ceci:
Étape 2
Créer le dist dossier.
Edit tsconfig.json et d'ajouter:
L'résultant
tsconfig.json
:Exécuter
npm start
et vous devriez voir tous les compilées.js
et.map.js
fichiers dans le dist dossier.Note: Allez par le biais d'autres réponses. Ils sont très utiles et instructifs aussi.
html/css files is not present in the dist folder
avoir des réponses ci-dessous...html/css files not present in the build folder
Vérifier ma réponse pour une solution propre qui n'implique pas de déplacer des choses autour .. si vous avez absolument besoin que vous pouvez configurer gorgée, sinon les valeurs par défaut sont beaucoup Angulaire 2 et CommonJs: stackoverflow.com/a/40694657/986160Ma solution est un peu différent de ci-dessus.
J'ai été à partir de la Angular2 de Démarrage rapide de la graine défini ici: https://github.com/angular/quickstart#create-a-new-project-based-on-the-quickstart
Et ensuite seulement changé les suivantes:
"outDir": "../dist"
àtsconfig.json
baseDir
attribut à l'intérieur debs-config.json
à"baseDir": ["dist", "src"]
Puis
npm run start
fonctionne comme avant (même en html/css et d'autres fichiers sans aucune copie), mais compilé.js
et.map
fichiers sont intégrées dans lesdist/app
et de ne pas polluer votresrc/app
répertoire.Veuillez noter que je n'ai pas testé la façon dont cela affecte de tester encore.
J'ai peut-être aussi en retard mais je l'ai fait.
D'abord faire ce raheel shan a dit.
Ensuite créer le dist dossier.
Après la création du dossier, allez dans le fichier
tsconfig.json
et ajouter ceci:L'résultant
tsconfig.json
Si vous exécutez maintenant
npm start
et enregistrer un fichier, vous devez en voir de toutes les compilées.js
et.map.js
dans le dist dossier.Merci raheel shan, votre réponse a donné une longueur d'avance,
Comme @Adavo, à juste titre, demandé ci-dessus dans les commentaires
La réponse à cette question est
* fournir un chemin d'accès complet au format HTML/CSS Fichier à l'aide de '/' (à partir de la racine) dans tous les .les Fichiers ts et surtout dans "templateURL" propriété de @Composante
après beaucoup de temps - je l'ai compris - sans l'aide de Gulp 🙂 Yipppeee
Des chemins relatifs dans Angulaire 2 ne sont pas si simple, parce que le cadre se veut être flexible avec la façon dont vous chargez vos fichiers (CommonJs, SystemJs, etc..)
selon Composant les Chemins Relatifs Angulaire 2 article.
Que l'article explique
module.id
lorsqu'il est utilisé avec CommonJs (vérifiez votre tsconfig.json) contient l'absolu de la racine du module et il peut être utilisé pour construire un chemin d'accès relatif.Donc une meilleure solution pourrait être de quitter le css/html fichiers avec les fichiers ts et configurer votre composant comme ci-dessous, en supposant que vous venez d'avoir votre version des fichiers dans un dossier distinct appelé dist.. de Cette façon, votre css et html, les fichiers seront chargés de la pas de problème à utiliser des chemins relatifs par la conversion de la dérivée de construire le chemin de la source qui les contient essentiellement la suppression de
/dist/
ou de la renommer en/src/
😉si vous avez des dossiers séparés à la source et de la construction, vous pouvez faire ceci à la place:
Donc, pour résoudre ce problème:
Faire les étapes dans les deux @raheel shan et @Lirianer réponses. ...alors vous pouvez finir avec cette.
J'ai résolu ce problème pour mes besoins, à l'aide de mnp scripts. Les scripts de l'article dans mon colis.fichier json est ci-dessous. La solution consiste à exécuter
onchnage
(un package npm -npm install --save onchange
) en parallèle avectsc
et le serveur. Ensuite utiliser rsync pour copier les éléments que vous souhaitez déplacer:Pour ceux d'entre vous sur Windows, vous pouvez obtenir
rsync
viaCygwin
ou avec des solutions prêtes à l'emploi telles que cwRsync.build
dossier et non pas undist
dossier, mais vous obtenez l'idée.onchange
vient de. Aussi, vous devriez poster une remarque que cette tranche ne fonctionne que pour les unix-comme des coquillages. Peut-être que ce n'est pas tellement un problème pour la plupart des gens, mais j'ai dernièrement rencontré beaucoup de devs (forcé) à l'aide de windows.onchange
et de l'information sur comment obtenirrsync
pour Windows. Laissez-moi savoir si cela répond à vos questions.J'ai essayé @WillyCla suggestion et a travaillé comme un charme, il suffit de noter que vous devrez ajouter le
onchange
dépendance à votrepackage.json
fichier. J'ai ajouté un peu, juste un peu plus de scripts d'avoir un propre programme d'installation lors de la première manche et aussi pour enlever les restes de html/css fichiers (ce serait bien si la même chose pourrait être fait pour TSC)De toute façon, ici, c'est une section de mon
package.json
fichierPour la
rsync
de supprimer, de l'avis de la--delete
drapeau sur larsync
de commande de lawatchassets
scriptAngular2 Tapuscrit de fichiers et les fichiers JavaScript dans différents dossier
Voici ma config Angulaire 2 la dernière version V2.1.1, et il fonctionne très bien!
tsconfig.json
JS:
systemjs.config.js
JS:
main: './dist/app/main.js',
system.js.config
à -map{app:"dist",..}
puis danspackages{app{main:"app/main.js"}}
} et danstsconfig.json
-"outDir": "dist"
+ html/css sourceInspiré par @Nagyl, j'ai développé ma propre voie, et je crois qu'il vaut la peine de partager:
1) Installer cpx
2) mise à Jour bs-config.json et le changement baseDir de "src" pour "dist"
3) mise à Jour tsconfig.json et ajouter outDir à la fin de compilerOptions:
4) package de mise à Jour.json:
4.1) ajouter une nouvelle commande à la fin de scripts:
4.2) modifier "démarrer" pour inclure "cpx de la commande":
Vous pouvez transpile
.ts
fichiers dans le navigateur, tout comme plunker est en train de faire dans leur angulaire 2 ts modèle.Il suffit de lancer l'éditeur, sélectionnez nouveau, puis AngularJS, et 2.0.x (TS) option(sur le fond). Mais le point de l'ensemble de l'aide webpack(ou de tout autre groupement de l'outil) est à transpile fichiers localement.
J'ai essayé quelques-uns des options mentionnées ci-dessus et enfin, c'est ce que j'ai réglé sur: Peep - un extension pour
Visual Studio Code
.Comment faire pour installer:
-
01/25/2017 - mises à jour: angulaires-cli hors de la boîte, prend soin de cela. et les travaux d'installation et d'aujourd'hui.
J'ai essayé les solutions proposées ici. Ils sont bons, mais pas idéal pour moi. Je veux une solution simple. Je ne veux pas coder en dur le chemin d'accès de l'information dans tous mes fichiers de composant. Je ne veux pas installer plus de mnp paquets de prendre soin de cela.
Donc, je viens de monter une meilleure alternative. Ce n'est pas une réponse directe à cette question, mais il fonctionne très bien pour moi.
Je viens de modifier mon espace de travail paramètres de sorte que la
js
fichiers sous/app
ne le montrent pas. Ils sont toujours là. Ils sont juste cachés à partir de mon espace de travail. Pour moi, c'est assez.J'utilise Sublime Text, voici donc ce que j'ai pour mon projet de paramètres:
Je suis sûr que beaucoup d'autres éditeurs ont des fonctions similaires.
Mise à JOUR:
Suffit d'utiliser Angulaire de la CLI. Tout est pris en charge automatiquement.
Angulaire 4 avec des fichiers de démarrage rapide, tout ce que j'avais à faire était de la suite (un mélange de l'énoncé précédemment réponses, mais des valeurs légèrement différentes) :
"outDir": "../dist"
"baseDir": ["dist", "src"],
"baseDir": ["dist", "src"],
Pas de changement systemjs.config.js.
J'ai essayé la suggestion de @raheel & il a travaillé pour moi. J'ai modifié la structure en fonction de mes besoins.
Je suis en utilisant la structure suivante
Pour obtenir ce que 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',
...
et dans le tsconfig.json que j'ai à ajouter
"outDir": "app/js"
Je travaille avec Angulaire 2.4. J'ai besoin d'une étape supplémentaire pour le faire fonctionner. Cette a été mise à jour systemJs référence à main.js fichier dans index.html
c'est, à partir de:
à:
Ajoutant sur le dessus de ce que raheel shan a dit.
J'ai dû faire des changements dans index.html pour réfléchir à l'importation correcte fichier javascript maintenant.
Voici le résumé de mon côté.
tsconfig.json
Avant
Après:
systemjs.config.js
Avant:
Après:
index.html
Avant:
Après: