Bingo for meetings-build an Angular app-part 20

Bingo

Bingo is a small project, written in TypeScript , and developed with Alexandru Badita in launch break (one hour - more or less). You can find sources at https://github.com/alexandru360/PresentationBingoCards/ . Those are my blog posts for Bingo : ( scroll below for the post)

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 ).

?
1
2
3
4
5
6
export class CreateMeeting  {
  @ApiModelProperty()
  userName: string;
  @ApiModelProperty()
  meetingName: string;
}

So I ended creating an interface ICreateMeeting with the same definition

?
01
02
03
04
05
06
07
08
09
10
export interface ICreateMeeting{
    userName: string;
    meetingName: string;
}
export class CreateMeeting implements ICreateMeeting {
  @ApiModelProperty()
  userName: string;
  @ApiModelProperty()
  meetingName: string;
}

and using in ReactiveForms as

?
1
2
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

?
1
2
3
4
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

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

?
1
2
3
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

?
1
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/