質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.47%
Devise

Deviseとは、Ruby-on-Railsの認証機能を追加するプラグインです。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

0回答

826閲覧

AngularでRailsのDeviseトークンを使いたい

I_am_

総合スコア23

Devise

Deviseとは、Ruby-on-Railsの認証機能を追加するプラグインです。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2021/06/12 08:31

編集2021/06/13 09:44

前提・実現したいこと

AngularとRailsでDeviseを使用したログインの連携をしたいです。

https://medium.com/hackernoon/angular-2-and-ruby-on-rails-user-authentication-part-2-a0c40f427145#.ihueixn1i
こちらのチュートリアルを一から進めています。

こちらのモジュールがうまく使用できなくてエラーが返されてしまってます。
Angular側の実装でモジュールの依存関係で問題が起きているように思うのですが、解消の仕方がいまいち分からないです。
https://www.npmjs.com/package/angular2-token

Angular CLI: 10.2.3
Node: 14.5.0
rails: 6

発生している問題・エラーメッセージ

具体的には、以下のエラーが出てきます。

$ npm start > project-x@0.0.0 start > ng serve chunk {main} main.js, main.js.map (main) 1.8 kB [initial] [rendered] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 661 bytes [initial] [rendered] chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered] chunk {scripts} scripts.js, scripts.js.map (scripts) 686 kB [entry] [rendered] chunk {styles} styles.js, styles.js.map (styles) 1.21 MB [initial] [rendered] chunk {vendor} vendor.js, vendor.js.map (vendor) 343 kB [initial] [rendered] Date: 2021-06-12T08:19:17.327Z - Hash: b64124a77aa13d114482 - Time: 3345ms ERROR in The target entry-point "angular2-token" has missing dependencies: - @angular/http ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

該当のソースコード

app.module.tsにモジュールをセットして、

app.component.tsは以下の通りに書きました。

Typescript

1import { Component } from '@angular/core'; 2import {Angular2TokenService} from "angular2-token"; 3import {environment} from "../environments/environment"; 4 5@Component({ 6 selector: 'app-root', 7 templateUrl: './app.component.html', 8 styleUrls: ['./app.component.scss'] 9}) 10export class AppComponent { 11 title = 'Hello!! project-x'; 12 13 constructor( 14 private authToken: Angular2TokenService, 15 ){ 16 this.authToken.init(environment.token_auth_config); 17 18 this.authToken.signIn({email: "user@example.com", password: "monkey67"}) 19 .subscribe( 20 res => { 21 console.log('auth response:', res); 22 console.log('auth response headers: ', res.headers.toJSON()); //log the response header to show the auth token 23 console.log('auth response body:', res.json()); //log the response body to show the user 24 }, 25 err => { 26 console.error('auth error:', err); 27 } 28 ) 29 } 30 31 32}

試したこと、質問

・"angular2-token" has missing dependencies:@angular/http
とモジュールが競合しているように思うのですが、こういった場合はどのように調べていけば、トラブルシュートできるのでしょうか?(ググったのですが、トラブルシュートに直結するものがなかったです、、)

・私はモジュールの依存関係が原因でエラーが起きてると認識しているのですが、その認識でまずあっているかもわかってないです。

何かわかることや、ここを見ると何かわかるのではないか?とかあったら、教えていただけると幸いです。
何卒、よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問