Angular Universal support

[vforv]

This is good, any disadvantages using this compiler? Also how can I implement Angular Universal to this?

Thanks

[jkuri]

hi @vforv. thanks for checking on this. sure, you can use this with Angular Universal. we have Angular Universal seed prepared too here.
What you would need to do is to compile server side code with webpack seed, then client side code compile with closure compiler. That would be it.
If you need any additional help or information don't hesitate to ask here. Also, if you need help importing 3rd party library with closure compiler open a new issue please. thanks, Jan.

[vforv]

Got error on webpack seed:

Error: Failed to lookup view "index" in views directory "dist"
    at EventEmitter.E.render (/home/master/Documents/angular-webpack-seed/dist/server.js:1138:4250)

Could you make exaple angular-closure-compiler + server side rendering?

[jkuri]

I believe its just a issue with paths to index.html. Can you try running server from root of the project, ie node ./dist/server.js.

[vforv]

Tried, same error....

Listening on http://localhost:8000
GET: /: 3.028ms
Error: Failed to lookup view "index" in views directory "dist"
    at EventEmitter.E.render (/home/master/Documents/angular-webpack-seed/dist/server.js:1138:4250)
    at ServerResponse.S.render (/home/master/Documents/angular-webpack-seed/dist/server.js:1165:6657)
    at /home/master/Documents/angular-webpack-seed/dist/server.js:1089:69980
    at r.handle_request (/home/master/Documents/angular-webpack-seed/dist/server.js:842:302)
    at r (/home/master/Documents/angular-webpack-seed/dist/server.js:849:663)
    at r.dispatch (/home/master/Documents/angular-webpack-seed/dist/server.js:849:822)
    at r.handle_request (/home/master/Documents/angular-webpack-seed/dist/server.js:842:302)
    at /home/master/Documents/angular-webpack-seed/dist/server.js:835:1522
    at Function.w.process_params (/home/master/Documents/angular-webpack-seed/dist/server.js:835:2710)
    at s (/home/master/Documents/angular-webpack-seed/dist/server.js:835:1466)

Could you help me to integrate universal in angular-closure-compiler?

[jkuri]

guess you are doing something wrong, tried here with fresh clone, my steps:

git clone https://github.com/bleenco/angular-webpack-seed.git
cd angular-webpack-seed
npm install
npm run build:prod
node dist/server.js

and it works for me.

you mean compiling universal server side code with closure-compiler?

[vforv]

Yes that would be great if that possible... Currently all repos that I tried creates big bundle 350KB+... Just closure compiler makes it below 100KB...

[jkuri]

you still don't need to compile server side code with closure, only client side code (browser).

1. compile your code with this repo
2. run angular-webpack-seed npm run build:prod
3. copy generated bundle.js from this repo to angular-webpack-seed's dist/app.bundle.js
4. run node dist/server.js

I believe that is what you want to achieve.

[vforv]

I will try it tomorrow but not sure it will render staff from client side...

[jkuri]

I am not sure you understand difference between server side and client side compiling.

[vforv]

i don't understand fully how Angular Universal works... I know in universal cli I can write code for client and server side... But here if I just write code on client side I will get all content rendered in browser?

[jkuri]

server side code only works for rendering html before loading angular in the browser, that's why you run express server which bootstraps angular on the server side, generate html and serves that html to the browser. once browser initializes the application (client side) the whole html between <app-root></app-root> is re-rendered, but that happens so fast you cannot see any blinking or whatsoever.

the size of server-side generated code does not effect loading application in the browser, but client-side generated code does. so;

• you want to compile client side code with the closure
• you don't care if server-side code is bundled with webpack or rollup

please check again this steps and everything should be working as you want:

1. compile your code with this repo
2. run angular-webpack-seed npm run build:prod
3. copy generated bundle.js from this repo to angular-webpack-seed's dist/app.bundle.js
4. run node dist/server.js

hope I explained some things that was unclear at the beginning. cheers, Jan

[vforv]

Thanks for clarification, but still one thing not clear to me... How server know which code to render and get html from it?

I tried steps you provided now angular webpack seed works, but have problem when I try to merge bundle.js from this repo with webpack seed server... Text from this repo "app works!" not showing and when I change route page refresh(see loading indicator from browser tab).

[jkuri]

server renders route that you provide in the browser. yeah, I don't doesn't work right off, but if you make angular webpack seed just a simple app works! app without lazy route and other stuff it should work.

[vforv]

Aha, but I will need in my apps routing, http and other staffs... Could you provide me steps how to make this work together?