包含`声明模块'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

对于任何试图解决此问题的 googler，尤其是在 importing 方面Auth，我必须添加一个类型垫片，以便它可以工作。

在我的情况下，导入导致问题的地方graphql/error/GraphQLError和graphql/language/ast（实际上只是导出DocumentNode）。

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

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