I am getting error in the console while trying to run my angular with npm run start-ssr

Question

I am trying to include angular Universal in my angular 7 app. I worked to the point of running with npm run start-ssr , but I am getting the below error in my node console.

Cannot find name require. Do you need to install type definitions for node? Try npm i @types/node` and then add node to the types field in your tsconfig

and

Cannot find name 'process'. Do you need to install type definitions for node? Try npm i @types/node and then add node to the types field in your tsconfig

and

src/server.ts(26,1): error TS2304: Cannot find name 'global'

I have in my app webpack.server.config.ts with the code

const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'none',
  entry: {
    server: './server.ts',
  },
  target: 'node',
  resolve: { extensions: ['.ts', '.js'] },
  optimization: {
    minimize: false
  },
  output: {
    // Puts the output at the root of the dist folder
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      { test: /\.ts$/, loader: 'ts-loader' },
      {
        // Mark files inside `@angular/core` as using SystemJS style dynamic imports.
        // Removing this will cause deprecation warnings to appear.
        test: /(\\|\/)@angular(\\|\/)core(\\|\/).+\.js$/,
        parser: { system: true },
      },
    ]
  },
  plugins: [
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?angular(\\|\/)core(.+)?/,
      path.join(__dirname, 'src'), // location of your src
      {} // a map of your routes
    ),
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?express(\\|\/)(.+)?/,
      path.join(__dirname, 'src'),
      {}
    )
  ]
}

In my tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

Answer 1

Have you installed @types/node as it says in the error message? If not:

1. Run npm i @types/node

2. Then go to ./app/src/tsconfig.server.json

   "compilerOptions": { "types": [ "node" ] },

3. Restart npm run start-ssr command.