Universal: Rebuild angular universal on save

[ghost]

I turned my application to angular universal. It's great but I have a problem with developing mode. I need see my editing result real-time. I need restart my app on each atrl+s (save) like "build --watch" and "nodmeon".

My server is expressjs and I'm using "npm run build:ssr" after each edit. It takes lots of time!!

How can I do that?

[hiepxanh]

agree

[Toxicable]

We have some advice for this coming; will update when we have more

[sushrest]

Agree with @samialmorshedi, I am managing this with nodemon until the formal advice.

Add Following line on package.json
"ssr:serve": "nodemon --watch src/ -e ts,html,scss --exec 'npm run build:ssr && npm run serve:ssr'"

Start App
npm run ssr:serve

[hiepxanh]

nice, love it will be intergrate in angular cli soon

[th0r]

@Toxicable Are there any news guys? I think this solution using nodemon is not suitable for large projects as it completely rebuilds the whole app on every change.
Are there any other approaches?

[JustasKuizinas]

Agree with @samialmorshedi, I am managing this with nodemon until the formal advice.

Add Following line on package.json
"ssr:serve": "nodemon --watch src/ -e ts,html,scss --exec 'npm run build:ssr && npm run serve:ssr'"

Start App
npm run ssr:serve

I get

''npm' is not recognized as an internal or external command,
operable program or batch file.

why?

[almgwary]

Any updates we need this feature urgently, hot reload on development with NodeJs ssr

[hiepxanh]

they asking for what feature should be improve but they didn't even check the current problem

[almgwary]

@hiepxanh we need command like ng serve for SSR to run the app under nodejs with live reload.

[almgwary]

@MarkPieszak any suggestions to run SSR on development with live reload like ng serve

[Adam23]

Any updates we need this feature urgently, hot reload on development with ssr

[static2000]

Any updates we need this feature urgently, hot reload on development with NodeJs ssr

Agree with @almgwary ,Especially for large projects, it takes lots of time now.

[davidecampello]

i am interested too

[KingDarBoja]

Just letting my comment to watch out for any release of this tool, It is a bit annoying to rebuild everytime I perform a single change on my app.

Cheers!

[MirzaLeka]

Agree with @samialmorshedi, I am managing this with nodemon until the formal advice.
Add Following line on package.json
"ssr:serve": "nodemon --watch src/ -e ts,html,scss --exec 'npm run build:ssr && npm run serve:ssr'"
Start App
npm run ssr:serve

I get

''npm' is not recognized as an internal or external command,
operable program or batch file.

why?

I had the same issue with single quote and fixed it using the double. Just make sure you use escape characters. Try this instead
"ssr:serve": "nodemon --watch src/ -e ts,html,scss --exec \"npm run build:ssr && npm run serve:ssr\" "

Make sure you have nodemon installed in the project or at least have it installed global.
I'm using this script:
"ssr:serve": "nodemon --watch src/ -e ts,html,scss --exec \"npm run buildAndServe:ssr\""
and before you ask, yes it works, but compiler is still slow and you need to manually reload the browser when angular build completes.

[RedactedProfile]

Not to sound too pushy, but this issue was submitted on June 11th 2018, and here we are November 19th 2019 with no clear path about what to do other than "just run build:ssr and then serve:ssr over and over again, regardless of project size".

The official docs, and ALL articles, blogs, tutorials, videos, and demonstrations are about production deployment with ngUniversal. Which is great! Glad that's been covered to death. But suspiciously there's little to no information out there about working with angular with ngUniversal installed in development mode.

My problem right now is that even ng serve is broken when going with a fresh ngUniversal Express engine schematic (only produced a white page, with an error in the compiled vendor js about the domino dependency). So if im building from scratch to what is going to be a pretty sizable project, im potentially wasting ridiculous amounts of dev time to watching universal compile out before being able to test my pages

It's not even like I can bypass nguniversal altogether in dev mode, it's deeply entrenched.

I could create a second server.js file that avoids all the nguniversal stuff but then I've got multiple
entrypoint server files to maintain.

[alan-agius4]

Hi all, in the last RC version we have added this feature in @nguniversal/builders package which.

To try up out you need to update to the latest RC which will add the builder and related configuration to your provide via a migration.

Express

ng update @angular/cli @angular/core @nguniversal/express-engine --next

Hapi

ng update @angular/cli @angular/core @nguniversal/hapi-engine --next

The builder can be executed via:

ng run <projectName>:serve-ssr

or

yarn serve:ssr:dev
npm run serve:ssr:dev

[laurencefass]

seeing message Repository is not clean. Please commit or stash any changes before updating.

bash-5.0# ng update @angular/cli @angular/core @nguniversal/express-engine --next
The installed Angular CLI version is older than the latest pre-release version.
Installing a temporary version to perform the update.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Repository is not clean. Please commit or stash any changes before updating.

I had to --allow-dirty to get it to build. first time running --next. is that standard procedure? ok to do it?

[laurencefass]

Can the performance of the recompilation be improved? I was very surprised to see such a lengthy compilation step. It falls short of expectations for HMR compared to competitors. Razzle.js and Next.js deliver small page changes almost instantly. Why is Angular SSR HMR so slow?

[laurencefass]

Another question if i may:

Previously (A8) i was running my dev server behind a reverse proxy with

"start": "ng serve --host 0.0.0.0 --port 3604 --disable-host-check --public-host https://mydomain/ssr",

now im running with

"dev:ssr": "ng run default:serve-ssr --host 0.0.0.0 --port 3604"

and including --public-host in my dev:ssr command results in error.

Unknown option: '--public-host'
Unknown option: 'https://angular.syntapse.co.uk/ssr'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev:ssr: `ng run default:serve-ssr --host 0.0.0.0 --port 3604 --public-host https://angular.syntapse.co.uk/ssr`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev:ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2019-12-17T13_24_58_767Z-debug.log

How do i replace replace --public-host in Angular 9?

[alan-agius4]

Hi @laurencefass, thanks for trying this out.

Just a couple of notes;

• This by no means is a replacement for ng serve, ng serve is faster as it only has a single compilation. The client bundle, while this SSR dev server builder has to generate both server and client bundle. Also there other features that the SSR dev sever builder doesn't support. One of them being HMR.
• public-host is currently not available, kindly file a feature request.
• On every change both client and server needs to be compilations. We'll be looking in way to optimize it in the near future.
• With regards to the listen EADDRINUSE: address already in use, error can you open a new issue and provide the output of ng version? Thanks.

[laurencefass]

thanks alan. as a workaround is there another way to set the --public-host to allow paths beyond default /

[maddy2894]

Agree with @samialmorshedi, I am managing this with nodemon until the formal advice.

Add Following line on package.json
"ssr:serve": "nodemon --watch src/ -e ts,html,scss --exec 'npm run build:ssr && npm run serve:ssr'"

Start App
npm run ssr:serve

This works only if there are any changes to the angular app, I have client and server both under same directory, is there any way to compile (hot reload) on changes made to nodeJs/express server backend files?

[KingDarBoja]

thanks alan. as a workaround is there another way to set the --public-host to allow paths beyond default /

There is some work in progress to provide such option on #1401 thanks to your suggestion 🎉

[CaerusKaru]

@alan-agius4 @manfredsteyer Can this be closed?

[alan-agius4]

@CaerusKaru, yes thanks.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}