question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unable to run server.js when using Apollo Graphql.

See original GitHub issue

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

Issue Analytics

  • State:open
  • Created 4 years ago
  • Comments:10

github_iconTop GitHub Comments

1reaction
mmiedzianyycommented, Jan 13, 2020

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

1reaction
mmiedzianyycommented, Jan 11, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Unable to get Apollo Server to fire up with Express integration
I'm trying to set up an Apollo GraphQL server via apollo-express-server and I'm running into some issues. Invalid number of arguments, expected ...
Read more >
Error handling - Apollo GraphQL Docs
OPERATION_RESOLUTION_FAILURE. The request was parsed successfully and is valid against the server's schema, but the server couldn't resolve which operation to  ...
Read more >
Get started with Apollo Server - Apollo GraphQL Docs
Run an instance of Apollo Server that lets you execute queries against your schema. This tutorial assumes that you are familiar with the...
Read more >
Apollo-server | "Error: Unable to use introspection, make sure ...
I've got Apollo Server properly serving my GraphQL API on http://localhost:4000. However, Apollo Studio is unable to properly see the ...
Read more >
Apollo server: call start() after stop() server not start - Help
Hello all, I'm developing an app using Apollo server express. I can't understand why if I call server.stop() and then server.start() the ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found