ikatsuba / ngx-ssr

ngx-ssr is a set of utilities for working with Angular Universal.

ngx-ssr

ngx-ssr is a set of utilities for working with Angular Universal.

The project contains:

1. Three publishable libraries:
   • @ngx-ssr/cache - in-memory implementation of the cache for GET requests and HTML. It is possible to change the storage.
   • @ngx-ssr/timeout — implementation of timeout for requests
   • @ngx-ssr/platform — utilities for convenient work with platform-specific data
2. One side publishable library:
   • ngx-rickandmorty
3. The Rick and Morty application based on the Rick and Morty API. The application build artifact is deployed to Firebase Hosting. Using Firebase Function and Angular Universal, the application is rendered on the server.

All developed libraries are used in the application.

Taiga UI is used as a UI framework.

ngx-ssr's Issues

Can't build project for @ngx-ssr/cache

Describe the bug
Hi, thank you for developing this library. When i try to build my project, this build task throws error:
ERROR in node_modules/@ngx-ssr/cache/lib/cache.interceptor.d.ts:10:5 - error TS2416: Property 'intercept' in type 'CacheInterceptor' is not assignable to the same property in base type 'HttpInterceptor'.

Type '(request: HttpRequest, next: HttpHandler) => Observable<HttpEvent>' is not assignable to type '(req: HttpRequest, next: HttpHandler) => Observable<HttpEvent>'

To Reproduce
Steps to reproduce the behavior:

1. Import the NgxSsrCacheModule module in AppModule to cache all GET requests
2. Enable HTML caching for express
3. npm run build:ssr

Expected behavior
Building successfully

Screenshots
Error:

Desktop (please complete the following information):

• OS: Windows 10
• Browser: -
• Version: -

Additional context
package.json:

{
  "name": "myproject",
  "version": "0.0.0",
  "scripts": {
	"ng": "ng",
	"start": "ng serve",
	"build": "ng build",
	"test": "ng test",
	"lint": "ng lint",
	"e2e": "ng e2e",
	"compile:server": "webpack --config webpack.server.config.js --progress --colors",
	"serve:ssr": "node dist/server",
	"build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
	"build:client-and-server-bundles": "ng build --prod && ng run myproject:server:production --bundleDependencies all"
  },
  "private": true,
  "dependencies": {
	"@angular/animations": "~8.2.3",
	"@angular/common": "~8.2.3",
	"@angular/compiler": "~8.2.3",
	"@angular/core": "~8.2.3",
	"@angular/forms": "~8.2.3",
	"@angular/platform-browser": "~8.2.3",
	"@angular/platform-browser-dynamic": "~8.2.3",
	"@angular/platform-server": "~8.2.3",
	"@angular/router": "~8.2.3",
	"@nguniversal/common": "^11.2.1",
	"@nguniversal/express-engine": "^8.2.6",
	"@nguniversal/module-map-ngfactory-loader": "v8.2.6",
	"@ngx-ssr/cache": "^1.1.1",
	"angular-calendar": "^0.28.22",
	"bootstrap": "^5.0.0-beta2",
	"express": "^4.15.2",
	"jquery": "^3.5.1",
	"moment": "^2.29.1",
	"ng2-search-filter": "^0.5.1",
	"ngx-bootstrap": "^5.5.0",
	"ngx-page-scroll": "^7.0.1",
	"ngx-page-scroll-core": "^7.0.1",
	"ngx-pagination": "^5.0.0",
	"ngx-swiper-wrapper": "^8.0.0",
	"rxjs": "~6.4.0",
	"swiper": "^6.4.15",
	"tslib": "^1.10.0",
	"zone.js": "~0.9.1"
  },
  "devDependencies": {
	"@angular-devkit/build-angular": "~0.803.1",
	"@angular/cli": "~8.3.1",
	"@angular/compiler-cli": "~8.2.3",
	"@angular/language-service": "~8.2.3",
	"@types/express": "^4.17.0",
	"@types/node": "~8.9.4",
	"@types/jasmine": "~3.3.8",
	"@types/jasminewd2": "~2.0.3",
	"codelyzer": "^5.0.0",
	"jasmine-core": "~3.4.0",
	"jasmine-spec-reporter": "~4.2.1",
	"karma": "~4.1.0",
	"karma-chrome-launcher": "~2.2.0",
	"karma-coverage-istanbul-reporter": "~2.0.1",
	"karma-jasmine": "~2.0.1",
	"karma-jasmine-html-reporter": "^1.4.0",
	"protractor": "~5.4.0",
	"ts-loader": "^5.2.0",
	"ts-node": "~7.0.0",
	"tslint": "~5.15.0",
	"typescript": "~3.5.3",
	"webpack-cli": "^3.1.0"
  }
}

Support for Angular 12

Its not working with Angular 12 giving dependency error

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"~12.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^11.0.6" from @ngx-ssr/[email protected]
npm ERR! node_modules/@ngx-ssr/cache
npm ERR!   @ngx-ssr/cache@"*" from the root project

Timeout library sets status code to 0

Timeout library sets the status code of timed out requests to 0. This may cause issues for a number of people because of the following:

• 0 is a boolean value for false and may interfere with pre-existing logic as no other code will return falsy
• There is no clear documentation saying what the status code will be (my first assumption was either a 408 Request Timeout, or 504 Gateway Timeout)

It would be nice if we either used an existing status code, or allow the status code to be set by the user in the forRoot so that they can prevent the use of magic numbers in their application.

Can TransferStateModule and TransferHttpCacheModule be used in conjunction with this module?

First of all thank you very much for creating this module. I was thinking about writing one after going through a few blogs. I am pretty sure this would be very helpful for a lot of developers out there.

I am wondering if we should be using TransferStateModule and TransferHttpCacheModule in conjunction with this module or not.