CODEWITHSUNDEEP
angulartypescriptenums
Isabelle Plante
Isabelle Plante

Reputation: 518

Angular 6 with plain TypeScript - ERROR: module has no exported member

I have a small Angular 6 library in which I am building a reusable component to display page-level messages, such as error, info, warning, and success.

For this I have an enum ServerMessageType.ts, which is simple enough:

export enum ServerMessageType {
    Error = 'error',
    Info = 'info',
    Success = 'success',
    Warning = 'warning'
}

ServerMessage.ts should use ServerMessageType:

import { ServerMessageType } from './ServerMessageType';

export class ServerMessage {
    constructor(public type: ServerMessageType, 
                public messageText: string, 
                public dismissible?: boolean, 
                public id?: string) {
    }
}

server-messages.component.ts

import { Component, EventEmitter, Input, Output } from '@angular/core';

import { ServerMessage } from './ServerMessage';
import { ServerMessageType } from './ServerMessageType';

    @Component({
  selector: 'app-server-messages',
  templateUrl: './server-messages.component.html',
  styleUrls: []
})
export class ServerMessagesComponent {

  @Input() messages: ServerMessage[];
  @Output() messageRemoved = new EventEmitter<ServerMessage>();

  constructor() {
  }

  clearMessage = function (index: number) {
    const message = this.messages[ index ];

    this.messageRemoved.emit(message);
    this.messages.splice(index, 1);
  };

  getMessageClass(message: ServerMessage): string {
    switch (message.type) {
      case ServerMessageType.Error:
        return 'alert-danger';
      case ServerMessageType.Info:
        return 'alert-info';
      case ServerMessageType.Success:
        return 'alert-success';
      case ServerMessageType.Warning:
        return 'alert-warning';
    }
  }

  isDismissible(message: ServerMessage): boolean {
    return message.dismissible === true;
  }
}

However, when I run ng build, I get an error:

BUILD ERROR  
> projects/framework/src/lib/server-messages/server-messages.component.ts(3,28):
> error TS2305: Module
> '"/Users/xxx/dev/apps/framework/projects/framework/src/lib/server-messages/ServerMessage"'
> has no exported member 'ServerMessageType'

What am I doing wrong? If I change type in ServerMessage to be a string and remove the ServerMessageType enum altogether, things build and deploy just fine.

Thanks!

Upvotes: 2

Views: 18401

Answers (3)

Isabelle Plante
Isabelle Plante

Reputation: 518

Stupid mistake!

In server-messages.component.ts, these two lines:

import { ServerMessage } from './ServerMessage';
import { ServerMessageType } from './ServerMessageType';

Had been reverted to 

import { ServerMessage, ServerMessageType } from './ServerMessage';

Thanks for your help! It couldn't find ServerMessageType in ServerMessage.ts, since it's exported in ServerMessageType.ts...

Thanks all for your help!

Upvotes: 0

Bert Verhees
Bert Verhees

Reputation: 1063

You need to explicitly export a component from a module if you want to import that component by importing that module.

The code in which you must solve this problem is the module-code from which you want to export that component.

Upvotes: 1

mittal bhatt
mittal bhatt

Reputation: 1009

You need to import your component in your root module and when you make service than make it @Injectable than use.

Upvotes: 2

Related Questions