【Angular】ExpressとAngularの連携

APIくんと仲良くなりたいッ…

expressとAngularの開発環境構築の流れを簡単にまとめました。
親フォルダの下にserverフォルダとangularのweb-appフォルダを作成していきます。

#server

```
mkdir server
cd server
npm init
npm install express
npm install -D @types/express
```

保存したときに素早く確認したいのでts-node-devを導入します。
変更を保存したらリロードするだけで反映されるようになります。

```
npm install typescript
npm install -D ts-node-dev
```

package.jsonのscriptsにdevを追加します。

```
  "scripts": {
    "dev": "ts-node-dev --respawn src/index.ts",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
```

tsconfig.jsonを作ります

```
tsc --init
```

index.tsを作っていきます
tsc: command not foundと言われたら
npm i -g typescriptを実行してもう一度。


```
mkdir src
touch src/index.ts
```

##src/index.ts
```ts
import Express from "express";

const app = Express();
const port = 3000;

app.get('/',(req,res)=>{
    res.send('こんにちは');
});

app.listen(port,()=>{
    console.log(`Express app listening at http://localhost:${port}/`)
});
```

実行

```
npm run dev
```
![スクリーンショット 2021-03-14 14.13.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607742/b71ba5cc-2b80-d1ee-479e-b651db40dd76.png)
localhost:3000にアクセスするとちゃんと表示されました。

Angularプロジェクトと連携させていきます
親フォルダ直下で

```
 ng new web-app
 cd web-app
 touch proxy.conf.json
```

##proxy.conf.json

```
{
    "/api":{
        "target":"http://localhost:3000"
    }
}
```

##angular.json

```
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "web-app:build",
            "proxyConfig": "proxy.conf.json" //追加
          },
```

##server/src/index.ts
サーバー側にapiを作ります

```ts
app.get('/api',(req,res)=>{
    res.header('Content-Type', 'application/json; charset=utf-8');
    res.json({message:"こんにちは"});
});
```


##app.module.ts
app.module.tsにHttpClientModuleを読み込みます

```ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule // 追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

```

apiのサービスを作ります

```
ng g service service/api
```

##service/api.service.ts

```ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private http:HttpClient) { }

  get hello$(){
    return this.http.get<Hello>('api/');
  }
}

export interface Hello{
  message:string;
}
```



##app.component.ts
server側にgetを投げます

```ts
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { ApiService, Hello } from './service/api.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'web-app';
  hello:Observable<Hello>;


  constructor(private api:ApiService){}

  ngOnInit(){
    this.hello = this.api.hello$;
  }
}
```
##app.component.html

```html
<p *ngIf="hello|async as h">{{h.message}}</p>
```

実行

```
ng serve --open
```

localhost:4200にアクセスすると、server側でsendしたメッセージがangularのwebアプリ上で表示できました。
※ npm run dev でサーバー側も同時に動かしている必要があります。