Unable to run server.js when using Apollo Graphql.

I’m submitting a…

[x] Bug report
[ ] Feature request
[ ] Documentation issue or request

In package

[ ] @ng-toolkit/init
[ ] @ng-toolkit/serverless
[x] @ng-toolkit/universal
[ ] @ng-toolkit/pwa
[ ] @ng-toolkit/firebug

Current behavior

I’ve installed “@ng-toolkit/universal”: "^7.1.2 via ng add command. My project is using Apollo Graphql. After fixing many issues and finally building application and the server I’ve encounter new error I can’t fix.

Error: Network error: at new ApolloError (DIR\dist\server.js:176296:28) at PROJECT-DIR\dist\server.js:177478:40 at PROJECT-DIR\dist\server.js:177790:25 at Set.forEach (<anonymous>) at PROJECT-DIR\dist\server.js:177788:32 at Map.forEach (<anonymous>) at QueryManager.module.exports.QueryManager.broadcastQueries (PROJECT-DIR\dist\server.js:177786:22) at PROJECT-DIR\dist\server.js:177392:47 at ZoneDelegate.module.exports.ZoneDelegate.invoke (PROJECT-DIR\dist\server.js:534:26) at Object.onInvoke (DIR\dist\dist\server.js:27410:33)

Expected behavior

Install ng-toolkit/universal and run the SSR.

Minimal reproduction of the problem with instructions

1. run ng add ng add @ng-toolkit/universal@7.1.2
2. Update paths for TS imports.
3. Add this code to webpack resolve: { extensions: ['.ts', '.mjs', '.gql', '.graphql', ".webpack.js", ".web.js", '.js'], plugins: [new TsconfigPathsPlugin({ configFile: "tsconfig.json" })] }
4. Build project, server, compile server and finally run it locally.
5. Encounter error mentioned above.

Example repository

const path = require('path');
const webpack = require('webpack');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  mode: 'none',
  entry: {
    // This is our Express server for Dynamic universal
    server: './server.ts',
	  prerender: './prerender.ts'
  },
  target: 'node',
  resolve: {
    extensions: ['.ts', '.mjs', '.gql', '.graphql', ".webpack.js", ".web.js", '.js'],
    plugins: [new TsconfigPathsPlugin({ configFile: "tsconfig.json" })]
  },
  optimization: {
    minimize: false
  },
  output: {
	libraryTarget: 'commonjs2',
    // 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'),
      {}
    )
  ]
};

  "name": "project-name",
  "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 local.js",
    "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
    "build:client-and-server-bundles": "ng build --prod && ng run project-name:server:production",
    "server": "node local.js",
    "build:prod": "npm run build:ssr",
    "serve:prerender": "node static.js",
    "build:prerender": "npm run build:prod && node dist/prerender.js",
    "project-lib": "ng build project-lib"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.0.0",
    "@angular/common": "~8.0.0",
    "@angular/compiler": "~8.0.0",
    "@angular/core": "~8.0.0",
    "@angular/forms": "~8.0.0",
    "@angular/platform-browser": "~8.0.0",
    "@angular/platform-browser-dynamic": "~8.0.0",
    "@angular/platform-server": "~8.0.0",
    "@angular/router": "~8.0.0",
    "@angular/pwa": "^0.803.4",
    "@angular/service-worker": "~8.0.0",
    "@ng-toolkit/universal": "^7.1.2",
    "@nguniversal/common": "0.0.0",
    "@nguniversal/express-engine": "0.0.0",
    "@nguniversal/module-map-ngfactory-loader": "0.0.0",
    "@ng-select/ng-select": "^3.0.6",
    "apollo-angular": "^1.6.0",
    "apollo-angular-link-http": "^1.8.0",
    "apollo-cache-inmemory": "^1.6.2",
    "apollo-client": "^2.6.3",
    "apollo-link": "^1.2.12",
    "apollo-link-error": "^1.1.11",
    "date-fns": "^1.30.1",
    "decko": "^1.2.0",
    "graphql": "^14.4.2",
    "graphql-tag": "^2.10.1",
    "headroom.js": "^0.10.3",
    "jquery": "^3.4.1",
    "ng2-datepicker": "^3.1.1",
    "ngx-cookie-service": "^2.2.0",
    "ngx-facebook": "^2.4.0",
    "ngx-hm-carousel": "^1.6.5-bata.1",
    "ngx-slick-carousel": "^0.4.4",
    "ngx-take-until-destroy": "^5.4.0",
    "ngx-textarea-autosize": "^2.0.3",
    "slick-carousel": "^1.8.1",
    "domino": "^2.1.3",
    "express": "^4.15.2",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.801.3",
    "@angular-devkit/build-ng-packagr": "~0.801.3",
    "@angular/cli": "~8.0.1",
    "@angular/compiler-cli": "~8.0.0",
    "@angular/language-service": "~8.0.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "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",
    "ng-packagr": "^5.1.0",
    "protractor": "~5.4.0",
    "ts-loader": "^5.2.0",
    "ts-node": "~7.0.0",
    "tsconfig-paths-webpack-plugin": "^3.2.0",
    "tsickle": "^0.35.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3",
    "webpack-bundle-analyzer": "^3.5.2",
    "webpack-cli": "^3.1.0"
  }
}

Environment

Angular version: 8.0.0
- Node version: 10.15.00
- Platform: Mac, Windows

[mmiedzianyy]

Hello, I’ve created the repo for a project based on your sample.

[mmiedzianyy]

Good to know, thanks!

Yeah. Both local and deployment works just fine with graphql. I’ll share the repo under this post on monday. There is separate graphql module created with extra options added.