page - title angular 6
¿Cómo implementar la aplicación Angular 2 desarrollada en Typescript para producción? (6)
Soy nuevo en Angular 2. Estoy confundido con la forma en que Angular 2 trabaja en el entorno de producción.
¿Cuáles son los requisitos previos para ejecutar la aplicación Angular 2 en el servidor de producción?
¿Es posible implementar la aplicación en el servidor IIS o se requiere un servidor de nodos?
Después de compilar el archivo en la máquina de desarrollo usando un nodo, ¿necesitamos desplegar tanto .js como .ts en la producción?
- Un servidor de aplicaciones (para mi respuesta, utilicé Tomcat), node.js y angular-cli (ejecutando "
npm install -g angular-cli") - Puede implementar en otros servidores
- Solo archivos .html, .js y .map (al menos para mi solución)
Esto funciona mejor si ha creado la aplicación usando las instrucciones de angular-cli que se muestran aquí . En el directorio raíz de su aplicación, ejecute el siguiente comando ng build --env=prod y que agrupe, a través de un paquete web, los elementos desplegables en el directorio /dist .
Copie el directorio /dist y péguelo en {CATALINA_HOME}/webapps . Cambie el nombre de /dist a un nombre de carpeta como /foo . Abra /foo/index.html y edite la línea base-href para representar su nuevo nombre de directorio:
<base href="/foo/">
Inicie Tomcat a través de startup.bat o la preferencia que elija y vaya a http://localhost:8080/foo/ y podrá ver su aplicación Angular 2.
Nota: Si no hubiera creado el proyecto con ng new comando, habría leído que ejecutar ng init antes de la compilación le permitirá seguir los pasos. Aunque no lo he probado yo mismo.
Hay muchos proyectos iniciales que incluyen la capacidad de servir y construir su proyecto. Estoy usando (y estoy muy contento con) https://github.com/antonybudianto/angular2-starter
Puede encontrar muchos otros aquí: https://github.com/timjacobi/angular2-education#boilerplates
Las aplicaciones de Angular 2 están escritas en TS, pero el navegador solo comprende JavaScript al final. Entonces, cualquier proyecto TS se transporta al primer evento de JavaScript durante el desarrollo.
Puede ejecutar la aplicación angular 2 en cualquier servidor.
Solo tiene que implementar archivos .js, ya que un navegador no analiza los archivos .ts.
Todos los archivos de texto mecanografiado serán transpilados a archivos js mientras se desarrolla la aplicación por el transpiler para que no necesite ts archivos en producción.
Además, cuando haya terminado con el desarrollo, todo lo que necesita hacer es crear el paquete del directorio dist utilizando alguna herramienta de agrupación como webpack-starter o angular2-seed .
Luego implementa este paquete en su servidor.
Los paquetes mencionados anteriormente tienen buena cantidad de información sobre cómo se puede implementar su aplicación angular2 en producción.
Espero que esto ayude.
Uso JSPM para preparar mi producción de proyectos angular2. Otras herramientas populares como JSPM incluyen webpack y browserfy. Una de las tareas importantes que JSPM logrará es agrupar los diversos módulos que conforman su proyecto angular2. También configuré el indicador "selfExecutingBundle" como verdadero y pido a JSPM que haga un archivo js incluido (por ejemplo, myApp.bundled.js) y de allí lo minimizo (myApp.bundled.min.js) y esta referencia de script se usa en el archivo index.html.
<html>
<head>
<title>Hello Angular World</title>
</head>
<body>
<div>
<my-app>Loading...</my-app>
</div>
<script src="/js/myApp.bundle.min.js"></script>
</body>
</html>
¡Y eso es todo lo que necesitas!
En el futuro, cuando la especificación HTTP / 2 sea más común, puede que haya una menor necesidad de agrupar sus proyectos basados en módulos, pero por ahora creo que es necesario agruparlos.
No hay ninguna referencia a sus archivos de texto mecanografiado (ya que ya fueron transpilados en el proceso de hacer el myApp.bundled.js). Como dijo Zama, puedes ejecutar angular2 en cualquier servidor (yo uso IIS y funciona bien).
ACTUALIZACIÓN: Desde el lanzamiento final de Angular 2, he cambiado al uso de angular-cli para construir para producción. La configuración es fácil (sin espaguetis de tareas gulp) y el paquete final está súper optimizado (especialmente debido a la agitación de los árboles). Recomiendo ver el angular-cli para configurar, desarrollar y construir sus proyectos ng2.
es muy simple cargar aplicaciones en producción. pasos:
- crea una aplicación utilizando https://angular.io/docs/ts/latest/guide/webpack.html
si su aplicación tiene un enrutador, no olvide utilizar {useHash: true} para evitar que el error no pueda cargar la página. me gusta:
RouterModule.forRoot (routes, {useHash: true})
Escriba build npm en la ruta raíz de su proyecto.
- crea la carpeta dist automáticamente en el directorio raíz del proyecto.
- no es necesario configurar el servidor de nodos en producción. simplemente puede elegir el servidor apache y cargar el contenido de la carpeta dist.