web-dev-qa-db-fra.com

Comment servir un dossier angular 2 dist index.html

J'utilise cette application 4 graines angulaire: https://github.com/2sic/app-tutorial-angular4-hello-dnn

Il utilise webpack et fonctionne bien.

Il semble que servir uniquement les fichiers dev et pas le dossier dist /.

Je veux servir le dossier dist.

Pas sûr que la commande pour faire ceci ou si j'ai besoin d'installer un serveur léger ou quelque chose.

Je lance cette commande pour créer le dossier dist (qui fonctionne très bien):

g build --prod --aot --output-hashing=none

Maintenant, je veux exécuter cette version dans le navigateur.

angularwebpackwebpack-dev-server
14
AngularM

Vous pouvez utiliser http-server pour le faire. Tout d'abord générer une construction en utilisant la commande ng build --prod --aot --output-hashing=none. Cela créera un dossier dist dans votre structure de répertoires.

Ensuite, lancez http-server ./dist, qui commencera à servir votre projet à partir du dossier dist.

Assurez-vous que vous avez installé le serveur http globalement en utilisant 

npm install http-server -g

Pour référence, voir https://www.npmjs.com/package/http-server

38
noor

Vous avez besoin d'un serveur pour servir votre build généré.

J'utilise http-server. Installez le serveur http en utilisant:

npm install -g http-server

maintenant, allez dans votre dossier dist et lancez cette commande

http-server

comme indiqué ici:

 enter image description here

Vérifiez http: // localhost: 8080 dans votre navigateur

12
Deepak Kumar

Au moins pour les applications angulaires, angular-http-server semble être une option plus intéressante.

Tout d'abord l'installer avec

npm install angular-http-server -g # or yarn global add angular-http-server

Puis exécutez-le:

angular-http-server --path path/to/dist/folder

Regardez le repo pour plus d’informations sur l’utilisation.

PS: Selon l’auteur, il devrait également fonctionner avec d’autres frameworks SPA (React, Vue, etc.).

11
rsenna

ng serve fonctionnera normalement et ne nécessite pas de construction préalable. Il génère des fichiers en mémoire et possède des fonctionnalités supplémentaires telles que le rechargement automatique.

1
Tatsuyuki Ishi

Un petit conseil 

afin d'éviter d'installer globalement

installer dans votre racine

npm i http-server

dans votre package.json

"scripts": {
    "pwa": "http-server ./dist"
  }

que

npm run pwa
0
Whisher

Je sers le dossier dist avec le CLI angulaire ...

ng serve --prod = true

Lorsque la valeur est true, la configuration de construction est définie sur la cible de production. Tous les builds utilisent le regroupement et l’arborescence limitée. Une version de production exécute également une élimination limitée du code mort.

https://angular.io/cli/serve

0
Bill