在Angular 8中，graphql-tag的Webpack加载器没有加载。[英] Webpack loader for graphql-tag not loading in Angular 8

问题描述

I have been following this guide https://www.apollographql.com/docs/angular/recipes/webpack/ but I am getting this error when I execute ng serve:

ERROR in ./src/app/shared/queries.graphql 1:6

Module parse failed: Unexpected token (1:6)

You may need anappropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

query supplierByName($value: String) { | Supplier(filter: { name: $value }) { | name

Also, when I execute ng build everything is built without any errors.

Basicly what I am trying to do is to load queries from .graphql files directly into my typescript files. See this question I posted related to this.

If there is some info I have forgotten to add please let me know and I will update the question.

this is my angular.json file:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "defaultProject": "app",
  "newProjectRoot": "projects",
  "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./custom-webpack.config.js"
            },
            "outputPath": "www",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              },
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              }
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
              {
                "input": "src/theme/variables.scss"
              },
              {
                "input": "src/global.scss"
              }
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            },
            "ci": {
              "progress": false
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            },
            "ci": {
              "progress": false
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "styles": [ "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css" ],
            "scripts": [],
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              }
            ]
          },
          "configurations": {
            "ci": {
              "progress": false,
              "watch": false
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [ "tsconfig.app.json", "tsconfig.spec.json", "e2e/tsconfig.json" ],
            "exclude": [ "**/node_modules/**" ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "app:serve:production"
            },
            "ci": {
              "devServerTarget": "app:serve:ci"
            }
          }
        },
        "ionic-cordova-build": {
          "builder": "@ionic/angular-toolkit:cordova-build",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            }
          }
        },
        "ionic-cordova-serve": {
          "builder": "@ionic/angular-toolkit:cordova-serve",
          "options": {
            "cordovaBuildTarget": "app:ionic-cordova-build",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "cordovaBuildTarget": "app:ionic-cordova-build:production",
              "devServerTarget": "app:serve:production"
            }
          }
        }
      }
    }
  },
  "cli": {
    "defaultCollection": "@ionic/angular-toolkit"
  },
  "schematics": {
    "@ionic/angular-toolkit:component": {
      "styleext": "scss"
    },
    "@ionic/angular-toolkit:page": {
      "styleext": "scss"
    }
  }
}

this is my custom-webpack.config.js (in same dir as angular.json):

const WebpackNotifierPlugin = require('webpack-notifier');
const path = require('path');
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
    resolve: {
        extensions: [ '.ts', '.tsx', '.js', '.jsx', '.scss', '.gql', '.graphql' ],
        modules: [ path.resolve(__dirname), 'node_modules' ]
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                loader: 'postcss-loader',
                options: {
                    ident: 'postcss',
                    plugins: () => [ require('postcss-short')() ]
                }
            },
            {
                test: /\.(graphql|gql)$/,
                exclude: /node_modules/,
                loader: 'graphql-tag/loader'
            }
        ]
    },
    plugins: [
        new WebpackNotifierPlugin({
            alwaysNotify: true,
            title: 'App Name',
            contentImage: path.join(__dirname, 'image.png')
        })
    ]
};

and app/shared/queries.graphql:

query supplierByName($value: String) {

    Supplier(filter: { name: $value }) {
        name
    }
}

and my package.json:

{
  "name": "UI",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.1.2",
    "@angular/cdk": "~8.1.4",
    "@angular/common": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/core": "~8.1.2",
    "@angular/forms": "~8.1.2",
    "@angular/material": "~8.1.4",
    "@angular/platform-browser": "~8.1.2",
    "@angular/platform-browser-dynamic": "~8.1.2",
    "@angular/router": "~8.1.2",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.7.1",
    "@ionic/storage": "^2.2.0",
    "ag-grid-angular": "^21.2.1",
    "ag-grid-community": "^21.2.1",
    "ag-grid-enterprise": "^21.2.1",
    "apollo-angular": "^1.7.0",
    "apollo-angular-link-http": "^1.6.0",
    "apollo-cache-inmemory": "^1.3.2",
    "apollo-client": "^2.6.0",
    "apollo-link": "^1.2.11",
    "apollo-link-context": "^1.0.19",
    "apollo-link-http": "^1.5.16",
    "aws-amplify": "^1.1.38",
    "aws-amplify-angular": "^3.0.13",
    "core-js": "^2.5.4",
    "graphql": "^14.3.1",
    "graphql-tag": "^2.10.0",
    "postcss-short": "^5.0.0",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "webpack-notifier": "^1.8.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^8.2.0",
    "@angular-devkit/architect": "~0.801.2",
    "@angular-devkit/build-angular": "~0.801.2",
    "@angular-devkit/core": "~8.1.2",
    "@angular-devkit/schematics": "~8.1.2",
    "@angular/cli": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/compiler-cli": "~8.1.2",
    "@angular/language-service": "~8.1.2",
    "@ionic/angular-toolkit": "~2.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",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  },
  "description": "An Ionic project"
}

推荐答案

I found the problem. It was in my angular.json file.

I had only changed the "build" part to use the new builder (@angular-builders/custom-webpack:browser).

The "serve" part also needed a different builder (@angular-builders/custom-webpack:dev-server).

My final angular.json file that is now working:

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "defaultProject": "app",
    "newProjectRoot": "projects",
    "projects": {
        "app": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "prefix": "app",
            "schematics": {},
            "architect": {
                "build": {
                    "builder": "@angular-builders/custom-webpack:browser",
                    "options": {
                        "customWebpackConfig": {
                            "path": "./custom-webpack.config.js"
                        },
                        "outputPath": "www",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "tsconfig.app.json",
                        "assets": [
                            {
                                "glob": "**/*",
                                "input": "src/assets",
                                "output": "assets"
                            },
                            {
                                "glob": "**/*.svg",
                                "input": "node_modules/ionicons/dist/ionicons/svg",
                                "output": "./svg"
                            }
                        ],
                        "styles": [
                            "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
                            {
                                "input": "src/theme/variables.scss"
                            },
                            {
                                "input": "src/global.scss"
                            }
                        ],
                        "scripts": []
                    },
                    "configurations": {
                        "production": {
                            "fileReplacements": [
                                {
                                    "replace": "src/environments/environment.ts",
                                    "with": "src/environments/environment.prod.ts"
                                }
                            ],
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": false,
                            "extractCss": true,
                            "namedChunks": false,
                            "aot": true,
                            "extractLicenses": true,
                            "vendorChunk": false,
                            "buildOptimizer": true,
                            "budgets": [
                                {
                                    "type": "initial",
                                    "maximumWarning": "2mb",
                                    "maximumError": "5mb"
                                }
                            ]
                        },
                        "ci": {
                            "progress": false
                        }
                    }
                },
                "serve": {
                    "builder": "@angular-builders/custom-webpack:dev-server",
                    "options": {
                        "browserTarget": "app:build",
                        "customWebpackConfig": {
                            "path": "./custom-webpack.config.js"
                        }
                    },
                    "configurations": {
                        "production": {
                            "browserTarget": "app:build:production"
                        },
                        "ci": {
                            "progress": false
                        }
                    }
                },
                "extract-i18n": {
                    "builder": "@angular-devkit/build-angular:extract-i18n",
                    "options": {
                        "browserTarget": "app:build"
                    }
                },
                "test": {
                    "builder": "@angular-devkit/build-angular:karma",
                    "options": {
                        "main": "src/test.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "tsconfig.spec.json",
                        "karmaConfig": "karma.conf.js",
                        "styles": [ "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css" ],
                        "scripts": [],
                        "assets": [
                            {
                                "glob": "**/*",
                                "input": "src/assets",
                                "output": "/assets"
                            }
                        ]
                    },
                    "configurations": {
                        "ci": {
                            "progress": false,
                            "watch": false
                        }
                    }
                },
                "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                        "tsConfig": [ "tsconfig.app.json", "tsconfig.spec.json", "e2e/tsconfig.json" ],
                        "exclude": [ "**/node_modules/**" ]
                    }
                },
                "e2e": {
                    "builder": "@angular-devkit/build-angular:protractor",
                    "options": {
                        "protractorConfig": "e2e/protractor.conf.js",
                        "devServerTarget": "app:serve"
                    },
                    "configurations": {
                        "production": {
                            "devServerTarget": "app:serve:production"
                        },
                        "ci": {
                            "devServerTarget": "app:serve:ci"
                        }
                    }
                },
                "ionic-cordova-build": {
                    "builder": "@ionic/angular-toolkit:cordova-build",
                    "options": {
                        "browserTarget": "app:build"
                    },
                    "configurations": {
                        "production": {
                            "browserTarget": "app:build:production"
                        }
                    }
                },
                "ionic-cordova-serve": {
                    "builder": "@ionic/angular-toolkit:cordova-serve",
                    "options": {
                        "cordovaBuildTarget": "app:ionic-cordova-build",
                        "devServerTarget": "app:serve"
                    },
                    "configurations": {
                        "production": {
                            "cordovaBuildTarget": "app:ionic-cordova-build:production",
                            "devServerTarget": "app:serve:production"
                        }
                    }
                }
            }
        }
    },
    "cli": {
        "defaultCollection": "@ionic/angular-toolkit"
    },
    "schematics": {
        "@ionic/angular-toolkit:component": {
            "styleext": "scss"
        },
        "@ionic/angular-toolkit:page": {
            "styleext": "scss"
        }
    }
}