proyecto - cómo implementar la aplicación angular2 construida usando angular-cli

instalar angular 5

Question

He creado una nueva aplicación angular usando angular-cli.

Completé la aplicación y la previsualizó usando ng-serve, está funcionando perfectamente.

Después de eso usé ng build --prod , que genera la carpeta ''dist''. Cuando puse esa carpeta en xampp para ejecutar, no está funcionando. Descubrí que no hay archivos * .js, que deberían estar allí después de la conversión * .ts -> * .js (supongo).

He adjuntado la captura de pantalla, en la cual, en el lado izquierdo, se muestra la carpeta src con todos los archivos .ts. En el medio, se muestra la carpeta ''dist'' y la captura de pantalla del navegador.

Por favor, guíame sobre cómo puedo generar una aplicación completamente funcional de angular-cli, que puedo ejecutar en mi servidor xampp.

Captura de pantalla:

Answer 1

Actualmente estoy usando Angular-CLI 1.0.0-beta.32.3

en el directorio raíz de su proyecto ejecute npm install http-server -g

después de una instalación exitosa ejecuta ng build --prod

en una ejecución exitosa, ejecute el servidor http ./dist

Answer 2

Aquí hay un ejemplo con Heroku:

1. Crea una cuenta de Heroku e instala la CLI

2. Mueva el angular-cli a las dependencies en package.json (para que se instale cuando presione Heroku.

3. Agregue un script postinstall que ejecutará ng build cuando el código sea enviado a Heroku. También agregue un comando de inicio para un servidor de nodo que se creará en el siguiente paso. Esto colocará los archivos estáticos para la aplicación en un directorio dist en el servidor y luego comenzará la aplicación.

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

4. Crea 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. Crea un control remoto Heroku y presiona para descargar la aplicación.

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

Aquí hay un resumen writeup que hice con más detalles, que incluye cómo forzar las solicitudes para usar HTTPS y cómo manejar PathLocationStrategy :)

Answer 3

El servidor http no admite el enrutamiento del lado del cliente, por lo que nada más que su URL base va a funcionar. En su lugar, puede usar angular-http-server :

npm install -g angular-http-server
ng build --prod
cd dist
angular-http-server

Esto solo se debe usar para probar la aplicación localmente antes de implementarla en un servidor web. Para aprender a implementar realmente la aplicación en un servidor web, consulte el artículo de Angular.io sobre la implementación , que analiza las consideraciones que deben tenerse en cuenta al compilar para la implementación y proporciona configuraciones para una variedad de diferentes servidores web comúnmente utilizados en la producción.

Answer 4

Estoy usando la última versión de Angular-CLI (en el momento de esta respuesta es 1.0.0Beta-18)

La forma en que funciona esta versión es que coloca todo en archivos agrupados y los llama en el archivo index.html. Después de eso, debe copiar sus activos en la carpeta dist (por alguna razón no funciona). Finalmente, revise dos veces su href base y asegúrese de que esté configurado para lo que necesita establecer y luego debería funcionar. Eso es lo que funcionó para mí y probé tanto en Apache como en Node.

Answer 5

Para cualquiera que busque una respuesta para el alojamiento de IIS ...

Construye tu proyecto

ng build --prod

Copie todos los contenidos de la carpeta ./dist en la carpeta raíz de su sitio web manteniendo la estructura de carpetas dentro de ./dist (es decir, no mueva nada). Usando la versión Beta-18 de angular-cli todos los activos (imágenes en mi caso) se copiaron a ./dist/assets durante la compilación y se referenciaron correctamente en sus componentes que contienen.

Answer 6

Si alguien está trabajando con Nginx, aquí está la solución completa:

Supongamos que desea implementar su aplicación angular en HOST: http://example.com y PORT: 8080 Nota: HOST y PORT pueden ser diferentes en su caso.

Asegúrese de tener <base href="/"> en su index.html head tag.

1. En primer lugar, vaya a su ruta de repositorio angular (es decir, / home / usuario / helloWorld) en su máquina.

2. Luego compila / dist para tu servidor de producción usando el siguiente comando:

   ng build --prod --base-href http://example.com:8080

3. Ahora copie / dist (es decir, / home / usuario / helloWorld / dist) desde el repositorio angular de su máquina a la máquina remota donde desea alojar su servidor de producción.

4. Ahora inicie sesión en su servidor remoto y agregue la siguiente configuración de servidor nginx.

   server {
   
       listen 8080;
   
       server_name http://example.com;
   
       root /path/to/your/dist/location;
   
       # eg. root /home/admin/helloWorld/dist
   
       index index.html index.htm;
   
       location / {
   
           try_files $uri $uri/ /index.html;
   
           # This will allow you to refresh page in your angular app. Which will not give error 404.
   
       }
   
   }

5. Ahora reinicie nginx.

6. Eso es !! Ahora puede acceder a su aplicación angular en http://example.com:8080

Espero que sea de ayuda.

Answer 7

Usa ng build con la bandera --bh

Establece la etiqueta base href en / myUrl / en su index.html:

ng build --base-href /myUrl/
ng build --bh /myUrl/

Answer 8

Verifica tu archivo index.html y edita esta línea

<base href="/[your-project-folder-name]/dist/"> 

Su contenido debe cargarse correctamente. A continuación, puede cargar estilos de forma global

Debes establecer href base como lo recomendó Johan

ng build --prod --bh /[your-project-folder-name]/dist/

Answer 9

método 1 (popular): si está usando angular-cli, entonces

ng build --prod

hará el truco Luego puede copiar todo desde la carpeta .dist carpeta de su servidor

método 2:

puedes usar http-server para servir tu aplicación. Para instalar el servidor http

npm install http-server -g

y luego de ir a la carpeta de tu proyecto

http-server ./dist 

servirá todos los archivos en su carpeta. puede verificar el terminal con la dirección IP y el puerto que puede usar para acceder a la aplicación. Ahora abre tu navegador y escribe

ip-adress:port/index.html

Espero que te ayude :)

Bonificación: si quieres desplegar en heroku. Consulte este tutorial detallado https://medium.com/@ryanchenkie_40935/angular-cli-deployment-host-your-angular-2-app-on-heroku-3f266f13f352