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

[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
#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

[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
#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

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!

[PSTime]

@KhalipskiSiarhei you can try import it function from inline..bundle.js, that has been generated after ng build / ng build --prod.
or try import 'dist/inline..bundle.js'
I haven`t tried it, might be work

[KhalipskiSiarhei]

@PSTime I am not sure how it is possible to import inline.bundle in server ASP.NET Core environment: in Microsoft.AspNetCore.SpaServices.Prerendering.Prerenderer.RenderToString(...) it is possible to pass one module only, which in fact is main.bundle. Furthermore, inline.bundle is created for browser environment because it contains document.getElementsByTagName, document.createElement, window references which are not available in server environment.

[Toxicable]

If it helps i have a small demo showing Universal working in the CLI with both prerendering and express scenarios and Lazy Loading here https://github.com/Toxicable/universal-starter/tree/cli
Just run npm run build:prerender or npm run build:dynamic and inspect the /dist folder to see how my implementation works.
Feel free to ping me on the Angular Gitter with @Toxicable if you have any questions https://gitter.im/angular/angular

[KhalipskiSiarhei]

@Toxicable thanks, I will look at it. For now we still use CLI for client bundles and webpack for server bundles and it is not ideal...

[somombo]

#1050 (comment)
... angular cli doesn't generate LAZY_MODULE_MAP (I have added platform=server), do you have any suggestion ?

@PSTime I can confirm that I also have not been able to import LAZY_MODULE_MAP and I dont see it anywhere in the build output.

I suggest filing a separate bug on this @angular/cli repo..

Do you mind filing it? 💐 😌

Be sure to reference the @nguniversal/module-map-ngfactory-loader instructions.

[Toxicable]

@somombo what version of the CLI? you need v1.3+ for LAZY_MODULE_MAP
In all of the testing i've done it's always worked like so
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require(./dist-server/main.${hash}.bundle);

[NgxDev]

@Toxicable Thank you for this!
Best implementation I've found so far that I could simply make work without banging my head against the wall or getting errors I couldn't even understand :) Also, first implementation that works with lazy loaded modules.
I am curious though, what will the final official implementation be... I mean how will the CLI do it, by using only a command / argument when creating and when building the app...

Do you have any examples for things such as:

• reading cookies server-side (the content of some components might depend on that, let's say if a user is authenticated or not - verifiable through a cookie)
• not making an http request on the client side if we already have that data in the server rendered view

?

[Toxicable]

@MrCroft as far as I know I don't think it will change too much from how it looks now.
Things like the prerender.js script I have and the server.js are very much things that the domain should provide rather than the CLI, therefore in that regard I don't think the CLI can provide much more.

As for cookies I havn't looked at how this will work yet, I'll put that on my list though, if you want to make an issue/proposal on https://github.com/angular/universal for it that would be appreciated.

Your second point is referring to a concept called StateTransfer, this is the process of storing your state on the server then transferring it to the client and reusing it.
I am currently working on a proposal for this and subsequently a PR

[ennyta]

Is universal now part of angular client or not yet? If not, is there any timeline when it could be?

[MarkPieszak]

@ennyta Yes, take a look at universal-starter to see it in action. I'll be updating the docs here in the CLI for it as well.

@MrCroft You'll still have to run and bundle the server things yourself, it won't be part of ng serve, that will still produce only the client bundle. The concept of universal implies the server aspect, so there needs to be that separation.

Also this gives freedom to any type of node server someone wishes to use, hapi koa express etc.

As for cookies, in the server you'd have to handle it yourself by passing in the req object to the providers[] and then use Dependency injection to have the server use those, while the client gets them from document.cookies.

Hope that helps a little bit!

Also, right now you can manually create or use one of the TransferHttp examples we have, but soon it will be part of Core that will (optionally) handle it, if you tell it to do it for a certain GET call.

[ennyta]

Thanks @MarkPieszak
Is there a way to test somehow universal build from dist-server locally?

[Toxicable]

@ennyta If you're using https://github.com/angular/universal-starter and in the cli project then you can use npm run serve:static for static rendering ( aka prerendering) or
npm run serve:dynamic for dynamic rendering (using express)
to see how it looks as if you were running on a prod server but locally

[ennyta]

@Toxicable , I am in client and have two folders following https://github.com/angular/angular-cli/wiki/stories-universal-rendering.
Is there a way to test dist-server locally?

[Toxicable]

@ennyta are you planning on doing prerendering or using Express/aspnetcore to do dynamic rendering?

[ennyta]

@Toxicable Trying to do prerendering, managed to run it and now getting error like this:
import { Injectable } from '@angular/core';
^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:53:10)
at Object.runInThisContext (vm.js:95:10)
at Module._compile (module.js:543:28)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at Object.sZvN (C:\Users\ana\workspace\foodfest\foodfest-client-cli\dist-server\main.ed8dace87ce02020841a.bundle.js:1:859271)

Any idea if it is fixable? I see several people in this topic run into them, but I don't see if there is a solution for it.

[PatrickJS]

@ennyta the cli probably needs to include nodeExternals and whitelist angular modules that way webpack can read the es6 module syntax

[NgxDev]

This seems to have been removed: https://github.com/Toxicable/universal-starter/tree/cli (I get a 404).
I guess we can use the universal-starter/cli - it was updated like 10 days ago - but there are quite a few differences in the server.js and prerender.js files (compared to what @Toxicable 's repo had) - and maybe other files I haven't checked yet (I think I can say that, to me, they're almost like plain "text" differences, because I have no clue about Node development whatsoever).
Should we consider that the CLI folder in the universal-starter is (and will continue be) the most up-to-date example of Universal implementation on a CLI generated app?

@gdi2290 About prerendering, I've read that "it renders your application and replaces the dist index.html with a rendered version.". What is that useful for? I mean, we don't only have a root (home) page. Should we manually go over all the routes and generate a static html file for each possible route? And is this done by simply replacing the value of the url key in the renderModuleFactory options? But, even so... we might have dynamic routes or route params and query params, which would be very difficult (if not impossible) to take into account in the prerender.js script to generate all possible html content files for all the possible routes/route params/query params combinations (not to mention that, for the route params, the actual values will most probably come from a database). I'm completely failing to understand what prerendering is about... I must be missing something, I guess it must have it's use... I think that I'm just failing to see what that is? If not, then it seems to be an overkill to implement. The way to go would then be dynamic and I'm sure that a Node developer would also be able to easily cache whatever content is generated on the first request and use that for future requests.

EDIT:
Alright, so I've got my answer below. I understand that prerendering is more suitable for apps in which generating the content doesn't rely heavily on dynamic params (which most probably correspond with identifiers in some sort of server-side database). And for that, we're better off with dynamic rendering (and some sort of caching, of course). Thank you @Toxicable

[Toxicable]

@ennyta See this issue for for information on that issue #7200

@MrCroft My demo has been merged into https://github.com/angular/universal-starter/tree/master/cli
The example there shows only the / route being rendered but I have a tool in the works that will allow you to dynamically generate prerenders for every static route in your app see: angular/universal#778 or https://github.com/Toxicable/universal/tree/routes-ls
for more about that.
As for dynamic routes with params, they cannot be easily prerendered, you'd be best using one of the dynamic rendering engines we have, either the Node one for aspnetcore one, which will render your app on the fly meaning it can use all the params that come along with the request

[NgxDev]

@MarkPieszak

As for cookies, in the server you'd have to handle it yourself by passing in the req object to the providers[] and then use Dependency injection to have the server use those, while the client gets them from document.cookies.

Since your comment, I've been searching back and forth for an actual example, but couldn't find one. So, I've blindly managed to do it after reading different issues/browsing through different repos, with this in my app.server.module.ts file:

// ...
import { Request } from 'express';
import { REQUEST } from '@nguniversal/express-engine/tokens';

export class RequestCookies {
    constructor(@Inject(REQUEST) private request: Request) {}

    get cookies() {
        return !!this.request.headers.cookie ? this.request.headers.cookie : null;
    }
}

@NgModule({
    imports: [
        // ...
    ],
    providers: [
        MyCustomCookieService,
        { provide: 'req', useClass: RequestCookies }
    ],
    bootstrap: [AppComponent]
})
export class AppServerModule {}

While also providing a dummy { provide: 'req', useValue: null } in my app.module.ts (that runs in the browser). Then, in my MyCustomCookieService I inject this: @Inject('req') private readonly req: any and simply check, if it's null then I use document.cookie, else I use req.cookies.

It does work, but I have to ask: is this exactly what you had in mind? Am I doing it the right way?
Also, should I be comfortable with importing something from express in my Angular code?

Also, right now you can manually create or use one of the TransferHttp examples we have

Where can I find such an example? And/or some documentation to help me understand how to accomplish that?
I think this would be the last thing needed for me to suggest going away from php and go for Node/Angular on a project that is planned for a complete rewrite anyway :)
So, since 5.0.0-rc.0 (if I'm not mistaking), TransferState comes with Angular.

[somombo]

Regarding #1050 (comment) by @gdi2290:

 the cli probably needs to include nodeExternals and whitelist angular modules that way webpack can read the es6 module syntax

I have experienced the same issue when trying to use ng-bootstrap on with universal.

Does anyone know if there is an open issue for the above (I can't seem to find one)?
@hansl / @filipesilva ... if there isn't one, should there be?

[Toxicable]

Can be closed since the CLI does work with Universal
https://github.com/angular/angular-cli/wiki/stories-universal-rendering

[MarkPieszak]

@MrCroft nicely done, yes that's a great way to get it! Yeah you're fine, you could also just do your own interface for it since you know the exact pieces you want. Either way is fine, since this is all in the server render anyway! 👍

[itstyro]

@somombo
I am experiencing the issue to use ng-bootstrap on with universal. An open issue is here
ng-bootstrap/ng-bootstrap#858

Let me know if you found a way out of it!

[somombo]

@itstyro I "fixed" my issue by basically not using ng-bootstrap i.e. forked their bit of code that i needed, and incorporated that directly into my project.. lol

Yeah, apart from the node externals outlined above, I'm still finding a variety of problems with the way angular-cli builds the server aspect of the project.

For example in my main.server.ts, I apparently cannot have access to the __dirname global variable.. I use process.cwd() instead but they are actually not exactly the same thing.

Also in the main.server.ts there is an error if you do not export the AppServerModule ... I dont want to have to do this because I use my main.server.ts file as the file where I invoke the renderModuleFactory() function.. not in a seperate server.ts as is suggested in the universal cli story.

[alan-agius4]

Closing as @Toxicable correctly mentioned CLI does work with Universal.

[angular-automatic-lock-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.}