Integrating angular2 Universal with angular CLI project

[vinodbhargava]

1. OS - Windows 8
2. Versions - angular-cli: 1.0.0-beta.5 node: 4.3.1 os: win32 x64
3. Yes, the app was created using CLI

4. Steps - A. Created the app using following command - ng new testApp

   B. Installed angular2-universal dependencies as mentioned in -
   Angular 2 Universal quickstart

   C. 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 accessing http://localhost:3000 it 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.

[MarkPieszak]

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

[vinodbhargava]

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.

[MarkPieszak]

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?

[vinodbhargava]

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"

[vinodbhargava]

@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.

[neilhem]

Yeah, the same error happening when you generate app via angular-cli and add server code from https://universal.angular.io/quickstart/

[vinodbhargava]

Hi @neilhem, any luck?

[neilhem]

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

[MarkPieszak]

@gdi2290 Not sure if this one was on your radar, can't tell if it's CLI or Universal itself

[vaskgjuri]

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

[vaskgjuri]

Nevermind, got the same error as well.

EXCEPTION: Error: Protocol "d:" not supported. Expected "http:"

[vaskgjuri]

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 -

1. install the typings as mentioned in angular2-universal IO https://universal.angular.io/quickstart/
2. 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 https://github.com/angular/angular-cli/issues/1050#issuecomment-225383345, 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

[vaskgjuri]

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

[MarkPieszak]

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.

[vaskgjuri]

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 https://github.com/angular/angular-cli/issues/1050#issuecomment-225396651, 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

[vaskgjuri]

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 https://github.com/angular/angular-cli/issues/1050#issuecomment-225396651, 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

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

[MarkPieszak]

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!

[doczoidberg]

shouldn't angular CLI support universal from ground up? e.g. ng generate universal node/asp.net

[MarkPieszak]

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/

[doczoidberg]

thanks for the link. Is it possible/usable to combine this with angular CLI?

[MarkPieszak]

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

[filipesilva]

I believe @Brocco was looking into Universal integration, but I don't know more than that.

[Brocco]

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!!!

[MarkPieszak]

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!

[pdelorme]

Is there a working-group & roadmap for cli/universal integration ? @Brocco, can you tell how your investigation goes ? Thanks.

[choucry13]

Some news or nothing ?

[MarkPieszak]

@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!

[choucry13]

thank @MarkPieszak . Me and @pdelorme will see this solution.

[MrCroft]

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?

[MarkPieszak]

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.

[MrCroft]

@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.

[kylecordes]

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.

[MrCroft]

@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.

[dottodot]

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

[monojack]

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.

[dottodot]

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'.

[goelinsights]

@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?

[MarkPieszak]

@goelinsights To create the app-shell

[ritz078]

@MarkPieszak Did you get it working ? Its really becoming a pain and stopping me from using Angular in a large project.

[MarkPieszak]

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

[ritz078]

Thanks @MarkPieszak . that really helps :)

[doczoidberg]

will there be asp.net support on server side?

[theunreal]

Any updates of this? Is angular universal usable with the CLI?

[MarkPieszak]

@theunreal @ritz078 @goelinsights @dottodot @vinodbhargava @neilhem @vaskgjuri

There is an open PR for the CLI here: https://github.com/angular/angular-cli/pull/2318 I'm not sure exactly when it will be merged, but soon there will be --universal support :+1:

You can thank @DevCrossNet :sparkles:

[gruckus-gruckus]

any news on this? seems like there's 10 different threads around this, all forwarded on to the next

[daygon2007]

Still no updates on this? Adding the --universal flag to the CLI?

[devCrossNet]

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.

[after-ephemera]

@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.

[devCrossNet]

@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.

[goriunov]

@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.