常連

### 実現したいこと
開発環境において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の案件ん実務で関わることになったため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

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

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

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

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

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

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

### 前提・実現したいこと
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 ～　のエラーを解決したい

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

##  状況
現在、Angularチュートリアル等でフォームについて学習している初学者です。
constructorとngOnInitの違いについて、なかなか腑に落ちないので、アドバイスいただければ幸いです。

## やろうとしていること
こちらのリンクのカスタムバリデーションを自分のローカル環境でも実装してみました。
[https://stackblitz.com/edit/angular-u1a86m?file=src%2Fapp%2Fapp.component.ts](https://stackblitz.com/edit/angular-u1a86m?file=src%2Fapp%2Fapp.component.ts)

とりあえず、完コピしてみたのですが、`Property 'form' has no initializer and is not definitely assigned in the constructor.`というエラーが出てしまいます。

コンストラクターで初期化出来ていないというエラーだと思い、`ngOnInit()`に書かれている処理を全て`constructor`に移動しました。そうすると、問題なく動作し、上記リンクとstackblitzと同じ挙動で動いています。
### コード
```typescript
// test.component.ts
import { Component, OnInit } from '@angular/core';
import {
  FormGroup,
  FormControl,
  FormBuilder,
  Validators,
  AbstractControl,
} from '@angular/forms';
@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss'],
})
export class TestComponent implements OnInit {
  form: FormGroup;

  constructor(private _fb: FormBuilder) {
    this.form = this._buildForm();
  }

  ngOnInit() {
    // this.form = this._buildForm(); stackblitzはここで初期化している。
  }

  submit(form: FormGroup) {
    console.log(form);
  }

  get phonenumber() {
    return <FormControl>this.form.get('phonenumber');
  }

  private _buildForm(): FormGroup {
    return this._fb.group({
      phonenumber: ['', [Validators.required, parseToNumberValidator]],
    });
  }
}
function parseToNumberValidator(formControl: AbstractControl) {
  const val = formControl.value;
  return isNaN(Number(val)) ? { parseToNumberValidator: true } : null;
}

```

```typescript
// test.component.ts
<p>Start editing to see some magic happen :)</p>
<form [formGroup]="form" (submit)="submit(form)">
  <div>
    <label>
      phone number
      <input type="text" formControlName="phonenumber" *ngIf="phonenumber" />
    </label>
    <ng-container
      *ngIf="phonenumber.invalid && (phonenumber.touched || phonenumber.dirty)"
    >
      <p *ngIf="phonenumber.hasError('required')">必須項目です</p>
      <p *ngIf="phonenumber.hasError('parseToNumberValidator')">半角数字のみ</p>
    </ng-container>
  </div>
  <div>
    <button type="submit">send</button>
  </div>
</form>

```


## わからないこと
・なぜ、上記リンクのstackblitzはconstructorで初期化していないのにエラーがでないのか。
（自分のローカル環境だけエラーになるのはなぜか）
・ngOnInitとconstructorをどう使い分けたらよいかわからない。


環境的な要素が原因で、エラーとなっているのでしょうか。
ng newで新規プロジェクトを作成し、同様のことをしてもやはり同じ状況になってしまいます。
どういったところに原因がありそうか、アドバイス頂けると幸いです。
(teratail内で似たような質問をしてしまっています…すみません…)

【Angular】constructorとngOnInitの違いについて(初期化エラー)

###前提
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(
    処理
   );
  }

}
```