i'm using amplify in an angular project. when I run command ng serve I got this error.
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';
so I created a index.d.ts file in src and I added this line in to index.d.ts
declare module 'graphql/language/ast' { export type DocumentNode = any }
after that I got this error in the console
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';
need to put declare module 'graphql/error/GraphQLError
this line in a separate file or can I use the index.d.ts in src?
i tried npm i graphql
.
after that browser console showing me this error
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)
help me to fix this.
We know that TypeScript has default keywords, variables, and functions to implement the application with a more sophisticated nature. In that declare module has defined and executed with their own scopes and not across the global scope because it can be used with the inner side and not across the outside of the module.
Basically, the declare module will be saved with the .d.ts format; the rest of the files are in the .ts format only. We can’t initialise the variable values on the declared module inside blocks.
We can denote the path by using “./” these operator denotes the file path which has to be imported with the current script. Basically, the declare module will be saved with the .d.ts format; the rest of the files are in the .ts format only. We can’t initialise the variable values on the declared module inside blocks.
Basically, declare module is one of the modules, and it is a block for declaring the ambient set of modules and is also being called and used it for both compile and runtime.
The only way I could solve this was by installing graphql
as a dev dependency
npm install graphql --save-dev
At the time the version of graphql
was 15.4.0
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With