graphql-tag 的 Webpack 加载器未在 Angular 8 中加载

Posted 2023-03-10

【中文标题】graphql-tag 的 Webpack 加载器未在 Angular 8 中加载

【英文标题】：Webpack loader for graphql-tag not loading in Angular 8

【发布时间】：2020-03-07 02:31:09

【问题描述】：

我一直在关注本指南https://www.apollographql.com/docs/angular/recipes/webpack/，但是当我执行 ng serve 时出现此错误：

./src/app/shared/queries.graphql 1:6 中的错误

模块解析失败：意外令牌 (1:6)

目前您可能需要适当的加载程序来处理此文件类型 没有配置加载程序来处理此文件。看 https://webpack.js.org/concepts#loaders

查询供应商名称($value: String) |供应商（过滤器：名称： $价值 ) |名字

此外，当我执行 ng build 时，所有内容都已构建，没有任何错误。

基本上，我要做的是将 .graphql 文件中的查询直接加载到我的打字稿文件中。请参阅this 我发布的与此相关的问题。

如果有一些我忘记添加的信息，请告诉我，我会更新问题。

这是我的 angular.json 文件：

  "$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"
    
  

这是我的 custom-webpack.config.js（在与 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')
        )
    ]
;

和app/shared/queries.graphql：

query supplierByName($value: String) 

    Supplier(filter:  name: $value ) 
        name
    

还有我的 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"

【参考方案1】：

我发现了问题。它在我的 angular.json 文件中。

我只更改了“构建”部分以使用新的构建器 (@angular-builders/custom-webpack:browser)。

“服务”部分还需要不同的构建器（@angular-builders/custom-webpack:dev-server）。

我现在正在运行的最终 angular.json 文件：

    "$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"