I've a few classes I want to be just a plain bean/DTO class, they aren't display @ponent 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 piles 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/mon';
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;
}

I've a few classes I want to be just a plain bean/DTO class, they aren't display @ponent 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 piles 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/mon';
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;
}

• javascript
• angular
• typescript
• angular-module

• 2 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 ponents, directives, and pipes, hence the error you are seeing. – DeborahK Commented Sep 15, 2017 at 18:53

1 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 ponents, directives, etc.. Simply import it in whichever ponent/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";