[](https://codeclimate.com/github/maciejtreder/ng-toolkit/maintainability)
[](https://codeclimate.com/github/maciejtreder/ng-toolkit/test_coverage)
[](https://travis-ci.org/maciejtreder/ng-toolkit)
[](https://david-dm.org/maciejtreder/ng-toolkit)
[](#backers)
[](#sponsors)
[](https://badge.fury.io/js/%40ng-toolkit%2Funiversal)
# Universal support for your Angular application [](https://twitter.com/intent/tweet?text=Just%20started%20using%20@ng-toolkit/universal&url=https://github.com/maciejtreder/ng-toolkit&via=maciejtreder&hashtags=angular,pwa,webapp,software,developers,serverless,firebase)
### _**Star it and share with others!**_
_This is part of the @ng-toolkit project. [Check main page for more tools](https://github.com/maciejtreder/ng-toolkit)_
Add Server Side Rendering support (Angular Universal) to your Angular project.
[Check deep overview article on Medium](https://medium.com/@maciejtreder/angular-server-side-rendering-with-ng-toolkit-universal-c08479ca688)
## Live demo
[Angular Universal PWA on AWS Lambda + API Gateway](https://www.angular-toolkit.maciejtreder.com)
## Getting started
Create or navigate into your project:
```bash
ng new myApp
cd myApp
```
apply package
```
ng add @ng-toolkit/universal [--http false]
```
## Run options
### Run server locally
```
npm run build:ssr
npm run serve:ssr
```
### Prerender Angular app
```
npm run build:prerender
npm run serve:prerender
```
### Options
If you don't want to use TransferHttpCacheModule indicate it by adding `--http false` flag.
Adding new component:
```
ng g c myComponent --module app
```
You can chain this package with:
- [@ng-toolkit/serverless](https://github.com/maciejtreder/ng-toolkit/blob/master/schematics/serverless)
- [@ng-toolkit/pwa](https://github.com/maciejtreder/ng-toolkit/blob/master/schematics/pwa)
- [@ng-toolkit/firebug](https://github.com/maciejtreder/ng-toolkit/blob/master/schematics/firebug)
Check out tutorial by Gary Sinon:
[](https://www.youtube.com/watch?v=hxG9nuvnh-A)
## Working with `window` and `localStorage` objects
This package is shipped with the wrapper for the `window` and `localStorage` objects. Whenewer you need to use it, just inject it into your component or service:
```
import { WINDOW, LOCAL_STORAGE } from @ng-toolkit/universal
/*
class/service declaration and decorator
*/
constructor(@Inject(WINDOW) private window:Window, @Inject(LOCAL_STORAGE) private localStorage: any) {
console.log(this.window);
}
```
If you did not use Angular CLI to install this package, you need to import `NgtUniversalModule` in your shared app module:
```
@NgModule({
imports:[
/* other imports*/
NgtUniversalModule
]
})
export class AppModule { }
```
## Looking for something more?
Feel free to [create issue with your feature request](https://github.com/maciejtreder/angular-toolkit/issues/new)
## Funding
You can support development of this project via:
- [Open Collective](https://opencollective.com/ng-toolkit)
- [Donorbox](https://donorbox.org/ng-toolkit)
- [Liberapay](https://liberapay.com/maciejtreder/donate)
- [Paypal](https://www.paypal.me/ngtoolkit)
### Open Collective Backers
Support this project with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/ng-toolkit#backer)]
### Open Collective Sponsors
Become a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor](https://opencollective.com/ng-toolkit#sponsor)]
## Credentials
* Checkout my [home page](https://www.maciejtreder.com) and find out more about me