描述错误
我们正在尝试通过将 aws-amplify 包重构为它的模块化组件来减小包的大小。
一切正常,直到我们在最后一步删除了 aws-amplify
包并添加了 @aws-amplify/api-graphql
包。
复制 为了减少巨大的包大小,我们正在重构为从 aws-amplify 包中进行模块化导入。 作为原始依赖,我们有:
"aws-appsync": "^4.0.1",
"aws-amplify": "^3.3.18",
我可以将其重构为:
"@aws-amplify/analytics": "^3.2.5",
"@aws-amplify/api": "^3.2.24",
"@aws-amplify/auth": "^3.3.3",
"@aws-amplify/storage": "^3.3.24",
当删除包 aws-amplify
并将其替换为:@aws-amplify/api-graphql
作为 API 调用的模块化依赖项时,API 服务中的以下导入签名发生了变化:
import API, { graphqlOperation, GraphQLResult } from "aws-amplify";
到
import API, { graphqlOperation, GraphQLResult } from "@aws-amplify/api-graphql";
预期行为 angular 应用程序继续工作
代码片段
"dependencies": {
"@angular/animations": "^10.1.0",
"@angular/cdk": "^10.2.7",
"@angular/common": "^10.1.0",
"@angular/compiler": "^10.1.0",
"@angular/core": "^10.1.0",
"@angular/forms": "^10.1.0",
"@angular/material": "^10.2.7",
"@angular/platform-browser": "^10.1.0",
"@angular/platform-browser-dynamic": "^10.1.0",
"@angular/router": "^10.1.0",
"@angular/service-worker": "^10.1.0",
"@aws-amplify/analytics": "^3.2.5",
"@aws-amplify/api": "^3.2.24",
"@aws-amplify/api-graphql": "^1.2.24",
"@aws-amplify/auth": "^3.3.3",
"@aws-amplify/storage": "^3.3.24",
"@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0",
"@nrwl/angular": "10.4.4",
"@tensorflow-models/posenet": "^2.2.1",
"@tensorflow/tfjs-backend-webgl": "^3.2.0",
"@tensorflow/tfjs-converter": "^2.8.0",
"@tensorflow/tfjs-core": "^2.8.0",
"aws-appsync": "^4.0.1",
"chart.js": "^2.9.4",
"crypto-js": "^4.0.0",
"graphql": "^15.5.0",
"idb": "^6.0.0",
"ng2-charts": "^2.4.2",
"rxjs": "~6.5.5",
"typed-graphql": "^1.0.2",
"webpack-bundle-analyzer": "^4.4.0",
"zone.js": "^0.10.2"
},
屏幕截图 应用程序从 AWS 调用 GraphQL API 时出错
配置了什么?
const awsmobile = {
"aws_project_region": "XX-XXXX-X",
"aws_cognito_identity_pool_id": "XXXXXXXXXXXXXXXXXXXXX",
"aws_cognito_region": "XX-XXXX-X",
"aws_user_pools_id": "XX-XXXX-X_XXXX",
"aws_user_pools_web_client_id": "XXXXX",
"oauth": {},
"aws_mobile_analytics_app_id": "XXXX",
"aws_mobile_analytics_app_region": "XX-XXXX-X",
"aws_user_files_s3_bucket": "X-staging",
"aws_user_files_s3_bucket_region": "XX-XXXX-X",
"aws_appsync_graphqlEndpoint": "https://XXXXXXXX/graphql",
"aws_appsync_region": "XX-XXXX-X",
"aws_appsync_authenticationType": "AMAZON_COGNITO_USER_POOLS"
}
环境
System:
OS: macOS 11.2.1
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 158.36 MB / 32.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 14.15.1 - ~/.nvm/versions/node/v14.15.1/bin/node
Yarn: 1.22.10 - ~/.nvm/versions/node/v14.15.1/bin/yarn
npm: 6.14.10 - ~/.nvm/versions/node/v14.15.1/bin/npm
Browsers:
Chrome: 88.0.4324.192
Safari: 14.0.3
npmPackages:
@angular-devkit/build-angular: ~0.1001.3 => 0.1001.7
@angular/animations: ^10.1.0 => 10.2.3
@angular/cdk: ^10.2.7 => 10.2.7
@angular/cli: ~10.1.3 => 10.1.7
@angular/common: ^10.1.0 => 10.2.3
@angular/compiler: ^10.1.0 => 10.2.3
@angular/compiler-cli: ^10.1.0 => 10.2.3
@angular/core: ^10.1.0 => 10.2.3
@angular/forms: ^10.1.0 => 10.2.3
@angular/language-service: ^10.1.0 => 10.2.3
@angular/material: ^10.2.7 => 10.2.7
@angular/platform-browser: ^10.1.0 => 10.2.3
@angular/platform-browser-dynamic: ^10.1.0 => 10.2.3
@angular/router: ^10.1.0 => 10.2.3
@angular/service-worker: ^10.1.0 => 10.2.3
@aws-amplify/analytics: ^3.2.5 => 3.2.5
@aws-amplify/api: ^3.2.24 => 3.2.24
@aws-amplify/api-graphql: ^1.2.24 => 1.2.24
@aws-amplify/auth: ^3.3.3 => 3.3.3
@aws-amplify/storage: ^3.3.24 => 3.3.24
@ngneat/spectator: ^6.1.2 => 6.1.2
@ngx-translate/core: ^13.0.0 => 13.0.0
@ngx-translate/http-loader: ^6.0.0 => 6.0.0
@nrwl/angular: 10.4.4 => 10.4.4
@nrwl/cli: 10.4.4 => 10.4.4
@nrwl/cypress: 10.4.4 => 10.4.4
@nrwl/eslint-plugin-nx: 10.4.4 => 10.4.4
@nrwl/jest: 10.4.4 => 10.4.4
@nrwl/tao: 10.4.4 => 10.4.4
@nrwl/workspace: 10.4.4 => 10.4.4
@tensorflow-models/posenet: ^2.2.1 => 2.2.1
@tensorflow/tfjs-backend-webgl: ^3.2.0 => 3.2.0
@tensorflow/tfjs-converter: ^2.8.0 => 2.8.6
@tensorflow/tfjs-core: ^2.8.0 => 2.8.6
@types/jest: 26.0.8 => 26.0.8
@types/node: ~8.9.4 => 8.9.5
@typescript-eslint/eslint-plugin: 4.3.0 => 4.3.0
@typescript-eslint/parser: 4.3.0 => 4.3.0
aws-appsync: ^4.0.1 => 4.0.1
chart.js: ^2.9.4 => 2.9.4
codelyzer: ~5.0.1 => 5.0.1
crypto-js: ^4.0.0 => 4.0.0
cypress: ^6.1.0 => 6.1.0
cypress-cucumber-preprocessor: ^4.0.0 => 4.0.0
eslint: 7.10.0 => 7.10.0
eslint-config-prettier: 6.0.0 => 6.0.0
eslint-plugin-cypress: ^2.10.3 => 2.11.2
fake-indexeddb: ^3.1.2 => 3.1.2
faker: ^5.1.0 => 5.1.0
graphql: ^15.5.0 => 15.5.0
idb: ^6.0.0 => 6.0.0
jest: 26.2.2 => 26.2.2
jest-preset-angular: 8.3.1 => 8.3.1
ng2-charts: ^2.4.2 => 2.4.2
prettier: 2.1.2 => 2.1.2
rxjs: ~6.5.5 => 6.5.5
ts-jest: 26.4.0 => 26.4.0
ts-node: ~7.0.0 => 7.0.1
tslint: ~6.0.0 => 6.0.0
typed-graphql: ^1.0.2 => 1.0.2
typescript: ~4.0.3 => 4.0.5
webpack-bundle-analyzer: ^4.4.0 => 4.4.0
zone.js: ^0.10.2 => 0.10.3
npmGlobalPackages:
@angular/cli: 11.0.2
amplify: 0.0.11
cross-env: 7.0.3
firebase-tools: 8.16.2
gitex-flow: 2.2.1
http-server: 0.12.3
jshint: 2.12.0
npm: 6.14.10
stencil: 0.0.5
typescript: 4.1.2
yarn: 1.22.10