web-dev-qa-db-fra.com

Exécuter Angular2 en tant qu'application statique dans un navigateur sans serveur

Si je comprends bien le concept Angular2 - il transpile des fichiers TypeScript en fichiers .js. En principe, il devrait être possible de compiler, de mettre en package, puis d'exécuter cette application Angular2 en tant qu'application statique à partir du bucket AWS S3, de GitHub ou de toute autre source statique.

Si j'exécute l'application Angular2 sur le serveur de noeud (avec la commande angular-cli "ng serve"), il faut 500 Mo de RAM sur le serveur - c'est "Heey, commun!" - Est-ce vraiment supposé être comme ça! Quel est l'avantage de ce framework alors contre React, par exemple, qui n'a besoin que d'un navigateur.

Je n'arrive pas à trouver quoi que ce soit d'utile pour servir une application Angular2 en tant que HTML + JS compilé statique.

Peut-être que vous pouvez m'aider à comprendre cela et à le résoudre?

Merci beaucoup!

Maris

22
Maris

Exécutez la commande BUILD sur BUNDLE / build

ng construire

ou pour un build/bundle de production

ng build --prod

Il construira/groupera votre application dans une application distribuable.

Une fois l'opération terminée, recherchez dans le répertoire racine de vos applications un dossier dist, qui contiendra tout ce dont votre application a besoin pour s'exécuter en dehors du serveur de noeud, comme une instance Tomcat.

Mettre à jour

Grâce au commentaire de @Maris, assurez-vous que vos chemins de fichiers sont relatifs au répertoire actuel plutôt qu'au répertoire racine.

Il suffit d’exécuter cette commande pour modifier l’élément base href dans votre index.html.

ng construire --prod --base-href ./

36
Logan H

c’est un excellent moyen d’exporter votre application, il vous suffit d’un petit changement. 

<base href="/">

à

<base href="./">
12

Il est impossible que je pense pendant une erreur dans les navigateurs modernes:

Uncaught (promis): SecurityError: Impossible d'exécuter 'replaceState' sur 'History': ...

c'est dommage

5
V. Kalyuzhnyu

Cela fonctionne pour moi:

$ ng build --prod --base-href ./
5
Larry Parker

Comment servir un dossier angular 2 dist index.html pour servir un dossier angular 2 dist index.html

Si ce n'est pas évident pour tout le monde, et ce ne l'était pas pour moi. Si vous voulez exécuter le dossier dist localement après l'avoir construit et corrigé, référez-vous à quelque chose comme http-server et pointez-le sur le dossier dist, pas sur un fichier particulier. Depuis la fenêtre de commande dans votre dossier de projet 

c:\utilisateur\monProjet> serveur http ./dist

comme expliqué dans le lien

0
vtechmonkey