universal: Can't use/inject REQUEST and RESPONSE in the browser

  • I’m submitting a …
  • bug report
  • What modules are related to this Issue?
  • express-engine
  • Do you want to request a feature or report a bug? I think it’s a bug

  • What is the current behavior? It’s not working as expected. The documentation states the following:

Using the Request and Response
..
If your app runs on the client side too, you will have to provide your own versions of these in the client app.

So I checked the source code of the express engine. The REQUEST and RESPONSE are provided for the dependency injection here: https://github.com/angular/universal/blob/master/modules/ng-express-engine/src/main.ts#L129

I tried to inject (a stub for) the REQUEST in the browser bootstrap file like this:

import 'zone.js/dist/zone';
import 'reflect-metadata';
import 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { CompilerOptions } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { REQUEST, RESPONSE } from '@nguniversal/express-engine/dist/src/tokens';
import { BrowserAppModule } from './app/browser-app.module';

const compilerOptions: CompilerOptions = {
  providers: [
    {
      provide: REQUEST,
      useValue: {}
    },
    {
      provide: RESPONSE,
      useValue: {}
    }
  ]
};

platformBrowserDynamic().bootstrapModule(BrowserAppModule, compilerOptions);

as this mostly resembles how the bootstrapping is done in the express engine. But this doesn’t work, but it does compile and build. I can get full access to the REQUEST on the server, but in the browser I get this error: ERROR Error: No provider for InjectionToken REQUEST!

I tried the same providers in the root Module. Same result.

  • If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem by creating a github repo.

Inject the REQUEST like this, anywhere in the application: constructor(@Inject(REQUEST) private REQUEST: any) {} and run the application. It will work on the server side but emit an error in the browser ( see stacktrace below )

  • What is the expected behavior?

That I can inject the REQUEST ( and/or RESPONSE ) also in the client side code. The values should just be mocked as empty or filled in where possible, like for example the document.cookies

  • Please tell us about your environment:
  • Angular version: 4.1
  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX ]
  • Language: [ TypeScript 2.2 ]
  • OS: Mac OS X
  • Platform: NodeJs

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 23 (4 by maintainers)

Commits related to this issue

Most upvoted comments

@samvloeberghs and @MarkPieszak, I have the same problem… In my case I’m trying to access the cookies on the server side (on client side I use ng2-cookies). I was using this way on angular 2: server.ts

res.render('../dist/index',` {
    req: req,
    res: res,
    cookies: req.cookies
  });

then in server.module.ts

function getCookies() {
  return Zone.current.get('req').cookies;
}
...
{ provide: 'Cookies', useFactory: getCookies },
...

any-component.ts

constructor(@Inject('Cookies') private cookies)
...

But it doesn’t seems to work anymore neither…

And I just tried the new InjectionToken<string>('REQUEST'); but I got nothing on the server. Also get the same error as @samvloeberghs (No provider for InjectionToken REQUEST!) when reproducing.

Any hint we could explore ?

@vikerman still need to validate… will try to do it in the upcoming days edit: JIT works, AOT works, wicked 😃 thanks a lot! @MarkPieszak @FrozenPandaz @vikerman

still doesn’t work with AOT on my side… Can’t do more than provide the example repo… run it and see it failing 😃

Is this resolved after adding the ngc compilation?

Yep not working in AOT… and this solution doesnt work for me either https://github.com/angular/universal/issues/713 Still No provider for REQUEST

Sorry about this, while there seems to be many issues regarding the request and response tokens, i do not think this is one of them. I’m able to use them without AoT here

https://github.com/FrozenPandaz/ng-universal-demo/tree/request

Adding another implementation as a provider in your browser.app.module should do the trick…

(Build is acting up right now because of something related to AoT)

@FrozenPandaz on a fresh clone of your repo ng-universal-demo, I reproduce the same behavior. I get the Server Side error No provider for InjectionToken REQUEST!, but get the provided REQUEST on client side.

Move those into your browser-app.module (the REQUEST/RESPONSE providers) and you should be all set. Also for REQUEST you could just pass back cookie: document.cookie since the browser has access to those, instead of an empty {}. https://github.com/MarkPieszak/aspnetcore-angular2-universal/blob/master/Client/app/browser-app.module.ts#L56-L57

Hope that helps!