Unable to run server.js when using Apollo Graphql.
See original GitHub issueI’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
- run
ng add ng add @ng-toolkit/universal@7.1.2
- Update paths for TS imports.
- Add this code to webpack
resolve: { extensions: ['.ts', '.mjs', '.gql', '.graphql', ".webpack.js", ".web.js", '.js'], plugins: [new TsconfigPathsPlugin({ configFile: "tsconfig.json" })] }
- Build project, server, compile server and finally run it locally.
- 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:
- Created 4 years ago
- Comments:10
Top GitHub Comments
Hello, I’ve created the repo for a project based on your sample.
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.