0

Setting up the app was easy. I just created it with 'ng new [app name]'. I added angular material. I also added Nestjs's Angular Univeral server through 'ng add @nestjs/ng-universal. I learned that I needed to make sure I wasn't using Angular 10's CLI so I redid everything with Angular 9's ClI and it was working until I created an Angular service. After I created the service, added an HttpClient into that service, and used the service in a component, I started getting errors that crash the app.

npm run dev:ssr

> fullstack-flip8@0.0.0 dev:ssr /Users/jeremy/MEGA/projects/FlipIt/fullstack-flip8
> ng run fullstack-flip8:serve-ssr

****************************************************************************************
This is a simple server for use in testing or debugging Angular applications locally.
It hasn't been reviewed for security issues.

DON'T USE IT FOR PRODUCTION!
****************************************************************************************

chunk {main} main.js, main.js.map (main) 323 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.css, styles.css.map (styles) 84.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 5.39 MB [initial] [rendered]
Date: 2020-07-20T17:37:04.757Z - Hash: 10e58d11f5f9b0ff406f - Time: 16897ms

WARNING in ./node_modules/@nestjs/common/utils/load-package.util.js 8:39-59
Critical dependency: the request of a dependency is an expression

ERROR in ./node_modules/@nestjs/common/cache/cache.providers.js
Module not found: Error: Can't resolve 'cache-manager' in '/Users/jeremy/MEGA/projects/FlipIt/fullstack-flip8/node_modules/@nestjs/common/cache'
Hash: d01fed6a10d4859462d7
Time: 24111ms
Built at: 07/20/2020 11:37:08 AM
      Asset      Size  Chunks                          Chunk Names
    main.js  13.7 MiB    main  [emitted]        [big]  main
main.js.map  14.8 MiB    main  [emitted] [dev]         main
Entrypoint main [big] = main.js main.js.map
chunk {main} main.js, main.js.map (main) 12.7 MiB [entry] [rendered]

WARNING in ./node_modules/@nestjs/core/helpers/optional-require.js 5:39-59
Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/@nestjs/core/helpers/load-adapter.js 8:39-63
Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/mongoose/lib/index.js 11:28-64
Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/@nestjs/common/utils/load-package.util.js 8:39-59
Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/require_optional/index.js 82:18-42
Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/require_optional/index.js 90:20-44
Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/require_optional/index.js 97:35-67
Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/mongodb/lib/operations/connect.js
Module not found: Error: Can't resolve 'mongodb-client-encryption' in '/Users/jeremy/MEGA/projects/FlipIt/fullstack-flip8/node_modules/mongodb/lib/operations'
this.debug is not a function
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! fullstack-flip8@0.0.0 dev:ssr: `ng run fullstack-flip8:serve-ssr`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the fullstack-flip8@0.0.0 dev:ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jeremy/.npm/_logs/2020-07-20T17_37_12_756Z-debug.log

I don't know if it was using a service, HttpClient, or something else.

USE the 'fix' branch. I'll be doing some troubleshooting testing.

Jeremy Scott Peters
  • 377
  • 1
  • 3
  • 15

1 Answers1

0

I was able to get it running on your fix branch by installing a couple packages (see below). The first couple errors I saw were Module not found errors. Not sure why these packages weren't installed or if you are using some libraries that should have installed them?

npm i --save-dev mongoose
npm i --save-dev cache-manager

After installing these I was able to run ng serve without error. npm run start as stated in your package.json. However, I ran into a runtime error after that.

bare.js:20 Uncaught ReferenceError: process is not defined
    at Object../node_modules/cli-color/bare.js (bare.js:20)
    at __webpack_require__ (bootstrap:79)
    at Object../node_modules/cli-color/index.js (index.js:5)
    at __webpack_require__ (bootstrap:79)
    at Object../node_modules/@nestjs/common/services/logger.service.js (logger.service.js:5)
    at __webpack_require__ (bootstrap:79)
    at Object../node_modules/@nestjs/common/decorators/core/set-metadata.decorator.js (set-metadata.decorator.js:3)
    at __webpack_require__ (bootstrap:79)
    at Object../node_modules/@nestjs/common/decorators/core/index.js (index.js:12)
    at __webpack_require__ (bootstrap:79)

After a quick google search I came across this stackoverflow post: Angular 6 - process is not defined when trying to serve application

Applying the following to polyfills.ts seemed to fix the runtime issue. And now everything is running. I am not familiar with this type of setup for Angular CLI. So there may be a better way to fix the process is not defined error?

(window as any).global = window;
global.Buffer = global.Buffer || require('buffer').Buffer;
global.process = require('process');
khollenbeck
  • 16,028
  • 18
  • 66
  • 101
  • Thanks for trying. It is still giving me plenty of errors. I'm giving up. Look at the browser's console or got to the Login or Sign Up page and nothing comes up if you doubt what I am saying. Thanks a lot. I just redid the server part of it and it is working fine now and does what it needs to do. I hope you learned something valuable, Kris. – Jeremy Scott Peters Jul 23 '20 at 18:40