JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 30
  • Score
    100M100P100Q73423F
  • License MIT

A Nx Plugin to simplify and improve NestJS and Angular Universal integration and development.

Package Exports

  • @nxarch/ng-nest
  • @nxarch/ng-nest/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nxarch/ng-nest) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

A Nx plugin to integrate a NestJS server with a server side rendered Angular application.

From a conceptual point of view the NestJS server incorporates an Angular Universal application that will be reached on specified routes.
The server uses the AngularUniversalModule provided by @nxarch/nest-nguniversal. The setup for both applications can be tedious and error-prone. This library takes care of the entire setup and provides an executor for a good DX.

  NxArch on npm  

Prerequisites

  • You need a NestJS application and an Angular application in the same workspace.
  • Nx Version >= 14.0.0

Installation

npm i @nxarch/ng-nest
yarn add @nxarch/ng-nest

Setup

Use the provided generator to setup all files. If you don't have an Angular and a NestJS app refer to this part on how to generate these applications.

yarn nx generate @nxarch/ng-nest:init --ssrApp=my-angular-project --serverApp=my-nestjs-project

App Start

Use the added script in the package.json.

yarn dev:server

Setup Nx apps (if not already setup)

Use this command to quickly scaffold a new workspace with an Angular and a NestJS application.

npx create-nx-workspace --preset angular-nest

Setup an Angular app and a NestJS app in an existing Nx workspace.

yarn add --dev @nrwl/angular @nrwl/nest
yarn nx generate @nrwl/angular:app
yarn nx generate @nrwl/nest:app

Configuration

You can configure the plugin with these properties.
Use them in server projects project.json: targets -> serve-ssr -> options

Property Type Description
browserTarget string The target name of your browser target (already configured after setup)
ssrTarget string The target name of your ssr target (already configured after setup)
serveTarget string The target name of your server target (already configured after setup)
host string? Browsersync host (default: localhost)
port number? The browsersync port (default: 4200)
ssl boolean? Enable ssl on browsersync (default: false)
sslKey string? SSL key to use if ssl is enabled
sslCert string? SSL cert to use if ssl is enabled
proxyConfig string? A possible proxy config for browsersync
openBrowser boolean? Enable if a browser window should open on app startup (default: true)
browsers string[]? Specify which browsers to open on app startup (default is your default system browser) (e.g. ["Google Chrome"])
serverAutoSync boolean? You can disable server auto sync if you want to take care of reloading browsersync after server changes. User triggerReload() function to trigger browsersync reloads. (default: true)
disableBrowserSync boolean? Disable browsersync entirely (default: false)

For configuring the AngularUniversalModule refer to @nxarch/nest-nguniversal.

Notice

When using Angulars http client make sure to set an absolute url. Or use an Interceptor to prepend a base path on the server side.

// don't
hello$ = this.http.get<Message>('/api/hello');
// do
hello$ = this.http.get<Message>('http://localhost:4200/api/hello');