Without a doubt, we want to reuse as much code as possible in our new and awesome Angular application! The good news is that we can, and, as you'll see, it is really straightforward. It wouldn't be the case for just any project, but the fact is that our code is already written in TypeScript, uses modules, and is pretty well-structured.

We will now create an Angular module called shared. We will use it to store elements that can be reused across the application. In this shared module, we will store our generic domain model classes, services, and more. Obviously, this module will contain everything about Media.

Open up a Terminal and go to the application's src/app folder. Then, create the new module using the following command:

ng generate module shared

Let's start by migrating the Genre enum from MediaMan v1, as we will require it soon. We will put it inside our newly created shared module.

At this point, the shared module's folder only contains the module definition (that is, the shared.module.ts file).

Before you continue, make sure to use the cd command to get into the shared folder.

To gain some time, let's use the CLI to generate the enum for us:

ng generate enum enums/genre

Here is the expected output:

CREATE src/app/shared/enums/genre.enum.ts (22 bytes)

Next, let's edit this file and copy the content of the previous implementation we had for our enum, Genre:

export enum Genre { 
  Horror = 'Horror', 
  Fantastic = 'Fantastic', 
  Thriller = 'Thriller', 
  Romance = 'Romance', 
  Fiction = 'Fiction' 
} 

A pattern that we've also applied here and that we'll try to use consistently across the application is to limit each file to one concept. We won't be putting anything other than the Genre enum in this file. This is related to the LIFT pattern that we mentioned before: the filename clearly indicates what it contains.

Before creating our next class, we need to import the reflect polyfill. This polyfill is required by class-transformer.

We need to open the src/polyfills.ts file and add the following import:

import 'core-js/es/reflect'; 

Let's continue the migration with our abstract Media class.

First, still from the src/app/shared folder, create the skeleton using the following:

ng generate class entities/abstract-media --type="entity"

Then, copy the content of the following file from this book's sample code: Chapter08/mediaman-v2/src/app/shared/entities/abstract-media.entity.ts. This is a copy of the previous implementation.

Now, we can migrate to our MediaCollection class. Again, create the file with the CLI:

ng g class entities/media-collection --type="entity"

Now, replace the generated code with the contents of this file: Chapter08/mediaman-v2/src/app/shared/entities/media-collection.entity.ts.

Next up is the MediaService class. Generate the TypeScript file using the CLI:

ng g class services/abstract-media.service

Once again, replace the generated code with the previous implementation, located here in the code sample: Chapter08/mediaman-v2/src/app/shared/services/abstract-media.service.ts.

So far, we haven't modified anything from our previous code, apart from splitting the content up in multiple files.

Great, our shared module is ready!