bleenco / angular-closure-compiler

Angular4 Closure Compiler
MIT License
6 stars 1 forks source link

Angular Universal support #1

Open vforv opened 7 years ago

vforv commented 7 years ago

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

Thanks

jkuri commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

jkuri commented 7 years ago

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

vforv commented 7 years ago

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 commented 7 years ago

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;

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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