¿Cómo se implementan las aplicaciones de Angular?

Posterior a de esta larga compilación de información hemos podido solucionar este dilema que presentan algunos de nuestros usuarios. Te ofrecemos la respuesta y esperamos servirte de gran ayuda.

Solución:

En realidad estás aquí tocando dos preguntas en una.

El primero es ¿Cómo alojar su aplicación?.
Y como @toskv mencionó, es una pregunta demasiado amplia para ser respondida y depende de muchas cosas diferentes.

El segundo es ¿Cómo se prepara la versión de implementación de la aplicación?.
Aquí tienes varias opciones:

1. Implementar tal como está. Solo eso: sin minificación, concatenación, manipulación de nombres, etc. Transpile todo su proyecto ts copie todas sus fuentes js/css/… resultantes + dependencias al servidor de alojamiento y estará listo para comenzar.

2. Implemente utilizando herramientas de agrupación especiales, como webpack o systemjs constructor.
   Vienen con todas las posibilidades que faltan en el #1.
   Puede empaquetar todo el código de su aplicación en solo un par de archivos js/css/… a los que haga referencia en su HTML. systemjs builder incluso le permite deshacerse de la necesidad de incluir systemjs como parte de su paquete de implementación.

3. Puedes usar ng deploy a partir de Angular 8 para implementar su aplicación desde su CLI. ng deploy deberá usarse junto con la plataforma de su elección (como @angular/fire). Puede consultar los documentos oficiales para ver qué funciona mejor para usted aquí

Sí, lo más probable es que necesite implementar systemjs y un montón de otras bibliotecas externas como parte de su paquete. Y sí, podrá agruparlos en solo un par de archivos js a los que hace referencia desde su página HTML.

Sin embargo, no tiene que hacer referencia a todos sus archivos js compilados desde la página: systemjs ya que un cargador de módulos se encargará de eso.

Sé que suena confuso: para ayudarlo a comenzar con el n. ° 2, aquí hay dos aplicaciones de muestra realmente buenas:

Constructor SystemJS: semilla angular2

Paquete web: iniciador de paquete web angular2

Respuesta sencilla. Utilice la CLI de Angular y emita el

ng build 

comando en el directorio raíz de su proyecto. El sitio se creará en el directorio dist y puede implementarlo en cualquier servidor web.

Esto se compilará para la prueba, si tiene configuraciones de producción en su aplicación, debe usar

ng build --prod

Esto construirá el proyecto en el dist directorio y esto se puede enviar al servidor.

Han pasado muchas cosas desde que publiqué esta respuesta por primera vez. La CLI finalmente está en 1.0.0, así que siguiendo esta guía, actualice su proyecto antes de intentar compilarlo. https://github.com/angular/angular-cli/wiki/stories-rc-update

Con Angular CLI es fácil. Un ejemplo para Heroku:

1. Cree una cuenta de Heroku e instale la CLI

2. Mueve el angular-cli dep a la dependencies en package.json (para que se instale cuando presiona Heroku.

3. Agrega un postinstall script que se ejecutará ng build cuando el código se envía a Heroku. Agregue también un comando de inicio para un servidor de nodo que se creará en el siguiente paso. Esto colocará el static archivos para la aplicación en un dist directorio en el servidor y luego inicie la aplicación.

"scripts": 
  // ...
  "start": "node server.js",
  "postinstall": "ng build --aot -prod"

4. Cree un servidor Express para servir la aplicación.

// server.js
const express = require('express');
const app = express();
// Run the app by serving the static files
// in the dist directory
app.use(express.static(__dirname + '/dist'));
// Start the app by listening on the default
// Heroku port
app.listen(process.env.PORT || 8080);

5. Cree un control remoto de Heroku y presione para implementar la aplicación.

heroku create
git add .
git commit -m "first deploy"
git push heroku master

Aquí hay una redacción rápida que hice que tiene más detalles, que incluye cómo forzar las solicitudes para usar HTTPS y cómo manejar PathLocationStrategy 🙂

Aquí puedes ver las comentarios y valoraciones de los lectores

Más adelante puedes encontrar las interpretaciones de otros administradores, tú de igual manera puedes insertar el tuyo si lo crees conveniente.

---

---

Utiliza Nuestro Buscador