常連

以下のようなサービスを作成してデータを取得しているのですが
このサービスをcomponentで呼んでthis.testDataを返したいのですが
普通に呼ぶとundifinedが返ってきてしまいます
非同期なのが影響していると思うのですがいいやり方はないでしょうか


```ここに言語を入力
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { GetApiReturnService } from './get-api-return.service';
import * as xml2js from 'xml2js';

@Injectable({
  providedIn: 'root'
})
export class TestService {

  url: string;

  testData;

  constructor(private http: HttpClient, private getApiReturnService: GetApiReturnService) { }

  searchTest(){
    this.url = 'https://test.jp/api?type=1';

    let testData;
    this.getApiReturnService.search(this.url).subscribe(response => {
      xml2js.parseString(response, function (err, result) {
        testData = result;
      });
      this.testData = testData;
    });

    
    return this.testData;

  }
}
```

Angular6 RxJsのsubscribeのデータをreturnで返したい

### 実現したいこと
Typescript、SCSSをコンパイルして、HTMLにそれぞれjs,cssファイルとして読み込んでもらいたい。Angularを使っており、自動的にコンパイルがされる状態。

### 発生している問題・分からないこと
自分でいろいろな渡し方を試したがどうしてもうまくいかず、読み込んでもらえない。

原因かもしれないと思っているもの
A．渡し方自体も間違っているかもしれない。

B．ファイル自体が間違っているかもしれない。
app.component.(html/ts/scss)とというファイルとmain.ts、index.htmlなどがあり、それぞれの目的の違いが理解できず、分からないままapp.componentにすべて書いた。
ng buildをしたところ、distというディレクトリが作成された。これがコンパイルされたものだと思い、これらも以下のようにHTMLに入れた。しかし、これがあっているのかもわからない状態。
<link rel="stylesheet" href="styles.（伏字）.css">
  <script src="main.（伏字）.js"></script>
  <script src="polyfills.（伏字）.js"></script>
  <script src="runtime.（伏字）.js"></script>




### 該当のソースコード

```HTML
特になし
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
アプリがどうなっているか確認したかったため、ng serveで確認した。localhost4200のサイトでHTMLは出たが、cssとjsファイルが一切読み込まれなかった。そのときはローカルドライブ（パソコン上？）のファイルは参照できないという趣旨のエラー。

→http-serveでというコマンドを使うとローカルサーバー（？）が2個作られたので、それの一方を使いhttp://（伏字）8080/src/main.jsと指定して毎回読み込み前にサーバーを立ち上げたらいける？と思ったが、以下のエラーが出た。**（Failed to load resource: the server responded with a status of 404 (Not Found)）**

→http://～～と続くこれを使うこと自体が間違っているかもしれないと思い、調べたら事例で出てくるコードはパスを渡したりではなく、main.jsとのみ書いている人が多かったので、
    <script src=main.js></script>
と記述。しかし(index):37 Uncaught ReferenceError: clickbutton is not defined
    at HTMLButtonElement.onclick ((index):37:70)と表示される。TSファイル、ひいてはJSファイルの中身が伝わっていない。

### 補足
特になし

js、cssファイルをどう読み込みさせるのか。

## テーマ、知りたいこと
ウェブアプリケーション開発（JavaScript）において、大きくReact, Vue, Angularの3種類が使われているイメージですが、それぞれのフレームワークごとの違いやメリット・デメリットが知りたいです。

※ jQueryを除外してしまってすみません。「上述の3つよりもjQueryのメリットを見てくれ！」という方のコメントもお待ちしております。

## 背景、状況
私はReactでの開発経験しかなく周囲もReactエンジニアばかりなので、Reactの解説の際によく引き合いに出されるVueやAngularについて経験者の方にお伺いしたいと思い投稿いたしました。

※ VueやAngularについてはHello, Worldしたことがある程度の知識しかありません。

以上、よろしくお願いします。

ウェブアプリケーションのフロントエンドフレームワーク（ライブラリ）ごとの違いやメリット・デメリットについて伺いたい

### 実現したいこと

以下のサイトを参考にしてSpring SecurityでCSRFトークンを利用するREST APIの作成を行っています。
https://volkruss.com/posts/p3398/

Angularで作成した画面からGET送信を行うとクッキーにCSRFトークンが格納されるようにしたいです。

### 前提

REST APIをSpringで作成し、
Angularで作成した画面（コンポーネント）からAPIの呼び出しを行っています。

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

PostmanからGET送信をするとクッキーにCSRFトークンが設定されていることが確認できるのですが、
Angularで作成した画面のボタンからGET送信をしてもクッキーにCSRFトークンが設定されません。
Postmanでは正常にCSRFトークンが取得できていることからAngular側で何か設定が必要なのではないかと考えてます。
原因と対処法がありましたらご教示いただきたいです。

・PostmanでGET送信
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-03-24/5e01e1be-7795-45f8-8cb3-222f0751687a.png)

・Angularで作成した画面からGET通信してもクッキーにCSRFトークンが設定されない
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-03-24/b02f5f42-e405-45b4-9047-80ccff2a2645.png)

＜補足＞
GET通信ではCSRFトークンが設定されませんが、
POST通信を行うとCSRFトークンが設定されます。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-03-24/568ebc4e-facd-42ea-8818-2528c4eb3237.png)

そのため、参考サイトではGET通信→POST通信で403エラーが発生せずに通信ができていますが、
私の環境ではGET通信→POST通信（403エラー）→POST通信（200）となります。

### 該当のソースコード

```SecurityConfig.java
import java.util.Arrays;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.web.SecurityFilterChain;
import org.springframework.security.web.csrf.CookieCsrfTokenRepository;
import org.springframework.security.web.csrf.CsrfTokenRequestAttributeHandler;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.CorsConfigurationSource;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;

@Configuration
@EnableWebSecurity
public class SecurityConfig {
	@Bean
	public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
		
		http.cors(cors -> cors.configurationSource(corsConfigurationSource()));
		
		http.csrf((csrf) -> csrf
				.csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse())
				.csrfTokenRequestHandler(new CsrfTokenRequestAttributeHandler()));
		
		http.authorizeHttpRequests(authorize -> {
			authorize.requestMatchers("/**").permitAll();
		});
		
		return http.build();
	}

	//CORSの設定
	@Bean
	public CorsConfigurationSource corsConfigurationSource() {
		CorsConfiguration cors = new CorsConfiguration();
		cors.setAllowedOrigins(Arrays.asList("http://localhost:4200"));
		cors.setAllowedMethods(Arrays.asList("GET","POST","OPTIONS"));
		cors.setAllowedHeaders(Arrays.asList("*"));
	    cors.setAllowCredentials(true);
	    cors.addExposedHeader("X-AUTH-TOKEN");
	    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
	    source.registerCorsConfiguration("/**",cors);
	    return source;
	}
}
```
```testController.java
import org.springframework.security.core.Authentication;
import org.springframework.security.core.context.SecurityContextHolder;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class testController {
	
	@GetMapping("/get")
	public String doGet() {
	    System.out.println("GET");
	    Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
	    System.out.println(authentication);
		return "sample GET is done";
	}
	
	@PostMapping("/post")
	public String doPost() {
	    System.out.println("POST");
	    Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
	    System.out.println(authentication);
		return "sample POST is done";
	}
	
}

```
```html
    <button id="get" (click)="doget()">GET</button>
    <button id="post" (click)="dopost()">POST</button>
    ...
```

```component.ts
import { Component } from '@angular/core';
import { DashboardService } from './dashboard.service'
import { HttpClientModule } from '@angular/common/http';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [HttpClientModule],
  templateUrl: './dashboard.component.html',
  styleUrl: './dashboard.component.css'
})
export class DashboardComponent {
  message: string;

  constructor(private dashboardService: DashboardService,) {
    this.message = 'This is a sample of Angular application.';
  }

doget(){
  
  fetch('http://localhost:8080/get',
  {
      method:'GET',
      credentials: 'include'
  })
  .then(res => res.text())
  .then(str =>console.log(str))
}


dopost(){
  const csrfToken = document.cookie.replace(/(?:(?:^|.*;\s*)XSRF-TOKEN\s*\=\s*([^;]*).*$)|^.*$/, '$1');
  console.log(csrfToken);
  fetch('http://localhost:8080/post',{
      method:'POST',
      credentials: 'include',
      headers: {
          'X-XSRF-TOKEN' : csrfToken
        },
  })
  .then(res => res.text())
  .then(str => console.log(str))
}
}~~打ち消し線~~
```

### 補足情報（FW/ツールのバージョンなど）

spring-boot-starter-parent：3.2.4
Spring Security Version： 6.2.3
Eclipse IDE for Java Developers Version: 2023-12 (4.30.0)
Postman for Windows：10.24.7


GET通信でXSRF-TOKENの取得ができない

Angularの案件ん実務で関わることになったためAngularのチュートリアルをやっています。

``Error occurs in the template of component AppComponent.``このようなエラーが出てしまい、解決できずにこまっています。
Angularに詳しい方、ぜひご教授いただきたいです。

## エラーの内容
```
$ ng serve
✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |      Size
vendor.js             | vendor        |   2.11 MB
polyfills.js          | polyfills     | 339.10 kB
styles.css, styles.js | styles        | 212.73 kB
main.js               | main          |  28.70 kB
runtime.js            | runtime       |   6.88 kB

                      | Initial Total |   2.69 MB

Build at: 2021-11-13T06:36:42.385Z - Hash: 008a154853e7aac3 - Time: 4816ms

Error: src/app/app.component.html:5:1 - error NG8001: 'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

5 <router-outlet></router-outlet>
  ~~~~~~~~~~~~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.




** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✖ Failed to compile.
```

## 現在のソースコード
```
## app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HeroesComponent } from './heroes/heroes.component';

const routes: Routes = [
  { path: 'heroes', component: HeroesComponent }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule { }
```
```

<h1>{{title}}</h1>
<nav>
  <a routerLink="/heroes">Heroes</a>
</nav>
<router-outlet></router-outlet>
<app-messages></app-messages>
```

## 試したこと
エラー文に```If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.```という記述があったため、app-routing.module.tsのimportの記述を``import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';``このような記述に変更してみましたが解決できませんでした。


宜しくお願いいたします。

Angular公式チュートリアルでのエラー  Error occurs in the template of component AppComponent.

Angularを使用してnpm startコマンドを実行したのですが
error TS1005: ',' expected.

というエラーが表示されてしまいます。

ソースを見直したのですが
「,」が漏れてそうな箇所はありませんでした。

解決方法わかる方いましたら教えていただけませんか。


表示されてるエラー
＞node_modules/@types/component-emitter/index.d.ts(8,25): error TS1005: ',' expected.




上記のエラーで指定があった箇所
```
nterface Emitter<Event = string> {
    on(event: Event, listener: Function): Emitter;
    once(event: Event, listener: Function): Emitter;
    off(event?: Event, listener?: Function): Emitter;
    emit(event: Event, ...args: any[]): Emitter;
    listeners(event: Event): Function[];
    hasListeners(event: Event): boolean;
    removeListener(event?: Event, listener?: Function): Emitter;
    removeEventListener(event?: Event, listener?: Function): Emitter;
    removeAllListeners(event?: Event): Emitter;
}

declare const Emitter: {
    (obj?: object): Emitter;
    new (obj?: object): Emitter;
};

export = Emitter;
```



error TS1005: ',' expected.エラーを解決したい　Angular

## テーマ、知りたいこと
フレームワークやライブラリについて

## 背景、状況
今HTML、CSS、Bootstrap、Javascriptを一通り学習し終わったプログラミング初心者です。
Bootstrapはアコーディオンやカルーセルなどのコードをコピーしてきて貼り付けるだけでそれっぽいUIを作ることができるので学習して良かったと思っています。javascriptのフレームワークやライブラリは(React、vue.js、angularなど）javascriptで書けるコードを短く書けるよ!って認識で大丈夫ですか？もし僕の認識であっているのなら難しいReactなどを何十時間とかけて覚えるよりPythonやPHPを学んだほうがいいと個人的には思ってしまいます。それともフレームワークは必須だからjavascript学習が終わったならとりあえず、フレームワークも学習した方がいいのか教えてもらいたいです.もしフレームワークなど学んだ方がいいのであればおすすめのフレームワークやライブラリ教えてもらえれば嬉しいです。






javascriptのフレームワークやライブラリの重要性がわからない

### 前提・実現したいこと
VScodeがクラッシュ？または更新？があってから、ng serve をするとエラーがでるようになってしまった。
npm ls　をしてみたところ、以下のようなエラーがでていました。

エラーメッセージ
npm ERR! peer dep missing: @angular/common@^2.2.3, required by @angular/flex-layout@2.0.0-rc.1
npm ERR! peer dep missing: @angular/common@^5.0.0, required by angular2-drag-scroll@1.5.2
npm ERR! peer dep missing: @angular/compiler@^5.0.0, required by angular2-drag-scroll@1.5.2
npm ERR! peer dep missing: @angular/core@^2.2.3, required by @angular/flex-layout@2.0.0-rc.1
npm ERR! peer dep missing: @angular/core@^5.0.0, required by angular2-drag-scroll@1.5.2
npm ERR! peer dep missing: zone.js@^0.7.2, required by @angular/flex-layout@2.0.0-rc.1
npm ERR! peer dep missing: @angular/cdk@2.0.0-beta.12, required by @angular/material@2.0.0-beta.12

### 試したこと
・上記のものをインストールし直した　→　何故かインストールができない
・node_modulesの削除　→　キャッシュクリーン　→　npm install
・Angularcilを入れ直した
・npmのバージョンをあげてみた（通常は3.10.9です）

### 補足情報（FW/ツールのバージョンなど）
npm:3.10.9
node:6.9.2
webpack:1.14.0