innovic-io / angular-nestjs-rendering Goto Github PK

View Code? Open in Web Editor NEW

104.0 13.0 14.0 357 KB

Angular 5+ server side rendering using NestJS :star: :fire: :boom:

License: MIT License

HTML 6.02% TypeScript 79.67% CSS 0.40% JavaScript 13.91%

nestjs angular angular-universal api

angular-nestjs-rendering's Introduction

Angular NestJS Universal ( Server Rendering )

src/client <-- Angular 5+
src/server <-- NestJS
src/shared <-- Shared between apps

INNOVIC doo
Software consulting company for building full stack solutions.
Proficient in: NodeJS, TypeScript, Angular, MongoDB... <any>.js library :)
You have project for us? [email protected]

Included

REST API
WebSockets

Install

npm install

Development

Development port is on: 4200 ( inherited from angular-cli )

in development, every controller ( route ) from NestJS must be mapped in proxy.conf.json

npm start

Don't forget to Lint and Prettify your code from time to time:

npm run client:lint
npm run server:lint

npm run prettify

Production

Production port is specified in .env ( default to 5400 )

npm run build:universal

# test production

npm run serve:universal

Angular CLI generator

To generate component|service|pipe|module with Angular CLI use:

Add new component in Contact Module

ng generate component contact/InfoComponent --module=contact/contact.module.ts

Static asset directory

src/client/assets

angular-nestjs-rendering's People

Contributors

Stargazers

Watchers

Forkers

showroom101 retsam69 interneuron heyplusyou yerkon thevexx doocaat sakibrahmanchy anglesen1120 leonvay anujm4467 phiphop tsdk best-of-nestjs

angular-nestjs-rendering's Issues

Dealing with huge number of assets files

I'm writing an app that uses a huge number of static assets, i.e. .png images. There is almost 6,000 of them.
These assets should be most desireably served from the server only.
When I run npm run build:universal it creates a /dist folder with compiled app, however the images, which originally reside in /src/client/assets/myimages are copied to both /dist/client/assets/myimages and /dist/server/assets/myimages.
This is a problem because there's about 860MB of images, so now, I have three copies of these images, which amounts to 2.6GB of disk space.
Also, I can't even run npm run build:universal on my production server, because at about 4,500 images it shoots an error:

An error occured during the build:
Error: EMFILE: too many open files, open '/home/<mysite>/<myapp>/dist/client/assets/<myimages>/image-4431.png'
EMFILE: too many open files, open '/home/<mysite>/<myapp>/dist/client/assets/<myimages>/image-4431.png'
Error: EMFILE: too many open files, open '/home/<mysite>/<myapp>/dist/client/assets/<myimages>/image-4431.png'

So, now, my questions:

Is it better if I keep these images in /src/server folder and somehow serve them as static files?
1a. How do I serve images as static files from server portion of app, and how do I load them from front-end Angular portion of the app?
Is it better if I keep these images in src/shared folder
2a. How do I load them from shared folder in the Angular portion of the app?
Would any of these strategies reduce the footprint of the compiled app? I.e. would I have two instead of three copies of the image files?
Finally, can the compiler/webpack be told to not consider the image files in the compiling process, and just let me manually copy them at some known destination, so the compiled app would know where to find them?

Thanks.

no longer working with recent versions of nest

Could you update this to the latest version of nest/angular?

Warnings during build:universal process

WARNING in ./node_modules/optional/optional.js
6:11-26 Critical dependency: the request of a dependency is an expression
 @ ./node_modules/optional/optional.js
 @ ./node_modules/@nestjs/core/nest-factory.js
 @ ./node_modules/@nestjs/core/index.js
 @ ./src/server/main.ts

About error ocurred

Good morning my friends

About error ocurred

I'm testing this project and the following error is being returned

$ npm run start
Debugger attached.

> [email protected] start /home/marcio/dados/acid-workflow/private/github/Innovic-io_angular-nestjs-rendering
> concurrently --kill-others "npm run server:watch" "ng serve --aot --progress=false --proxy-config proxy.conf.json"

Debugger attached.
[1] Debugger attached.
[0] Debugger attached.
[0] 
[0] > [email protected] server:watch /home/marcio/dados/acid-workflow/private/github/Innovic-io_angular-nestjs-rendering
[0] > nodemon
[0] 
[0] Debugger attached.
[0] [nodemon] 1.19.4
[0] [nodemon] to restart at any time, enter `rs`
[0] [nodemon] watching dir(s): src/server/**/*
[0] [nodemon] watching extensions: ts
[0] [nodemon] starting `node ./index`
[0] Debugger attached.
[0] 
[0] /home/marcio/dados/acid-workflow/private/github/Innovic-io_angular-nestjs-rendering/node_modules/ts-node/src/index.ts:307
[0]         throw new TSError(formatDiagnostics(diagnosticList, cwd, ts, lineOffset))
[0]               ^
[0] TSError: ⨯ Unable to compile TypeScript
[0] src/server/main.ts (54,14): Property 'engine' does not exist on type 'Express'. (2339)
[0] src/server/main.ts (72,14): Property 'set' does not exist on type 'Express'. (2339)
[0] src/server/main.ts (73,14): Property 'set' does not exist on type 'Express'. (2339)
[0] src/server/main.ts (76,14): Property 'get' does not exist on type 'Express'. (2339)
[0]     at getOutput (/home/marcio/dados/acid-workflow/private/github/Innovic-io_angular-nestjs-rendering/node_modules/ts-node/src/index.ts:307:15)
[0]     at /home/marcio/dados/acid-workflow/private/github/Innovic-io_angular-nestjs-rendering/node_modules/ts-node/src/index.ts:336:16
[0]     at Object.compile (/home/marcio/dados/acid-workflow/private/github/Innovic-io_angular-nestjs-rendering/node_modules/ts-node/src/index.ts:496:11)
[0]     at Module.m._compile (/home/marcio/dados/acid-workflow/private/github/Innovic-io_angular-nestjs-rendering/node_modules/ts-node/src/index.ts:392:43)
[0]     at Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
[0]     at Object.require.extensions.<computed> [as .ts] (/home/marcio/dados/acid-workflow/private/github/Innovic-io_angular-nestjs-rendering/node_modules/ts-node/src/index.ts:395:12)
[0]     at Module.load (internal/modules/cjs/loader.js:950:32)
[0]     at Function.Module._load (internal/modules/cjs/loader.js:790:12)
[0]     at Module.require (internal/modules/cjs/loader.js:974:19)
[0]     at require (internal/modules/cjs/helpers.js:93:18)
[0] Waiting for the debugger to disconnect...
[0] [nodemon] app crashed - waiting for file changes before starting...
[1] ** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
[1] Debugger attached.
[1] Date: 2022-01-21T13:42:48.821Z
[1] Hash: 89482f8d88daf5590b2d
[1] Time: 8707ms
[1] chunk {contact.module} contact.module.chunk.js () 10.9 kB  [rendered]
[1] chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
[1] chunk {main} main.bundle.js (main) 38.9 kB [initial] [rendered]
[1] chunk {polyfills} polyfills.bundle.js (polyfills) 595 kB [initial] [rendered]
[1] chunk {styles} styles.bundle.js (styles) 41.8 kB [initial] [rendered]
[1] chunk {vendor} vendor.bundle.js (vendor) 6.02 MB [initial] [rendered]
[1] 
[1] webpack: Compiled successfully.
[1] 
[1] webpack: Compiled successfully.
[1] [HPM] Error occurred while trying to proxy request /api/hello from localhost:4200 to http://localhost:5400 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

Thanks in advance to everyone who can contribute.

Update to angular 6?

Any plans to update this project to use angular 6?