概要
アプリのログインをCognitoを使った認証でおこなうことを想定しています。
その実装をするにあたって、
アプリにCognitoのJavascript SDKであるamazon-cognito-identity-jsをnpm installし、
ライブラリを読み込む記述をしたのですが、アプリ起動時にエラーがでました。
その時の対処方法を記載したいと思います。
*ここではログイン処理の実装の部分については省略します。
前提
アプリ：Angular、Typescript
npm installするライブラリ: aws-sdk、amazon-cognito-identity-js
・Angular CLIのng generateを使ってAngularアプリが作ってあること。
・Cognitoにユーザープールとユーザーを作成し、ログインできる状態になっていること。
手順
アプリにnpm installでaws-sdk、amazon-cognito-identity-jsをインストールし、
任意のファイルに2つのライブラリのimportを実施。
*ここではログイン処理の実装の部分については省略します。
Cognito ログイン実装等で検索するとQiitaでも別のサイトでも実装方法については色々出てくるのでそちらを参考にしてください。
以下、2つのライブラリのimport部分の抜粋
import { CognitoUserPool, CognitoUserAttribute, CognitoUser, AuthenticationDetails } from "amazon-cognito-identity-js";
import * as AWS from 'aws-sdk';
このあとng serveでアプリを立ち上げようとしたところ、エラーが出力されました。
エラー1: stream、 Buffer周りのエラーがTerminalに出力されcomplileがエラーになる。
以下のようなエラーがterminalにずらっとが出力され、compileできませんでした。
Error: node_modules/aws-sdk/lib/http_response.d.ts:1:25 - error TS2307: Cannot find module 'stream' or its corresponding type declarations.
1 import * as stream from 'stream';
~~~~~~~~
Error: node_modules/aws-sdk/lib/http_response.d.ts:14:18 - error TS2591: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node` and then add 'node' to the types field in your tsconfig.
14 body: string|Buffer|Uint8Array;
~~~~~~
Error: node_modules/aws-sdk/lib/request.d.ts:1:25 - error TS2307: Cannot find module 'stream' or its corresponding type declarations.
1 import * as stream from 'stream';
~~~~~~~~
Error: node_modules/aws-sdk/lib/request.d.ts:145:45 - error TS2591: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node` and then add 'node' to the types field in your tsconfig.
....
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
✖ Failed to compile.
対応策
Error: node_modules/aws-sdk/lib/request.d.ts:145:45
error TS2591: Cannot find name 'Buffer'. Do you need to install
type definitions for node? Try `npm i --save-dev @types/node` and
then add 'node' to the types field in your tsconfig.
①上記のエラーに出力されている文言に従って、@types/nodeをinstallします
npm i --save-dev @types/node
②tsconfig.jsonにnodeを追加
tsconfig.jsonのcompilerOptions.typesの部分に"node"を追加します。
*他の値は環境によって異なるため省略しています。
{
"compilerOptions ": {
"types": [
"node"
]
},
"angularCompilerOptions": {}
}
これで再度ng serveでアプリを起動すればエラーは消えるはずです。
エラー2: ブラウザのコンソールにglobal is not definedエラーが出て、画面が表示されない
実際にcognitoを使ってログインする際のコードを書いていきました。
コードはこちらのサイトを参考にしました。
その際、 画面が表示されなくなり、ブラウザのコンソールに以下のようなエラーが発生します。
解決策
index.htmlに以下のコードを追加します。
<script>
if (global === undefined) {
var global = window;
}
</script>
<!-- ここから下はデフォルトのままdoctype html を宣言してhtmlを記載しました -->
<!doctype html>
<html lang="en">
...省略...
</html>
調べてみたところ、
gitのissueにも上がっていました。
Uncaught ReferenceError: global is not defined in latest Angular 6 RC #678
Angularのgithubにもglobalのエラーのこと記載ありました。
[github]
(https://github.com/angular/angular-cli/issues/9827#issuecomment-369578814)
外部ライブラリでglobalオブジェクトを参照する時にglobalオブジェクトが見つからず、エラーになっているようです。