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)
@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
then in server.module.ts
any-component.ts
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 providedREQUEST
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-L57Hope that helps!