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

Question

我在 angular 项目中使用放大。 当我运行命令 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

当时15.4.0的版本是graphql

Answer 2

对于任何试图解决这个问题的谷歌用户，尤其是在导入Auth时，我必须添加一个类型 shim 才能正常工作。

在我的情况下，导致出现问题的导入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 3

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

import { DataStore } from  'aws-amplify';

将导入更改为此错误后，该错误消失了：

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

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

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 安装 @types/graphql 或添加包含声明模块“graphql/error/GraphQLError”的新声明 (.d.ts) 文件； 1 从 'graphql/error/GraphQLError' 导入 { GraphQLError }； ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

只需执行以下操作即可解决 angular 中的错误

在 src 下添加 index.d.ts：

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

Answer 5

刚来这里补充一下，我必须创建一个文件 /src/ modulename .d.ts ，其中包含“declare module ' modulename '; 在其中。我不知道文件名是否需要与 modulename 匹配，但它对我有用这边走。

我花了一点时间弄清楚 go 需要这个文件的确切位置，所以我想我会在这里发布，以防它帮助其他人。