常連

## WEBサービスを開発している皆さんへ！開発環境構築のアドバイスをいただきたいです！
現在、Angularを学ぶために開発環境を構築しています。ただ、自分の構築方法が最善なのか判断がつかず、不安を感じています。
Dockerなどの便利なツールが普及している中で、下記の手順が適切かどうか、アドバイスをいただけると嬉しいです。
また、今後この環境を他のメンバーにも簡単に共有できる形にしたいと考えています。ぜひご指摘ください！

## 環境条件
フロントエンド：Angular　バージョンはとりあえず最新
バックエンド：.NET 8 WEB API
データベース：PostgreSQL　バージョンはとりあえず最新
サーバー：Windows Server バージョン未定

## 構築手順
1.仮想環境の作成
Hyper-Vを使用し、Windows 11のISOファイルをもとに仮想マシンを作成。

2.PostgreSQLのインストール
以下の公式サイトから最新版をダウンロードしてインストール。
PostgreSQL公式ダウンロードページ

3.Visual Studio 2022のインストール
.NET 8の開発環境を利用するためにインストール。

4.Visual Studio Codeのインストール
フロントエンド開発のためのエディタとして利用。

5.Node.jsのインストール
以下の公式サイトから最新版をダウンロードしてインストール。
Node.js公式ダウンロードページ

6.開発の開始
上記の環境でフロントエンド（Angular）、バックエンド（.NET）、データベース（PostgreSQL）の開発を行います。


WEBサービスを開発している皆さんへ！開発環境構築のアドバイスをいただきたいです！

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

以下のようなサービスを作成してデータを取得しているのですが
このサービスを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で返したい

### 前提・実現したいこと
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

npm ERR! peer dep missing ～　のエラーを解決したい

### 実現したいこと
開発環境においてCORSエラーを回避したい

### 発生している問題・分からないこと
Angular, ASP.NET Core Web API, Keycloakを用いたSAML2認証を組み合わせたアプリケーションにおいてCORSのエラーが発生しています。どうすれば回避できるのでしょうか?

エラーメッセージ中の以下のアドレスは次に対応します。
https://localhost:4200 : フロントエンド側(Angular)のアドレス
https://localhost:7055 : バックエンド側(ASP.NET Core Web API)のアドレス
https://localhost:8443 : Keycloakのアドレス


### エラーメッセージ
```error
Access to XMLHttpRequest at 'https://localhost:8443/realms/(realm name)/protocol/saml?SAMLRequest=fJFNa8MwDIbvhf4H43tnx%2FloKpJAWBkUukuz7rCbk7ok4NiZ5ezj3y%2Ft2rHB6EUHSY%2F0vlKGstdigHL0rdmp11GhJx%2B9NgjflZyOzoCV2CEY2SsE30BVPm5B3HEYnPW2sZr%2BZm4jElE531lDyWad0%2B5QcyGSY5MeQnWMgiCp64Qn6TJK60REqyCg5Fk5nICcTvxEIY5qY9BL46cUF9GCrxY8eQo4xCEE4oWS9WSjM%2FK0Jqet9wMCY9o2UrcWPaRRFDKnpO6RVZ%2F4oO07u1phJw%2BUlFeZ99bg2CtXKffWNWq%2F2%2F43ccnjmFUn95dYNkiL%2BYyQ7HwTOKt2xS0yO6%2F%2BaZ3PLom%2F3ym%2BAAAA%2F%2F8DAA%3D%3D&RelayState=fHLe6EsBVGLe6Gh3cn9mzROQ' (redirected from 'https://localhost:7055/account/UserInfo') from origin 'https://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
```

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

```Program.cs(前半部分)

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddLogging(loggingBuilder =>
{
    loggingBuilder.AddConsole();
    loggingBuilder.AddDebug();
    loggingBuilder.SetMinimumLevel(LogLevel.Debug);
});

#if DEBUG
// CORSの有効化(開発時のみ)
var MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

builder.Services.AddCors(options =>
{
    options.AddPolicy(name: MyAllowSpecificOrigins,
        policy =>
        {
            policy.WithOrigins("https://localhost:4200", "https://localhost:8443")
            .AllowAnyHeader()
            .AllowAnyMethod();
        });
});
#endif

// Add services to the container.

// 分散キャッシュの設定
builder.Services.AddDistributedPostgreSqlCache(options =>
{
    options.ConnectionString = builder.Configuration.GetConnectionString("FlowDb");
    options.SchemaName = "public";
    options.TableName = "TestCache";
    options.DisableRemoveExpired = false;
    options.ExpiredItemsDeletionInterval = TimeSpan.FromMinutes(30);
});

builder.Services.AddAuthentication(options =>
{
    options.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
    options.DefaultChallengeScheme = Saml2Defaults.Scheme;
})
.AddCookie()
.AddSaml2(options =>
{
    var entityId = builder.Configuration["Saml2:entityId"];
    var idpEntityId = builder.Configuration["Saml2:idpEntityId"];
    var metadataUrl = builder.Configuration["Saml2:IdpMetadataURL"];

    options.SPOptions.EntityId = new Sustainsys.Saml2.Metadata.EntityId(entityId);
    options.SPOptions.AuthenticateRequestSigningBehavior = Sustainsys.Saml2.Configuration.SigningBehavior.Never;
    options.SPOptions.PublicOrigin = new(entityId ?? String.Empty);
    var idp = new Sustainsys.Saml2.IdentityProvider(
        new Sustainsys.Saml2.Metadata.EntityId(idpEntityId),
        options.SPOptions)
    {
        MetadataLocation = metadataUrl,
        LoadMetadata = true,
    };
    options.IdentityProviders.Add(idp);
});

builder.Services.AddAuthorization(options =>
{
    options.AddPolicy("Saml2", policy =>
    {
        policy.RequireClaim(ClaimTypes.NameIdentifier);
    });
});

builder.Services.AddControllers();
builder.Services.AddSession(options =>
{
    options.IdleTimeout = TimeSpan.FromMinutes(30);
    options.Cookie.HttpOnly = true;
    options.Cookie.IsEssential = true;
});
```

```Program.cs (後半部分)

var app = builder.Build();

// Configure the HTTP request pipeline.

app.UseHttpsRedirection();
app.UseSession();

#if DEBUG
// CORSの有効化(開発時のみ)
app.UseCors(MyAllowSpecificOrigins);
#endif

app.UseAuthentication();
app.UseAuthorization();

app.MapControllers();

app.Run();
```

```http.service.ts
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Endpoints } from '../constants/endpoints';

@Injectable({
  providedIn: 'root'
})
export class HttpService {

  constructor(private http: HttpClient) { }

  get<T>(endpoint: string): Observable<T> {
    const httpOptions = {
      headers: new HttpHeaders({
        'Access-Control-Allow-Origin': '*',
      })
    };

    return this.http.get<T>(Endpoints.getUrl(endpoint), httpOptions);
  }

  post<T>(endpoint: string, body: any | null): Observable<T> {
    const httpOptions = {
      headers: new HttpHeaders({
        'Access-Control-Allow-Origin': '*',
      })
    };

    return this.http.post<T>(Endpoints.getUrl(endpoint), body, httpOptions);
  }
}

```

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

##### 上記の詳細・結果
検索結果に従ってAngularからのHTTP GETのヘッダーに'Access-Control-Allow-Origin': '*'を追加したり、ASP.NET Core Web API側にAddCorsメソッドとUseCorsメソッドの呼び出しも追加しましたが解消できていません。

### 補足
バージョンは以下の通りです
.NET: 8
Angular: 18
Keycloak: 25

Keycloakでは、Valid redirect URIsに「https://localhost:7055/*」と「https://localhost:4200/*」を指定しています。

CORSエラーの回避方法がわかりません

###前提
AngularでWebアプリを開発している中での質問です。（超初心者です。）

test.component.tsではAngularのHttpClientを利用して
外部ネットワークに格納されているpageSize配列の0番目を取得し、
TestService側で宣言した"res"に格納しています。（TestService.tsのparamsGetPageSize） 

その後、test.component.tsで取得したpageSize配列の0番目が格納された"res"を
TestService.tsのparamsGet関数で利用します。

###意図
TestService.tsのコードを見ていただければ分かる通り、
paramsGetPageSizeとParamsGetは
postParam = postParam.set('pageSize', ＊＊＊);の＊＊＊部分が固定値か、変数か以外に違いはありません。
pageSizeのような環境変数は外部に置いておき、それを読み込むようにしたいという意図があり、
pageSizeを読み込むための関数は固定値（仕方なし）、それ以外でparamsGet関数を利用する場合は、
取得した変数を用いる、という処理にしています。

このparamsGet関数は様々な場面で利用されます。

###質問
非同期なのが原因かと思いますが、test.component.tsで取得したpageSizeがresに格納される前に
TestService.tsのparamsGetが実行されてしまうため、resがundefinedのまま処理が進んでしまいます。

paramsGetが実行されるとき、resがundefinedの場合は値が格納されるのを待って処理を開始する、という方法があればご教授いただけないでしょうか。

よろしくお願いいたします。

###urlEncoder.ts
```TypeScript
import { HttpParameterCodec } from '@angular/common/http';

export class UrlEncoder implements HttpParameterCodec {
  encodeKey(key: string): string {
    return encodeURIComponent(key);
  }
}
```

###TestService.ts
```TypeScript

import { HttpClient, HttpParams } from '@angular/common/http';
import { UrlEncoder } from 'urlEncoder.tsのパス';

export class TestService{
  // test.component.tsから取得できるように宣言
  public res = "";
  constructor(private http: HttpClient) { }

  private setRequestParams(): HttpParams{
    let httpParams: HttpParams = new HttpParams({ encoder: new CustomURLEncoder() });
    httpParams = httpParams.set('hoge', '1'); //http://-----&hoge=1 になります。
  }

    paramsGetPageSize(path: string, postParams: any = {}): Observable<any> {
          let postParam: HttpParams = this.setRequestParams();

          // 固定値を使用
          postParam = postParam.set('pageSize', '100');
          return this.http.get(path, { params: postParam });
    }

    paramsGet(path: string, postParams: any = {}): Observable<any> {
          let postParam: HttpParams = this.setRequestParams();

          // test.component.tsで取得したthis.resを利用
          postParam = postParam.set('pageSize', this.res);
          return this.http.get(path, { params: postParam });
    }
};
```
###test.component.ts
```TypeScript
import TestService from {'Service.tsのパス'};

@component{
  略
}

export class TestComponent implements OnInit{
  constructor(
    private test: TestService,
  )

  ngOnInit(){
    this.test.paramsGet('http://------').subscribe(res => {
      this.response = res.pageSize[0] //外部インターネット上のpageSize配列の0番目を取得
      // サービスのプロパティに代入
      this.test.res = this.response;
    } );

   this.test.paramsGet('*******').subscribe(
    処理
   );
  }

}
```

Angularで非同期処理によって取得した値が格納されるのを待ってから、後続の処理を実行したい

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

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

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

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

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