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)

Nr	Link
1	Create meeting
2	Create Tests
3	Finalize Create meeting
4	Sharing meeting
5	Keep Score
6	Add obsolete
7	Finalizing obsolete
8	End meeting
9	Dockerize tests
10	Azure CI tests
11	Yarn workspaces
12	CLI
13	Intermezzo - CLI improvements
14	typescript compile run with node
15	NestJS ,swagger and create a meeting
16	Finalizing API
17	Intermezzo - jest vs jasmine error
18	Refactor WebAPI and test service
19	Heroku Deploy NestJs
20	Angular
21	Deploy Angular to GitHub
22	WebAPI and Web
23	Documentation
24	Documentation of the code
25	Conclusions

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/