包含`declare module 'graphql/error/GraphQLError' 的声明（.d.ts）文件；在 Angular 项目中的 index.d.ts 中

Question

我在一个角度项目中使用放大。当我运行命令 ng serve 时出现此错误。

Error: node_modules/@aws-amplify/api-graphql/lib-esm/types/index.d.ts:1:30 - error TS7016: Could not find a declaration file for module 'graphql/error/GraphQLError'. 'C:/Users/Ruwani Indrachapa/Documents/profileApp/profileApp1/node_modules/graphql/error/GraphQLError.js' implicitly has an 'any' type.
 Try `npm install @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql/error/GraphQLError';`

1 import { GraphQLError } from 'graphql/error/GraphQLError';
                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@aws-amplify/api-graphql/lib-esm/types/index.d.ts:2:30 - error TS7016: Could not find a declaration file for module 'graphql/language/ast'. 'C:/Users/Ruwani Indrachapa/Documents/profileApp/profileApp1/node_modules/graphql/language/ast.js' implicitly has an 'any' type.
 Try `npm install @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql/language/ast';`

2 import { DocumentNode } from 'graphql/language/ast';

所以我在 src 中创建了一个 index.d.ts 文件并将这一行添加到 index.d.ts

declare module 'graphql/language/ast' { export type DocumentNode = any }

之后我在控制台中收到此错误

Error: node_modules/@aws-amplify/api-graphql/lib-esm/types/index.d.ts:1:30 - error TS7016: Could not find a declaration file for module 'graphql/error/GraphQLError'. 'C:/Users/Ruwani Indrachapa/Documents/profileApp/profileApp1/node_modules/graphql/error/GraphQLError.js' implicitly has an 'any' type.
  Try `npm install @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql/error/GraphQLError';`

1 import { GraphQLError } from 'graphql/error/GraphQLError';

需要将declare module 'graphql/error/GraphQLError 这一行放在单独的文件中，或者我可以在 src 中使用 index.d.ts 吗？ 我试过npm i graphql。 在那个浏览器控制台向我显示这个错误之后

core.js:5973 ERROR TypeError: Cannot read property 'viewContainerRef' of undefined
    at AuthenticatorComponent.push.XRHW.AuthenticatorComponent.loadComponent (authenticator.factory.js:47)
    at AuthenticatorComponent.push.XRHW.AuthenticatorComponent.ngOnInit (authenticator.factory.js:31)
    at callHook (core.js:4776)
    at callHooks (core.js:4746)
    at executeInitAndCheckHooks (core.js:4698)
    at refreshView (core.js:9153)
    at refreshComponent (core.js:10291)
    at refreshChildComponents (core.js:8935)
    at refreshView (core.js:9188)
    at refreshEmbeddedViews (core.js:10245)

帮我解决这个问题。

Answer 1

我可以解决这个问题的唯一方法是安装 graphql 作为开发依赖项

npm install graphql --save-dev

当时graphql的版本是15.4.0

Answer 2

对我来说，这是我导入 DataStore 的方式。我复制了文档所做的并将其错误地导入，如下所示：

import { DataStore } from  'aws-amplify';

在我将导入更改为以下内容后，错误消失了：

import { DataStore } from  '@aws-amplify/datastore';

文档：https://docs.amplify.aws/lib/datastore/examples/q/platform/js

Answer 3

对于任何试图解决这个问题的 google 人，尤其是在导入 Auth 时，我必须添加一个类型填充程序以便它可以工作。

在我的例子中，导致graphql/error/GraphQLError 和graphql/language/ast 问题的导入（实际上只是导出DocumentNode）。

我最终创建了一个graphql.shim.d.ts 文件并将其添加到我的interfaces 目录中——该目录位于我的tsconfig.json 配置中的compilerOptions.path 数组中（但实际上，该数组下的任何目录/文件都应该有效） ：

declare module 'graphql/error/GraphQLError' {
    // tslint:disable-next-line:no-empty-interface
    export interface GraphQLError{}
}

declare module 'graphql/language/ast' {
    // tslint:disable-next-line:no-empty-interface
    export interface DocumentNode{}
}

Answer 4

错误：node_modules/@aws-amplify/api-graphql/lib-esm/types/index.d.ts:1:30 - 错误 TS7016：找不到模块“graphql/error/GraphQLError”的声明文件. 'xxx/node_modules/graphql/error/GraphQLError.js' 隐含了一个 'any' 类型。如果存在，请尝试 npm install @types/graphql 或添加包含声明模块'graphql/error/GraphQLError'的新声明（.d.ts）文件； 1 从 'graphql/error/GraphQLError' 导入 { GraphQLError }； ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

只需执行以下操作即可解决您的角度错误

在 src 下添加 index.d.ts ：

  declare module 'graphql/language/ast' { export type DocumentNode = any }
  declare module 'graphql/error/GraphQLError' { export type GraphQLError = any }