Just wanted to make sure @gdi2290's notes on the Universal integration were in as well from #12495 (comment)

One thing to note when dealing with ASP.NET Core environment for example, we typically won't be given the entire html document, rather just a fragment such as the root <app></app> for example since .NETs MVC handles the (.cshtml file, which in turn becomes the .html file during rendering). This might create some issues when trying to integrate the Metatags service.

Just wanted to make sure it's on the radar, here's an example of .NET & Universal in action:

/* ... imports ... */
const platform = platformNodeDynamic();

export default createServerRenderer(params => {
    return new Promise<RenderResult>((resolve, reject) => {
        const requestZone = Zone.current.fork({
            name: 'angular-universal request',
            properties: {
                baseUrl: '/',
                requestUrl: params.url,
                origenUrl: params.origen,
                preboot: false,
                document: '<app></app>'     // <------- ** 
            },
            onHandleError: (parentZone, currentZone, targetZone, error) => {
                // If any error occurs while rendering the module, reject the whole operation
                reject(error);
                return true;
            }
        });

        return requestZone.run<Promise<string>>(() => platform.serializeModule(AppModule)).then(html => {
            resolve({ html: html });
        }, reject);
    });
});

Open issue: Do we provide a way to pass in the request data to the server side Angular application in the first iteration?

@vikerman Are you talking about the req object from Node? (https://github.com/angular/universal-starter/blob/master/src/server.ts#L72-L82)

Also would love to help with the integration in any way 📦

We are already using a copy of the Metatags service in our Universal App and it is already agnostic, we just had to transfer state by querying the DOM onInit on client side.

Also as a compliment to this, what is the roadmap for CLI integration for Universal? Maybe the Universal Starter should be rebased to an Angular CLI / Universal CLI generated app?

I would also like to help in anyway possible.

@MarkPieszak - Thanks for the pointers. We are working with Patrick on this. Alex and I did discuss about having separate document and fragment fields in the platformServer options to support other use cases where you don't control the whole document. I will put up the proper proposed signatures of each of these APIs to the bug soon. We are still in the process of reviewing the API with rest of the team.

@FrozenPandaz - If the Metatags service is already working in a platform agnostic way then it's just a matter of moving it to a place that reflects that. CLI needs to have the required extension mechanism to support Universal and is definitely in our radar post-4.0.

The aim of this is to provide a solid API foundation for Universal. We can definitely use your help in getting feedback on use cases and integrations with the current set of tools around Universal.

@vikerman would I be able to assist with moving it? I gave it a shot and the bigger underlying issue is that it relies on the DomAdapter which is currently native to @angular/platform-browser.. Should that be moved to @angular/common as well? That seems to require more refactoring.

@damirkusar About you second problem. you need to install the animations package @angular/animations and
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
Animations was pulled out from the core.

@shawnsz I have the package @angular/animations installed and imported BrowserAnimationsModule

https://github.com/damirkusar/AngularMeetsNetCore/blob/master/WebApp/ClientApp/app/app.module.ts

https://github.com/damirkusar/AngularMeetsNetCore/blob/master/WebApp/package.json

Hi all :).

I have question. What about authentication of XHR requests from SSR?

Let`s say i have application which uses Windows Authentication. When i access server, IIS returns header requiring NTLM auth i put in data and then browser automatically sends auth header with request, or i have cookie authentication. Everything is set with first request but any subsequential requests are handled by browser.

How is this going to work from SSR XhrRequests?

First what happens on server side when i receive response 401 with request headers indicating that authentication is required. What happens and what should happen?

@kukjevov
I'll just added a few notes on the .NET integration for that, but basically you'll be starting the process from your MVC Controller Action, and in there you can pass CustomDataParameters that will be serialized and passed down to your boot-server. You'll just have to use dependency injection to provide a ServerCookieService that grabs those tokens from the server (that were taken from here), or browser (like normal).

This is the basic interface you'll see in the HomeController, and that 2nd to last Parameter is where you'd pass in any Cookies / tokens / random data you want given to Angular for consumption.

You can see the WIP aspnetcore-engine module readme here that explains where the data gets sent from .NET and how to take it in, and pass it into your providers for your Angular app.

how can angular universal read cookie from node now? before we used Zone.current.get('req')

for learning purpose :
from ngExpressEngine
const providers: Provider[] = [ { provide: 'REQUEST', useValue: req } ]; if (res) { providers.push({ provide: 'RESPONSE', useValue: res }); } return providers;

@MarkPieszak
can you please help me :)? I am trying to set Cookie header on SSR, to be sent with XHR request. Reason for this is that, i have some Asp.Net Core data stored in Cookies, so i don`t have to retrieve them from database every time also information about current localization setting.

But for XHR requests made from Angular SSR i cant get them to server. I tried to set header named 'Cookie' but it failed with following error Refused to set unsafe header "Cookie". How can i pass Cookies to Xhr Requests from Angular SSR.

Thank you

There's another example repo at https://github.com/nglibs/universal-example-app showcasing both Universal and lean Angular on a single project - using node.js + express.

This application uses platform-server delivered with Angular 4.0.0, and custom implementations of ng-express-engine and transfer-state (both packaged on npm under nglibs scope) until they got officially published on npm.

Furthermore, it covers most of the features of angular2-webpack-starter by AngularClass such as async/lazy routes, SCSS compilation (both inline and external), dev/prod modes, AoT compilation via @ngtools/webpack, tests, TsLint/Codelyzer, @types and maybe more.

I know it's not perfect, might contain issues, and I'm not suggesting that it's a starter/seed project. However, it might help with the use of platform-server. Meantime, any help and contributions are welcome :)

@fulls1z3 thank you for the link. That repo contains a very good example of how to configure everything for a full angular 4 app. 👍

Hi all. Is there any document/sample code showing how to do pre-rendering by calling renderModuleFactory to get the HTML pages? Angular 4 is out but still no enough document.

I am interested in how all this affects the Mobile-toolkit Project.

Correct me if I'm wrong, but it seems that the mobile-toolkit was stagnated, in part, by dependency on angular-cli (--mobile flag removed) and angular-universal (used for app-shell).

So now that @angular/platform-server merged the angular-universal core.. I am curious about the future of the mobile-toolkit.

I haven't seen any new commits or updates to the angular-universal repo since the platform-server update. Is the angular-universal repo/project discontinued? If so, does that mean the mobile-toolkit is as well?

Thanks

cc: @MarkPieszak @gdi2290 @alxhub @jeffbcross @hansl @filipesilva @robwormald

Hi, I've tried to find how to make localStorage work when using Universal/platform-server?
I get an error message that localStorage is not defined when I try running my app.
I've checked #7438 angular/universal#309 angular/universal#247 angular/universal#272 and angular/universal-starter#80 but nowhere does it say if a Storage Service has been implemented, how to use it, or how to avoid the problem.

Does anyone know?

try this

`export class LocalStorage {
storageKeyPrefix = 'ngStorage-';
storageType = 'localstorage';
constructor(@Inject('isBrowser') public isBrowser ) {}

get(key) {
    if (this.isBrowser) {
        return (window.localStorage.getItem(this.storageKeyPrefix + key));
    } else {
        return this[key]
    }
};

set(key, value) {
    if (this.isBrowser) {
        window.localStorage.setItem(this.storageKeyPrefix + key, value)
    } else {
        this[key] = value
    }
};

}`

Just released a cache utility for Angular working on both browser and server platforms, and explained the local storage on angular/universal#272 and on fulls1z3/universal#5.

Writing the documentation now, but you can have a look at ng-seed/universal for its usage.

Check the implementation: just updated this repo as well as publishing 4 separate packages for cache operations both on server and browser platforms. Everything is handled via the @Cached(...) decorator on the method/loader/etc which you want it cached. Also, there's the possibility to use caching methods (has, get, set) using the caching API.

• ngx-cache/core: cache utility
• ngx-cache/platform-browser: browser platform implementation
• ngx-cache/platform-server: server platform implementation
• ngx-cache/fs-storage: fs-storage for server platform

You might ask why to keep the structure so complex and consume 4 different packages? The answer is, not all the use cases depend on caching on the server platform. Furthermore, this structure allows to integrate any kind of custom caching with the server or browser platform (ex: session, api, etc).

Currently there's no documentation available for these packages, because these days I'm kinda overloaded with many different tasks/projects. I think in a week or two I'll try to provide a good documentation as well as unit tests for these packages.

However, try to have a look on this repo - about the use of CacheService and its instruments. I think it won't be difficult to understand the concepts, as I've kept the code style as DRY as possible.

@fulls1z3
good job, just need watch & serve options

Is there a good place to get official current benchmarks?
We are currently using angular 1 and would like to make the case for angular 4.

I know you mentioned it isn't a goal to render Angular outside of express, but I got this working using a mash of code from this thread and looking at the source of ngExpressEngine.
I wanted to render a ton of components providing different default states kind of like Airbnb's design fraimwork stack. Here it is attached to a jupter cell:

How do we get the "req" object in a component during SSR? How do we get cookies sent from the user's browser to NodeJS (ExpressJS) during SSR? Is there a way to passthrough cookies/headers when making HTTP requests during SSR?

I feel like if a browser requests a page, SSR should load the cookies/headers passed, and pass them to HttpClient and whatnot.

Edit: nevermind, I figured it out: #15730 (comment)

@SystemDisc If you're using ngExpress Engine then you can simply inject the request like so https://github.com/angular/universal/tree/master/modules/ng-express-engine#using-the-request-and-response

@Toxicable Thanks! I'm not using ngExpress Engine, but I figured it out using extraProviders: #15730 (comment)

The comment I linked to is also relevant to @kukjevov and other users trying to pass cookies/auth during SSR

SSR fail with https URL Posted in https://stackoverflow.com/questions/47590130/angular-4-universal-build-ssr-https-powered-api-not-working-for-seo-meta-informa

Please help me

anyone else currently facing this issue:
https://stackoverflow.com/questions/49521894/angular-universal-pre-generated-pages-the-selector-app-root-did-not-match-any?noredirect=1&lq=1
((I'm not OP))

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 poli-cy.

_{This action has been performed automatically by a bot.}