Integrating angular2 Universal with angular CLI project
vinodbhargava opened this issue · 214 comments
-
OS - Windows 8
-
Versions -
angular-cli: 1.0.0-beta.5
node: 4.3.1
os: win32 x64 -
Yes, the app was created using CLI
-
Steps -
A. Created the app using following command -
ng new testAppB. Installed angular2-universal dependencies as mentioned in -
Angular 2 Universal quickstartC. Deployed client using command -
ng server(server started on port 4200)
Started express server through -node server.js(server started on port 3000)D. Accessed the client and got following message in browser - test-app works!
But when accessinghttp://localhost:3000it gives below error message in console -
EXCEPTION: Error: Protocol "d:" not supported. Expected "http:".
STACKTRACE:
Error: Protocol "d:" not supported. Expected "http:".
at new ClientRequest (_http_client.js:52:11)
at Object.exports.request (http.js:31:10)
at Object.exports.get (http.js:35:21)
at D:\Development\Angular2\angular-cli\cli-angular\testApp\node_modules\angular2-universal\dist\node\platform\node_xhr_impl.js:53:22
at ZoneDelegate.invoke (D:\Development\Angular2\angular-cli\cli-angular\testApp\node_modules\zone.js\dist\zone-node.js:281:29)
at Object.NgZoneImpl.inner.inner.fork.onInvoke (D:\Development\Angular2\angular-cli\cli-angular\testApp\node_modules\@angular\core\src\zone\ng_zone_impl.js:45:41)
at ZoneDelegate.invoke (D:\Development\Angular2\angular-cli\cli-angular\testApp\node_modules\zone.js\dist\zone-node.js:280:35)
at Zone.run (D:\Development\Angular2\angular-cli\cli-angular\testApp\node_modules\zone.js\dist\zone-node.js:174:44)
at NgZoneImpl.runInner (D:\Development\Angular2\angular-cli\cli-angular\testApp\node_modules\@angular\core\src\zone\ng_zone_impl.js:76:71)
at NgZone.run (D:\Development\Angular2\angular-cli\cli-angular\testApp\node_modules\@angular\core\src\zone\ng_zone.js:223:66)
D:\Development\Angular2\angular-cli\cli-angular\testApp\node_modules\@angular\core\src\application_ref.js:302
throw e;
^
Kindly suggest if i had missed any step.
Any help will be appeciated.
You wouldn't need to start the Client separately, if you're using Universal it'll be serving everything through the server only. You want to access port 3000 then. Express is serving the index (w/ the universal app). Give that a shot and let me know
Hi @MarkPieszak, thanks for reverting.
I started the application on port 3000 only as suggested and then accessed the URL, but getting the same error again. I am attaching the screenshot for reference.
Try upgrading Node to 6+ or something, this might be some Express issue. It thinks you're trying to do d://something instead of http:// etc. I think because of your hard-drive directory, bizarre.
You have:
provide(ORIGIN_URL, {useValue: 'http://localhost:3000'}), // <-- localhost3000 in there?
Thanks for the inputs @MarkPieszak, I will try it after upgrading Node to latest version.
Yes, i am having this line in my server.ts file -
provide(ORIGIN_URL, {useValue: 'http://localhost:3000'}),
The Express version that i am referring to is - "express": "^4.13.4"
@MarkPieszak, i had updated the node version to 6.2.1, however i am still getting the same error :(
Version update
Error message-
Please suggest if i am doing something wrong here.
Yeah, the same error happening when you generate app via angular-cli and add server code from https://universal.angular.io/quickstart/
Hi @neilhem, any luck?
no luck, on gitter chat of angular-universal I have written about error, so they told me that they will update code example as soon as possible
@gdi2290 Not sure if this one was on your radar, can't tell if it's CLI or Universal itself
I followed the example as well, but i have totally different errors coming from the server.ts file:
D:/Workspace/bitbucket/stock-front/tmp/broccoli_type_script_compiler-input_base_path-aCaBCBu3.tmp/0/src/server.ts (1, 23): Cannot find module 'path'. D:/Workspace/bitbucket/stock-front/tmp/broccoli_type_script_compiler-input_base_path-aCaBCBu3.tmp/0/src/server.ts (2, 26): Cannot find module 'express'. D:/Workspace/bitbucket/stock-front/tmp/broccoli_type_script_compiler-input_base_path-aCaBCBu3.tmp/0/src/server.ts (3, 29): Cannot find module 'body-parser'. D:/Workspace/bitbucket/stock-front/tmp/broccoli_type_script_compiler-input_base_path-aCaBCBu3.tmp/0/src/server.ts (23, 37): Cannot find name '__dirname'. D:/Workspace/bitbucket/stock-front/tmp/broccoli_type_script_compiler-input_base_path-aCaBCBu3.tmp/0/src/server.ts (29, 18): Cannot find name '__dirname'.
Did you guys had similar problems?
BR
Nevermind, got the same error as well.
EXCEPTION: Error: Protocol "d:" not supported. Expected "http:"
Yeah, the problem was that the typings command failed so I had to add the
ambientDependencies manually.
But I still get your error.
BR
On 11 June 2016 at 20:45, Vinod Bhargava notifications@github.com wrote:
@vaskgjuri https://github.com/vaskgjuri for fixing these errors -
- install the typings as mentioned in angular2-universal IO
https://universal.angular.io/quickstart/- add the reference to the typings in the server.ts file
Above errors should be gone.
Please try these steps and update.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#1050 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/AGGmXFsw2_ntdRcs3ZLuYDA0uI-Siexpks5qKwJQgaJpZM4Ixuiz
.
Med vänlig hälsning | Met vriendelijke groet | Топли поздрави | Kind Regards
Vasko Gjurovski
Tel +38976361002
Bagdatska 15/7 | 1000 Skopje | Macedonia
www.polarcape.com
Polar Cape is representing Sweden in the European Business Awards
Please watch our video and vote http://www.businessawardseurope.com/ for
us if you think we should become National Public Champions
http://www.businessawardseurope.com/
http://www.greatplacetowork.se/baesta-arbetsplatser
Polar Cape is one of the best places to work 2015
I did a little more research and I tried to follow this example:
http://mean.expert/2016/06/04/angular-2-loopback-universal/
However, at the end I got the same error message:
Error: Protocol "d:" not supported. Expected "http:"
This is making me think that this might be a problem with a newer version of one of the dependencies, but I just cannot pinpoint which one. Main suspects preboot and angular2-universal.
Still looking...
BR
I'll take a deeper look tomorrow and see if I have any luck integrating the CLI with it. Have you tried the Universal Starter? Also, Universal only works with router-deprecated at this moment, maybe it has something to do with that.
I did try the Universal starter and it was working fine, but as the CLI is
the recommended way of "managing" your app, it was only logical that we use
the CLI with Universal. And, no, I did not know that Universal works with
router-deprecated at the moment, which would be a huge drawback, as now it
is 2 versions behind (with the announcement of the 3.0 Router).
And, thanks for the help... :)
BR
On 11 June 2016 at 23:55, Mark Pieszak notifications@github.com wrote:
I'll take a deeper look tomorrow and see if I have any luck integrating
the CLI with it. Have you tried the Universal Starter? Also, Universal only
works with router-deprecated at this moment, maybe it has something to do
with that.—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#1050 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/AGGmXLxwV9new6GzBlbhU9_37Ui9QQCjks5qKy7jgaJpZM4Ixuiz
.
Med vänlig hälsning | Met vriendelijke groet | Топли поздрави | Kind Regards
Vasko Gjurovski
Tel +38976361002
Bagdatska 15/7 | 1000 Skopje | Macedonia
www.polarcape.com
Polar Cape is representing Sweden in the European Business Awards
Please watch our video and vote http://www.businessawardseurope.com/ for
us if you think we should become National Public Champions
http://www.businessawardseurope.com/
http://www.greatplacetowork.se/baesta-arbetsplatser
Polar Cape is one of the best places to work 2015
FYI, I did try a stripped version of my app with the router-deprecated and
it still gives the same error:
EXCEPTION: Error: Protocol "d:" not supported. Expected "http:"
So I do not think it is the router that makes the problem.
BR
On 12 June 2016 at 03:18, Vasko Gjurovski vasko.gjurovski@polarcape.com
wrote:
I did try the Universal starter and it was working fine, but as the CLI is
the recommended way of "managing" your app, it was only logical that we use
the CLI with Universal. And, no, I did not know that Universal works with
router-deprecated at the moment, which would be a huge drawback, as now it
is 2 versions behind (with the announcement of the 3.0 Router).And, thanks for the help... :)
BR
On 11 June 2016 at 23:55, Mark Pieszak notifications@github.com wrote:
I'll take a deeper look tomorrow and see if I have any luck integrating
the CLI with it. Have you tried the Universal Starter? Also, Universal only
works with router-deprecated at this moment, maybe it has something to do
with that.—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#1050 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/AGGmXLxwV9new6GzBlbhU9_37Ui9QQCjks5qKy7jgaJpZM4Ixuiz
.Med vänlig hälsning | Met vriendelijke groet | Топли поздрави | Kind
RegardsVasko Gjurovski
Tel +38976361002
Bagdatska 15/7 | 1000 Skopje | Macedonia
www.polarcape.comPolar Cape is representing Sweden in the European Business Awards
Please watch our video and vote http://www.businessawardseurope.com/ for
us if you think we should become National Public Championshttp://www.businessawardseurope.com/
http://www.greatplacetowork.se/baesta-arbetsplatserPolar Cape is one of the best places to work 2015
Med vänlig hälsning | Met vriendelijke groet | Топли поздрави | Kind Regards
Vasko Gjurovski
Tel +38976361002
Bagdatska 15/7 | 1000 Skopje | Macedonia
www.polarcape.com
Polar Cape is representing Sweden in the European Business Awards
Please watch our video and vote http://www.businessawardseurope.com/ for
us if you think we should become National Public Champions
http://www.businessawardseurope.com/
http://www.greatplacetowork.se/baesta-arbetsplatser
Polar Cape is one of the best places to work 2015
Ok I'll take a look, yeah we haven't upgraded it yet mainly because of the ever changing router states, of course for the newest one we will update it as quickly as we can!
shouldn't angular CLI support universal from ground up?
e.g. ng generate universal node/asp.net
Unfortunately I don't think it could from the way it is now, because asp.net for example has an extremely different setup than a typical ng2 project.
It would have to be an add-on to the CLI if they had it, since it would be very different itself.
Steve Sanderson made a nice yeoman generator for asp.net core and angular2 (it's using Universal as well) if you want to take a look at it. http://blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core/
thanks for the link. Is it possible/usable to combine this with angular CLI?
I haven't tried, but I think you have to of first made an app with ng new to utilize the CLI :(
I would hope sometime in the future we can integrate a .NET add on for the CLI though
I believe @Brocco was looking into Universal integration, but I don't know more than that.
We are in the exploratory stages of integrating angular universal into the CLI to determine feasibility. Once that has been determined we will come up with a strategy to implement, which will be discussed either in this issue or another issue in this repo (or possibly on the universal repo).
Thanks for your interested in incorporating universal in the CLI!!!
I'd love to help Mike. I guess anything Node, express/Hapi/koa integration, wouldn't be too bad. Let me know how I can get involved!
Is there a working-group & roadmap for cli/universal integration ?
@Brocco, can you tell how your investigation goes ?
Thanks.
Some news or nothing ?
@pdelorme @choucry13
Universal itself is undergoing some large changes, but essentially all you'll really need is to just create how the server renders your app, if you're using Node check out the universal starter, everything essentially comes from server.ts (https://github.com/angular/universal-starter/blob/master/src/server.ts). Use the starter as a starting point, until we get something concrete in the CLI. Other than some package dependencies, you can get it up and running fairly quickly. Hope that at least helps for now!
thank @MarkPieszak . Me and @pdelorme will see this solution.
Has anybody succeeded yet to get a working implementation of universal on an app created with angular-cli?
I've been trying all day here, no luck... same last week, tried/failed, until I couldn't think about anything else and had to give up. Today again, the same. Really frustrating... I've tried by getting everything from universal-starter, and just remove the part where webpack builds the app (because I have the CLI for that), just need to generate client.js and server.js, somehow. Anyway, no luck, all sorts of errors, and no matter what I've tried, I can't make it work :(
Would be too long of a post to mention all the steps I went through and everything I've tried and all the errors received along the way.
I'd actually just prefer if I could manage to simply "tsc" the client.ts and server.ts, but tried that and also couldn't make it work, I'm going crazy here. Even tried (again) the "Get started" from universal.angular.io would be so simple, if it actually worked, but that gives me the error for which this issue has been created.
I'm starting to think that I will never be able to make it work, it seems so complicated.
Please, I'm almost begging :) does anybody have a working example (here hoping for a simple one, non-webpack)? Or know of a repo somewhere out there that has a working implementation of angular-universal on top of an angular-cli app?
Now that the CLI has moved to Webpack, have you tried it now?
I can try and give it a shot today, want to make sure it's working webpack-wise with the CLI.
@MarkPieszak I did install the webpack version, but I don't know what's happening behind the scenes and how is that different from beta.10 (I just know it uses webpack). I've also never used webpack myself, it's completely new to me, so everything I'm trying is just guessing to me. I wouldn't know where to begin regarding anything webpack related. I also see that there is no webpack.config.js in the app generated with the webpack version of the cli :| I wonder where it sets up the webpacky things and how does ng build/serve actually use webpack in the absence of a webpack.config.js file.
If you have the time to look into it and manage to implement universal on an app generated with any cli version, a brief how-to would be awesome.
I believe the current strategy is for CLI to use webpack behind the scenes, not that it expose webpack. For example, it does not emit webpack config files into a project, and that is intentional.
I think this is a sound strategy. People who want to directly use webpack already have ways of doing so. Just go grab one of the webpack "starter kits" somewhere and copy it and start packing.
However, a consequence of this strategy is that integration with "universal" will need to happen within the CLI project itself. It's not something that can readily be done at an application level when using CLI.
My hope is for a huge payoff: that some months from now, all of our projects which use CLI are automatically and trivially Universal projects.
@kylecordes I hope that too... that we'd just be able to "ng new -universal" and that's it! (optional, of course, so no one can complain)
Until then... still no luck for me, implementing Universal on a cli generated app is yet a mistery to me. I think the universal-starter is too complicated for me, no matter how many times I've tried, I couldn't implement it on top of my angular-cli app (I've also never used webpack, so when trying to implement the universal-starter I'm only kind of guessing on what that webpack.config.js file does, and probably couldn't really manage to tell it to ignore my app - cause that is done with ng build - and just build the server part).
Anyway, what would be really great is if they had a quickstart that worked. I wish they had a server file in their quickstart that would do what it's supposed to: WORK! :( I mean, first of all - they say "put this in a server.js" but then, if I try > node dist/server.js it screams that it doesn't know what the "import" statement is. Then, I've tried to name the file server.ts and tried tsc path/to/server.ts, but that just throws a bunch of "Cannot find name" errors. Not to mention that the tsc command generates js files for each of the app's ts files, which then I had to clean up (cause I can't change the tsconfig.json, the cli is using that. Whish that tsc path/to/file.ts would actually ignore file related settings in the tsconfig.json. Anyway, then I've added a reference to browser.d.ts (on cli-beta.10, cause there's no such thing as typings folder on beta.11-webpack anymore) and finally got to start the node server with that server file, and when trying to access localhost:3000 in the browser, I finally got the error this issue was opened for :(
Node: v6.3.1 (which should be fine, because it's >=4 as I've seen everybody recommends)
I'm thinking maybe I give up javascript,typescript,angular2,html,css... everything! And maybe I go somewhere in the mountains and just live there on berries... that's how frustrating this has become.
I'm quite close to getting the universal starter working with the webpack version of the cli the only barrier being typings.d.ts.
When using the typings.d.ts created by the cli compiling the server side ts generates the errors
ERROR in /Users/marcus/hosts/coco-cli/src/typings.d.ts
(6,13): error TS2403: Subsequent variable declarations must have the same type. Variable 'module' must be of type 'NodeModule', but here has type '{ id: string; }'.
ERROR in /Users/marcus/hosts/coco-cli/src/typings.d.ts
(7,13): error TS2403: Subsequent variable declarations must have the same type. Variable 'require' must be of type 'NodeRequire', but here has type 'any'.
and client errors are
ERROR in [default] /Users/marcus/hosts/coco-cli/node_modules/angular2-universal/dist/node/router/node_platform_location.d.ts:2:25
Cannot find module 'url'.
if I then add the typings.d.ts from the universal starter the same errors.
If I remove what's generated by the cli the server side code compiles but the client then produces the errors.
ERROR in [default] /Users/marcus/hosts/coco-cli/node_modules/angular2-universal/dist/node/router/node_platform_location.d.ts:2:25
Cannot find module 'url'.
ERROR in [default] /Users/marcus/hosts/coco-cli/src/app/app.component.ts:5:12
Cannot find name 'require'.
ERROR in [default] /Users/marcus/hosts/coco-cli/src/app/app.component.ts:6:11
Cannot find name 'require'.
I'm starting to wondering what the merits of typescript and typings are apart from adding extra confusion and complexity
I remember I've read about these errors somewhere. I have no idea about where exactly though... But I can still recall that it was fixed by changing es6 to es5 in libs inside tsconfig.json. I think... You could give it a try. But I can't say why it is so. Maybe someone more well-versed could clear things up. And also, tell me if this was it.
That actually makes it worst as you get errors like
ERROR in [default] /Users/marcuswilliams/Hosts/coco-cli/node_modules/rxjs/operator/toPromise.d.ts:9:8
Cannot find name 'Promise'.
ERROR in [default] /Users/marcuswilliams/Hosts/coco-cli/node_modules/rxjs/operator/toPromise.d.ts:10:25
Cannot find name 'Promise'.
ERROR in [default] /Users/marcuswilliams/Hosts/coco-cli/node_modules/rxjs/operator/toPromise.d.ts:10:35
Cannot find name 'Promise'.
@jeffbcross I saw you updated universal in the package.json for the latest CLI webpack version. To what extent is universal being utilized in the existing build?
@goelinsights To create the app-shell
@MarkPieszak Did you get it working ? Its really becoming a pain and stopping me from using Angular in a large project.
We should be releasing Universal for rc5 & 6 soon (it's been a tougher process than we imagined), I'll get back to you as soon as we ship it and I can verify it works with the CLI! :) I completely understand, there's been a lot of change & turmoil in rc-land haha. For now, if you just work on the project as a normal one, you should be able to move everything (in your app folder) into a newly minted cli --mobile one, once everything is completely integrated between the 2 of us. @ritz078
Thanks @MarkPieszak . that really helps :)
will there be asp.net support on server side?
Any updates of this? Is angular universal usable with the CLI?
@theunreal @ritz078 @goelinsights @dottodot @vinodbhargava @neilhem @vaskgjuri
There is an open PR for the CLI here: #2318
I'm not sure exactly when it will be merged, but soon there will be --universal support 👍
You can thank @devCrossNet ✨
any news on this? seems like there's 10 different threads around this, all forwarded on to the next
Still no updates on this? Adding the --universal flag to the CLI?
We have some trouble to publish it. You can already use it. Check out the universal-webpack branch in my fork. It will be published soon. Sorry that it takes so long.
@devCrossNet will someone comment here when it is published? I'm sure that many (including myself) are waiting on this delicious addition to the cli.
@azjkjensen yes, I will comment here and tell you how to install it. I have to change a lot since it will not be integrated in the angular-cli project. Therefore we have a lot to test in the first release.
@devCrossNet Is it going to be a separate project which will generate angular universal ? And another question. How do i make prodaction folder with server file in to dist folder. Because now if i clone your repo universal-webpack and after run ng build --prod i do not get server file in dist folder there fore i cen not configure package json to run server from the dist.
@goriunov it will be a separate npm package. But it will be always up to date with the angular-cli project. So you have everything from both worlds. It'll work like the angular-cli but with an additional flag --universal. You should already have a production bundle for the server in ./dist/server.bundle.js, if not you've found a bug.
@devCrossNet I suppose this is temporary. And ultimately, we will only have one angular-cli package.
I don't know what could have changed so drastically that would also affect the "regular" usage (without the --universal flag) and needing to be a whole separate package... only difference should be whether or not I want to use the --universal flag, no?... Or is this "split" because (for a while at least) there will probably be more releases for the universal version (bug fixing/features etc.)...
@MrCroft I planned to have it as a separate channel on angular-cli, like angular-cli@universal. But the core team has not enough time to review changes that are not part of the core angular-cli project. And they also have not enough time to publish every time I want to publish something new. So they came up with this solution. But with the nextGen of angular-cli it will be much easier to implement things like universal support. So we have to wait for the nextGen to get a better solution. An alternative would be to not publish it and just leave it as a fork and everyone that wants to use it, uses git clone and install it locally.
I published the first version of universal-cli, you can install it with npm install -g universal-cli and if you want to create a universal project type ng new <appname> --universal. Feel free to contribute, file issues, etc.
@devCrossNet Is there a repo for this or is this just the branch you mentioned? Just wondering for bug reporting if I happen to find any.
BTW, Thank you so much, the only thing keeping me from going strictly to angular 2 was the SPA SEO issues and universal solves that as well as the ease of the CLI.
@daygon2007 this is the project page: https://github.com/devCrossNet/angular-cli. have fun! :-)
Hello @devCrossNet, I just checked your universal-cli >) Thank you for work). In generated project we have file polyfills.ts however i have not found any places where we use this file. Should we import it in the client.ts?
And i have not found any way to create issue in https://github.com/devCrossNet/angular-cli.
@goriunov sorry, I did not have enabled the issues. It is now enabled.
@devCrossNet could you clarify what you mean by cli "nextGen"? Since the flow of information is .. less than ideal. Is there some kind of breaking changes coming down the road?
@Renader as the repo of angular-cli says "Prototype of a CLI for Angular 2 applications based on the ember-cli project.". There are discussions about, how can the CLI be more extensible (e.g. universal, mobile). Best would be some kind of plugin system, that you can create a universal plugin and the plugin author has to his job on quality and stuff and not the core team. It should not change the result of the CLI (structure, commands, etc.). It is more a change for developers. But I don't know the big picture. I think it is a difficult topic and they have to do a lot of thinking to create a proper plugin system.
Great to hear we can now use --universal. Is there anywhere we can find out about deploying the resulting project to a remote server (CentOS in my case)? I thought it should be just a matter of running "node server.bundle.js" on the server, but after few hours of trying I'm not so sure anymore.
@code-div do you get an error or something?
@devCrossNet sorry, yes, should've mentioned: "Error: Cannot find module 'angular2-universal-polyfills'".
Would be great if you can create an issue in the universal-cli repo
So is the idea that with universal, the first hit to the app will be fully rendered on the server and sent to the client, which if your needs are for proper SEO meta tags for crawling, these will be present in the payload sent to the client. Then, when you continue to interact with the app, you will be in client mode?
@photostu Yes, and it also helps speed up the first rendering of the page since you get a very small pre-rendered page first, and then you load the js. Making the app snappier.
Hi Guys, I have an angular-cli app which is compatible for AOT compilation. and I want it to have a angular universal support as well. so I just run a command "ng serve --universal" and it working perfectly
My Question is - "Does it mean that my app is working fine for angular universal?"
Any help will be appreciated in advance.
If you're using the Angular-CLI here it doesn't have any aspects of Universal in it just yet, Universal aspects are within the Fork here (https://github.com/devCrossNet/universal-cli). Hopefully to be integrated with this CLI in the future. It is in Alpha though, so you may experience some issues. @shriunyscape
Does anyone have any idea when Universal will be integrated with Angular-cli? I'm looking for a realistic timeline.
Please note that the universal cli fork is going to be abandoned soon ( https://github.com/devCrossNet/universal-cli/issues/101#issuecomment-288464913 ) so it may be not a good idea to start stuff using it now.
@angular/platform-server related PRs: #5194 #5547
Universal demo from robwormald: https://github.com/robwormald/ng-universal-demo
My attempt to get Universal working in CLI: https://github.com/intellix/angular-cli-server/commits/master
Attempt 1
Commit: intellix/angular-cli-server@c2ea1eb
Errors I get when serving via: ng serve --app=server
ERROR Error: The selector "app-root" did not match any elements
at DefaultServerRenderer2.selectRootElement
Attempt 2
Commit: intellix/angular-cli-server@0159223
So I found this commit to universal-cli by FrozenPandaz: devCrossNet#85 which is essentially ng4 and platform-server. I copied some stuff into my angular-cli-server project and this time when I try to serve I get the error:
Tried to find bootstrap code, but could not. Specify either statically analyzable bootstrap code or pass in an entryModule to the plugins options.
Which is because the bootstrap code is inside ng-express-engine.ts, but a check is made for it inside your main file here: https://github.com/angular/angular-cli/blob/master/packages/@ngtools/webpack/src/entry_resolver.ts#L133
--
Judging by the PRs in here and universal-cli, I'd say most of the Universal work is coming from @FrozenPandaz so maybe he knows a little more about what's left to get Universal into CLI :)
Please be patient, it'll take some time. At this time.. the best option is to probably eject from CLI and then use it in place of my client config here: https://github.com/FrozenPandaz/ng-universal-demo/tree/master/webpack
Those 2 PR's are the main bulk of what I think is required to run universal BUILDS through the CLI. A considerable amount still needs to be done to run a dev environment which I have lined up but am waiting for approval of the initial PR's before submitting.
should be highest prio right now
should be highest prio right now
indeed!!!!!!!!!!!!!!!!!
All the available examples, including the awesome work by @FrozenPandaz show how to achieve SSR via some sort of a server (node.js express),
However, I think it's important not to lose track of the case when you'd want to pre-render selected pages and have them available for static web hosting (example: AWS S3).
This is especially important since it's the recommended way of doing SSR:
In fact, it is our recommendation that your first option should be using Angular Universal pre-rendering to generate static HTML files so you don't need any dynamic rendering at run time and everything can be cached on a CDN
I can imagine the build command would look something like this:
ng build --platform=server --pre-render-urls=ssrUrls.json
ssrUrls.json
{
"urls": [
"/",
"/about",
"/contact"
]
}Based on the reply from angular/angular#13822 (comment) . It sounds like very simple to do the pre-rendering. It would be great if someone can show some example or point out how to do pre-rendering for a cli generated project. Or just do it after call the eject cmd and modify the webpack configure at this stage?
It should be pretty simple to call renderModuleFactory to get your HTML. 4.0 examples should be up at angular/universal repo next week.
I completely agree with @DmitryEfimenko.
Some static pages into /dist would perfectly fit into the current way how the Angular-CLI works. No custom-server/express.js to mess around with, instead super easy deployments and great scalability.
Can anyone share a timeline on when universal would be available with cli , or at least a current working instructions to enable sever side rendering on cli project ? Looks like https://github.com/devCrossNet/universal-cli is not stable (or building) currently, So what are the options available for a cli project at this stage ?
Thanks Vijay.
Tried to use the platform-server as per the keynote , but couldn't get the main.server.ts configured in angular-cli.json without ejecting cli and going back to webpack.
Tried following this https://www.softwarearchitekt.at/post/2017/03/07/server-side-rendering-with-angular-4.aspx , but after ejecting cli , there are multiple issues popping up with webpack (around scss and aot compilation).
Waiting on platform-server support with cli ..
same here
Any updates?
I took a look at this repo example https://github.com/evertonrobertoauler/cli-universal-demo, and it actually worked. I ran into a few issues though. If you're using BrowserAnimationsModule, it'll prevent the server from loading at all. NoopAnimationsModule works, but obviously with less material flair. Another issue is that you can't seem to run it in anything other than prod mode. Either way, it worked and you can still use ng serve for local work.
Thanks @janiukjf for sharing the demo.. Finally I was able to get the ssr working in my proj without ejecting cli by following that example..
@janiukjf I took this demo 1 week ago and it's not working properly as well. For example, AngularFire 2 is not working for SSR with this repo. My entire project tied with firebase and that's why I cannot refuse from it.
@IPRIT Yeah, I'm probably going to have to eject from the cli to get animations working properly. There doesn't seem to be a way to get BrowserAnimationsModule working with this technique since it all uses the same app module.
@janiukjf The problem is, you really don't want to just have a ServerModule inherit from AppModule (if you need to split Browser/Server platform dependencies).
What you want is a Browser module and a Server module (that both import app.module which only has the most common things). Then Browser-app.module has BrowserModule in it, AnimationsModule etc. Server has ServerModule, NoOpAnimationsModule etc.
+ app.module (all the most common things)
+ ^ ^
+ browser-app.module server-app.moduleHope that helps!
Check here for an example of how you could be splitting platform logic.
@MarkPieszak Yeah, I assumed as much. I will definitely be working on that as soon as I find some more time. I'll definitely be looking at that example when I do. Thanks for the pointer.
Could someone point out how to get the http calls working during server side rendering ? Requests fail with this error
Response:{
_body:
ProgressEvent:{
type: 'error',
........
status: 0,
ok: false,
statusText: '',
type: 3,
url: null
Do I need to import some extra HTTP provider for SSR calls to work (while using the platform-server library) ?
@kaleemxii you need to provide absolute url to angular http
Thanks @hheexx , however my error was related to the way I was overriding http service in a shared module, after I moved that to main app module, it worked.
Hello everybody, I have an angular 4 cli project and I need to implement SSR through the prerender logic so that I can upload it onto an amazon S3 bucket.
Is there any guide or how-to that I can follow?
Thanks.
Has anyone experimented with this angular-ssr project? I found it through The Unofficial Angular Docs. Sounds like a decent solution for an Angular 4 application...
any news
@MuhammadShaban I got my app working with cli and SSR using several examples. This is the one that worked for me with separate browser and server builds. https://github.com/pquarme/cli-universal-demo
@janiukjf thank you so much, i will try it
@janiukjf is AOT server/client side included in https://github.com/pquarme/cli-universal-demo ?
@vforv Yup. It is. The only weirdness it has is with SCSS compilation on server side, but that is also included. They use gulp to process the sass files and then run webpack to properly process them. I want to spend some time trying to get this to work without gulp, but I haven't made it a priority yet.
@janiukjf how can I check that? I can not find tsconfig-aot.json and rollup files...
Does pre rendering come out of the box with any of the mentioned examples? Would it be possible to render multiple static html/css assets for individual pages with these setups? Now, the only static html page rendered is the index file. I'm using evertonrobertoauler/cli-universal-demo