How should I include model classes in an Angular module?

DaFoot picture DaFoot · Sep 15, 2017 · Viewed 8.2k times · Source

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;
}

Answer

Vega picture Vega · Sep 15, 2017

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";