Angular + Amplify 〜トラブルシュート編

目次

1. Angular + Amplify 〜準備編
2. Angular + Amplify 〜Analytics編
3. Angular + Amplify 〜トラブルシュート編

トラブルシュート

aws-export.jsのimport文でimplicitly has an 'any' type.

src/@types/aws/aws-exports.d.tsを作成。

aws-exports.d.ts

declare const awsmobile: {};
export default awsmobile;

tsconfig.jsonを修正して.jsファイルを有効化。

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true
  }
}

"export 'GraphQLError' was not found in 'graphql'

Angular v12からwebpack 5になったことで発生するらしい。参考

@angular-builders/custom-webpackを追加。

npm install -D @angular-builders/custom-webpack

custom-webpack.config.jsを追加。

custom-webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.m?js/,
        resolve: {
          fullySpecified: false,
          fallback: {
            crypto: false,
          },
        },
      },
    ],
  },
};

angular.jsonを修正。

angulsr.json

"architect": {
  "build": {
    // 変更
    "builder": "@angular-builders/custom-webpack:browser",
    // 追加
    "options": {
      "customWebpackConfig": {
        "path": "./custom-webpack.config.js",
        "mergeRules": {
          "module": {
            "rules": "prepend"
          }
        },
        "replaceDuplicatePlugins": true
      },
      "allowedCommonJsDependencies": [
        "uuid",
        "ulid",
        "url",
        "lodash/get",
        "lodash/isEmpty",
        "lodash/isEqual",
        "@aws-amplify/core",
        "buffer",
        "@aws-crypto/sha256-js",
        "crypto-js/hmac-sha256",
        "crypto-js/lib-typedarrays",
        "crypto-js/core",
        "zen-observable",
        "js-cookie",
        "isomorphic-unfetch",
        "@aws-crypto/crc32",
        "fast-xml-parser",
        "@aws-crypto/sha256-browser",
        "axios"
      ],
   ...
   },
   ...
   "serve": {
      // 変更
      "builder": "@angular-builders/custom-webpack:dev-server",
   ...
  }

pacakge.jsonに設定を追加。

pacakge.json

{
  "browser": {
    "crypto": false
  }
}

Uncaught ReferenceError: global is not defined

src/polyfills.tsに以下のコードを追加。

polyfills.ts

(window as any).global = window;
(window as any).process = {
  env: { DEBUG: undefined },
};
global.Buffer = global.Buffer || require('buffer').Buffer;

参考

• Angular6で”global is not defined”が出た時の回避策