How should I include model classes in an Angular module?

Question

I've a few classes I want to be just a plain bean/DTO class, they aren't display @component classes, they're not @Pipe classes nor should they be @Directive (at least I don't think it should be!).

I want to be able to bundle them into a module (they will be used across other modules), but despite several incantations I keep getting errors like this:

When I startup my Angular app (ng serve) it compiles ok, but in the browser (Chrome) console I get an error....

Uncaught Error: Unexpected value 'Accreditation' declared by the module 'ServiceModule'. Please add a @Pipe/@Directive/@Component annotation.

How should I be bundling these classes into a Module for use by other Modules? I don't mind if they are in my service module or in another new 'beans' modules.

Given this module definition (service.module.ts):

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {MemberService} from "./member/member.service";
import { Accreditation } from "./accreditation";
import {Player} from "./player";
import {Club} from "./club";
import {Coach} from "./coach";

@NgModule({
  imports: [CommonModule],
  declarations: [Accreditation, Club, Player, Coach],
  exports: [Accreditation, Club, Player, Coach],
  providers: [MemberService]
})
export class ServiceModule { }

accreditation.ts:

export class Accreditation {
    uuid: string;
    name :string;
    lastComplete: Date;
    expires: Date;
    inLast6Months: boolean;
    type: String;
    displayName: String;
    hasCompleted: boolean;
}

Jankell

Basic DTO's are not Angular things and therefore don't belong in an Angular module. You can't add them to the declarations array. The declarations array is only for components, directives, and pipes, hence the error you are seeing. – Kant

Answer 1

You don't need to import neither declare your DTOs in app.module.ts. It's available for a direct import in your components, directives, etc.. Simply import it in whichever component/service/directive,pipes you need with other imports:

import { Accreditation } from "./accreditation";

If you wish to share your DTO among several modules, put it in a shared folder and access it with a relative path, i.e.

import { Accreditation } from "./shared/accreditation";

Satchel