升级@nestjs/graphql至10.x.x后GraphQL Playground无法加载及报错

我使用@nestjs/graphql作为Angular前端的后端服务，将@nestjs/graphql从7.x.x版本升级到10.x.x后，GraphQL Playground无法正常加载，浏览器控制台报BrowserModule has already been loaded错误，尝试更换多个10.x.x版本问题依旧。

后端配置（app.module.ts） #

GraphQLModule.forRoot({
    driver: ApolloDriver,
    typeDefs: [my custom typedefs],
    resolvers: [my custom resolvers],                        
    introspection: true,
    installSubscriptionHandlers: true,
    dataSources: () => {
        return {
            ...
        } as DataSources<RESTDataSource>;
    }
})

package.json依赖 #

"dependencies": {
    "@apollo/gateway": "^2.0.0",
    "@azure/storage-blob": "^12.5.0",
    "@nestjs/apollo": "^10.0.19",
    "@nestjs/axios": "^0.1.0",
    "@nestjs/common": "^9.0.0",
    "@nestjs/config": "^2.0.0",
    "@nestjs/core": "^9.0.0",
    "@nestjs/graphql": "^10.0.21",
    "@nestjs/platform-express": "^9.0.1",
    "@nestjs/serve-static": "^2.1.4",
    "apollo-datasource-rest": "^3.4.0",
    "apollo-server": "^3.10.0",
    "applicationinsights": "^2.3.1",
    "axios": "^0.21.1",
    "axios-mock-adapter": "^1.20.0",
    "axios-request-throttle": "^1.0.0",
    "azure-devops-node-api": "^11.1.1",
    "execution-time": "^1.4.1",
    "graphql": "^16.5.0",
    "graphql-parse-resolve-info": "^4.12.0",
    "graphql-request": "^3.4.0",
    "limiter": "^2.1.0",
    "nest-neo4j": "^0.1.5",
    "pluralize": "^8.0.0",
    "reflect-metadata": "^0.1.13",
    "rimraf": "^3.0.2",
    "rxjs": "^7.1.0",
    "tedious": "^11.4.0",
    "ts-morph": "^15.1.0",
    "win-node-env": "^0.4.0",
    "winston": "^3.7.2",
    "winston-azure-application-insights": "^4.0.0"
  }

浏览器控制台错误日志 #

core.js:6498 ERROR Error: Uncaught (in promise): Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.
Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.
    at new BrowserModule (platform-browser.js:1527:1)
    at Object.BrowserModule_Factory [as factory] (platform-browser.js:1549:58)
    at R3Injector.hydrate (core.js:11457:1)
    at R3Injector.get (core.js:11276:1)
    at core.js:11314:1
    at Set.forEach (<anonymous>)
    at R3Injector._resolveInjectorDefTypes (core.js:11314:1)
    at new NgModuleRef$1 (core.js:25345:1)
    at NgModuleFactory$1.create (core.js:25399:1)
    at MapSubscriber.project (router.js:3680:1)
    at resolvePromise (zone.js:1211:1)
    at resolvePromise (zone.js:1165:1)
    at zone.js:1278:1
    at _ZoneDelegate.invokeTask (zone.js:406:1)
    at Object.onInvokeTask (core.js:28679:1)
    at _ZoneDelegate.invokeTask (zone.js:405:1)
    at Zone.runTask (zone.js:178:1)
    at drainMicroTaskQueue (zone.js:585:1)

可能的解决步骤 #

1. 检查Angular模块导入规范

   • 确保仅根模块（通常为AppModule）导入BrowserModule，所有懒加载模块仅导入CommonModule，彻底避免BrowserModule重复加载。

2. 自定义GraphQL Playground路径

   • 升级后的Apollo Driver可能与@nestjs/serve-static的静态资源路径冲突，可在GraphQL配置中指定Playground的独立路径：

     GraphQLModule.forRoot({
         // 保留原有配置
         playground: {
             endpoint: '/graphql-playground' // 设置非冲突的自定义路径
         }
     })
     

3. 隔离静态资源服务冲突

   • 同时使用@nestjs/serve-static和apollo-server可能导致资源加载冲突，可临时禁用内置Playground，改用外部GraphQL调试工具（如Altair GraphQL Client），或调整serve-static的配置规则，排除GraphQL相关路径。

4. 清理并重装依赖

   • 删除node_modules、package-lock.json文件，执行npm install重新安装依赖，确保所有依赖版本完全匹配，消除旧版本残留引发的冲突。

5. 对齐@nestjs/apollo与@nestjs/graphql版本

   • 确保@nestjs/apollo和@nestjs/graphql版本严格兼容，当前依赖中两者版本存在小差异，建议升级至同一大版本下的最新稳定版，避免版本不匹配导致的隐性问题。

内容的提问来源于stack exchange，提问作者maddy