Configuración de la aplicación Angular Universal para el desarrollo

Solución:

Para el desarrollo, ejecute npm run start que desencadena ng serve. La configuración actual tiene una recarga de módulo en caliente, por lo que observará sus cambios y actualizará su vista de desarrollo. Usé las mismas instrucciones y lo hice funcionar aquí https://github.com/ariellephan/angular5-universal-template

En resumen, para el desarrollo, ejecute npm run start y mira http://localhost:4200.

Para la producción, ejecute npm run build:ssr y npm run serve:ssry mira http://localhost:4000

Como han señalado los colaboradores, puede que no sea la forma más eficiente y rápida de desarrollar, pero, sin embargo, no quería aceptar soluciones alternativas. Además, el alojamiento frontal y posterior en servidores separados plantea problemas de CORS, y nunca planeé que mi aplicación se ejecutara en hosts separados, quería que todo estuviera en el mismo host junto con métodos API.

El problema con --dev construir fue esto:

al construir con el siguiente comando:

ng build --app 1 --output-hashing=false (tenga en cuenta que no hay --prod bandera)

AppServerModuleNgFactory resultó desaparecido en el ./dist-server/main.bundle

Me imagino que esto se relaciona con la anticipación (--aot) compilación, que es el comportamiento predeterminado si está compilando para --prod. Entonces, las instrucciones de https://github.com/angular/angular-cli/wiki/stories-universal-rendering incluían instrucciones para configurar el servidor expreso solo para compilación de producción. Y dado que no hay necesidad de que el servidor pueda representar dinámicamente las plantillas html, el trabajo --dev construir comando sería:

ng build --app 1 --output-hashing=false --aot

y esto se deshace de la TypeError: Cannot read property 'moduleType' of undefined

Ahora para ver todo este lío:

ejecútelos en ventanas de comando separadas:

1. ng build --watch
2. ng build --app 1 --output-hashing=false --aot --watch
3. webpack --config webpack.server.config.js --progress --colors --watch

Y para que el servidor se reinicie al cambiar, debe instalar nodemon package y ejecútelo así:

4. nodemon --inspect dist/server (--inspect si desea depurar el servidor con Chrome)

Algunas otras cosas importantes:

Angular / CLI tiene un comando para generar los andamios necesarios para una aplicación universal:

ng generate universal

y genera una versión fija de main.ts que evita el problema de arranque angular del cliente:
document.addEventListener('DOMContentLoaded', () => {
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
});

un problema con el que me topé una vez que implementé TransferState

---

---

Utiliza Nuestro Buscador