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

angular typescript enums

17,581

Solution 1

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!

Solution 2

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

Solution 3

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.

17,581

Author by

Isabelle Plante

Updated on June 14, 2022

Comments

Isabelle Plante almost 2 years

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!

peinearydevelopment almost 6 years

what's in ./server-messages.component.html?
Ritwick Dey almost 6 years

Please check the server-messages.component.ts. You've wrong import statement.
Isabelle Plante almost 6 years

@RitwickDey How? I must be blind.
Ritwick Dey almost 6 years

You didn't share your messages.component.ts... You shared 'ServerMessageComponent.ts' .... Is this your mistake on stackoverflow?
Isabelle Plante almost 6 years

@RitwickDey whoops, what I named ServerMessageComponent.ts is actually server-message-component.ts
Bert Verhees almost 6 years

Possible duplicate of Angular 2 : export component on a module and import and use it inside a module
Ritwick Dey almost 6 years

Nope. It is not duplicate. It is unrelated to Angular component or module. She is just using enum - language feature.
Ritwick Dey almost 6 years

It is realy confusing. Can you tell me all the files name in projects/framework/src/lib/server-messages/ @IsabellePlante
peinearydevelopment almost 6 years

Are you using the ServerMessageType enum in your html temlplate at all?

Isabelle Plante almost 6 years

Thanks! Could you please explain a bit better with examples? I don't think I follow.
Bert Verhees almost 6 years

It is explained here: stackoverflow.com/questions/41960959/…