Game Development — Tambola using Angular 8: Part 2

In this article, we’ll continue with the Tambola / BINGO game development using Angular library (Angular 8).

In Part 1, we completed the integration of Angular Library with the application. We’ll identify the library components required for the game and how these can be created and integrated in the application. We’ll also cover how angular library works and its requirements.

Components of the final game

As identified above, we have identified 5 child components under the parent Tambola component which may or may not increase later. These component will integrate with each other using services have distinct responsibilities related to data generation or storage.

Let’s start creating above components in out Library project.

ng g c components/board --project=TambolaLib
ng g c components/numbers --project=TambolaLib
ng g c components/games --project=TambolaLib
ng g c components/players --project=TambolaLib
ng g c components/winners --project=TambolaLib

Above command will create 5 components in the Library project.

Now create a new file named tambola-lib.component.html to integrate above components in the library. Update tambola-lib.component.ts to refer to the new html file as templateurl in the @component section of the file.

tambola-lib.component.ts

Now update code in tambola-lib.component.html to below

<rm-board></rm-board>
<rm-numbers></rm-numbers>
<rm-games></rm-games>
<rm-players></rm-players>
<rm-winners></rm-winners>

Now lets clean the app.component.html in Games project to store only the route-outlet so that it looks like this:

app.component.html

Now lets execute the project by running below command. ‘serve:lib’ script was earlier added to the package.json in ‘Part 1’ article in the series:

npm run serve:lib

Output of the application

As you can see above, all the components created in the library are now available in the application via the parent component exported from the library. Now lets try to understand how the components are exported from the library. As part of the base project created by executing command to create a library few files are created which exports the default module, component and service from the library.

This definition is provided in public-api.ts file.

public-api.ts

As you can see in the file, we are exporting the default service, component and module for the importing application to reference and use.

Another file which is very important in the Library project is ‘ng-package.json’.

ng-package.json

This file is responsible for the packaging of the library so that it can be imported by other applications. In this file, we define the entry file for the library when referenced by another application and the destination path for the compiled library. We have to declare all the library dependencies i nthe ng-packagr and in package.json. This will be cover later.

When a Library project is created 2 additional packages are added in the package.json listed below.

ng-packagr
tsickle

‘ng-packagr’ is responsible for packaging the angular library project whereas ‘Tsickle’ converts typeScript code into a form acceptable to the Closure Compiler.

In this article, we have covered below:

1. Identify and create unique components of the game
2. Integrate components in the the parent component which is exported from the library
3. Learn how the exporting of components work in a library project
4. Use of public-api.ts and ng-package.json
5. Additional packages required for the library project and it’s use

In the next article, we’ll start creating services which are responsible for data sharing and integrating the components.

Please share your comments/feedback for further improvement and articles.

Part 3 is now published. Please share your comments/feedback.