Bingo for meetings-build an Angular app-part 20

Now it is time to create some Angular GUI. ( If you want to learn Angular,please visit https://angular.io/ )

Problems encountered:

1. The CreateMeeting did not compile (ng serve ) the CreateMeeting class ( because of the nestjs Swagger  decorators ).

export class CreateMeeting  {
  @ApiModelProperty()
  userName: string;
  @ApiModelProperty()
  meetingName: string;
}

So I ended creating an interface ICreateMeeting with the same definition

export interface ICreateMeeting{
    userName: string;
    meetingName: string;
}
export class CreateMeeting implements ICreateMeeting {
  @ApiModelProperty()
  userName: string;
  @ApiModelProperty()
  meetingName: string;
}

and using in ReactiveForms as

 const c: ICreateMeeting = {userName: '',meetingName: ''};
 this.createMeetingForm = this.formBuilder.group(c);

Also,because the interface have the same signature as the class,we can use to POST data

public SaveMeeting(create: ICreateMeeting): Observable<Meeting> {
    const url: string = this.urlApi + 'meetings';
    return this.httpAPI.post<Meeting>(url,create);
  }

2. We should call WebAPI as http if the site is http and https if the site is https.  The problem is that the URL is hardCoded

private urlApi = 'http://bingo-meeting-api.herokuapp.com/';

We can have to inject the document to obtain the  doc.location.protocol

  constructor(@Inject(DOCUMENT)private doc: Document,private httpAPI: HttpClient) {
     this.protocol = doc.location.protocol;
  }

but we remember there is a better way with //,that means respecting the protocol

  private urlApi = '//bingo-meeting-api.herokuapp.com/';

3. TypeScript – ng build works,but ng build –prod –build-optimizer gives an obscure error.
The solving was to add in the tsconfig.json
“noUnusedLocals”: true,
“noUnusedParameters”: false,

and solve unused declarations.

You can find the results at https://alexandru360.github.io/PresentationBingoCards/