Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How should I include model classes in an Angular module?

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;
}
like image 410
DaFoot Avatar asked Sep 15 '17 18:09

DaFoot


People also ask

What classes should I add to declaration in Angular?

What classes should I add to module's declarations? We can add the declarable classes like components, directives and pipes in the module's declarations list and we can add only - components, directives and pipes classes in the @NgModule.

What should be imported BrowserModule or CommonModule?

Only root application module, AppModule , should import BrowserModule and all other feature module should import CommonModule because we only need the Angular directives in feature module and not the services that are required to launch the app(Which are already available in RootModule).

Where do I put Angular modules?

While it is common in HTML applications to place scripts at the end of the <body> element, it is recommended that you load the AngularJS library either in the <head> or at the start of the <body> . This is because calls to angular. module can only be compiled after the library has been loaded.


1 Answers

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";
like image 165
Vega Avatar answered Oct 15 '22 11:10

Vega