あるSEのつぶやき・改

ITやシステム開発などの技術に関する話題を、取り上げたりしています。

Angular

Angularで外部JavaScriptを読み込みHTML要素を書き換える方法

Angular でプログラムを書いていると、どうしても画面の遷移時に JavaScript を実行させたくなります。 ですが、テンプレートの HTML に <script>要素で処理を記述しても、テンプレート適用時に無効になってしまいます。 そこで調べてみたところ、コンポーネントの初…

Fix: oauthService.getIdentityClaims always returns null with implicit flow

Angular の angular-oauth2-oidc ライブラリで、Google の OAuth 認証を行おうとしたら、this.oauthService.getIdentityClaims();が必ず null を返してきて、ユーザーの情報が取得できませんでした。 原因がいくつか分かったので、メモとして残しておきます…

Fix:ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'state' Error: Cannot match any routes

Angular で OAuth の処理を行っている際に、以下のエラーが出力されました。 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'state' Error: Cannot match any routes. URL Segment: 'state' at Anonymous function (ht…

Fix:ERROR Error: StaticInjectorError(AppModule)[OAuthService -> HttpClient]: StaticInjectorError(Platform: core)[OAuthService -> HttpClient]: NullInjectorError: No provider for HttpClient!

Angular で OAuth の処理を行っている際に、以下のエラーが表示されました。 ERROR Error: StaticInjectorError(AppModule)[OAuthService -> HttpClient]: StaticInjectorError(Platform: core)[OAuthService -> HttpClient]: NullInjectorError: No provide…

AngularなSPAでリロード時にアクセスエラーが起きる問題の解消方法

Angular な SPA を、Amazon S3 + CloudFront の環境にアップロードしていたのですが、デフォルトのルーティング設定だと、リロード時に以下のようなアクセスエラー(403? 404?)が発生してしまいます。 <Error> <Code>AccessDenied</Code> <Message>Access Denied</Message> <RequestId>774BF58712AE4AD1</RequestId> <HostId>bn3apgN</hostid></error>…

Fix:Error: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.

Angular で以下のようなエラーが発生するようになってしまいました。 Error: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document. at new PathLocationStrategy (common.js:403) at provideLocat…

Fix:Error: The selector "app-root" did not match any elements

Angular でなにも変更してないと思っていたのですが、突然、以下のようなエラーが発生するようになりました。 Error: The selector "app-root" did not match any elements at DefaultDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/pla…

AngularのSPAをS3+CloudFront環境にデプロイしてキャッシュクリアする方法

はじめに Angular な SPA を Amazon S3 + CloudFront にホストするのはいいですが、じゃあデプロイはどうするのとなって行き詰まっていました。 www.aruse.net いろいろ調べてみたところ、Angular の SPA を自動でデプロイして CloudFront のキャッシュもク…

FacebookのOAuth認証で取得したアクセストークンをC#で検証する方法

はじめに 以下の記事で、Angularな SPA で Facebook の OAuth 認証を行いました。 www.aruse.net OAuth 認証時に取得したアクセストークンは、サーバーに送信して検証をしなければいけないはずなのですが、Facebook がその情報をきちんと公開していません。 …

GoogleのOAuth認証で取得したアクセストークンをC#で検証する方法

はじめに 以下の記事で、Angular な SPA で Google の OAuth 認証を行いました。 www.aruse.net 実際には、この時取得したアクセストークンをサーバーサイドに送信して、検証を行わないといけません。 ネットで調べた限りでは、セキュリティに配慮しているサ…

もっと簡単に、AngularなSPAでGoogleのOAuth認証を行う方法

はじめに 先日、Angular で Google の OAuth 認証を行う方法として、かなり頑張って以下の方法をご紹介しました。 www.aruse.net ですが、さらに調べてみると Google でも Facebook と同じような SDK が用意されていて、簡単に OAuth 認証できることが分かり…

AngularなSPAでFacebookのOAuth認証を行う方法

はじめに Angular な SPA(Single Page Applicaiton)で、Facebook の OAuth 認証を実現する方法のご紹介です。 始めは以下の記事と同じように、angular-oauth2-oidcというライブラリを使用して実現しようとしたのですがうまくできませんでした。 www.aruse.ne…

AngularなSPAでGoogleのOAuth認証を行う方法

はじめに Angular で SPA(Single Page Application)を作成したはいいけれど、ソーシャルログインを行おうとするととたんにハードルが高くなります。 ネット上でも、まとまった情報というのはあまりありません。英語でもごくわずかでした。 この記事では、Ang…

Angularのnpm startでエラーが発生した

現在、Udemy の Angular の講座を受講しているのですが、サンプルアプリケーションでエラーが発生してしまいました。 www.udemy.com 以下が発生したエラーです。 $ npm start > angular-quickstart@1.0.0 prestart /Users/xxx/Desktop/quickstart > npm run …