Error

[Solved] Error TS2305: Module ‘”{FilePath}/app.component”’ Has No Exported Member ‘ErrorseaFilter’ in Angular CLI

Hey Angular geek, if you are also having Error TS2305: Module ‘”{FilePath}/app.component”’ Has No Exported Member ‘ErrorseaFilter’ or similar error in Angular with different class name, you are at the perfect place to find the solution.

Index

Toggle

Error TS2305: Module Has No Exported Member

Error Situation

I was developing a mini project in Angular 9; at that time, I faced this error ts2305: Module ‘”C:/xampp/htdocs/errorsea/src/app/app.component”‘ has no exported member ‘ErrorseaFilter’. My code was as embed below.

app.component.ts File

import { Component } from '@angular/core';
import { ConstantsService } from './common/services/constants.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  /* app implementation*/}

export class MyFilter {
  /* filter logic */}

my-page.component.ts File

import { Component, OnInit } from '@angular/core';

/* import Other modules */
import {ErrorseaFilter} from '{FilePath}/app.component';

@Component({
  selector: 'my-page',
  templateUrl: './my-page.component.html',
  styleUrls: ['./my-page.component.css']
})

export class MyPageComponent implements OnInit {

  constructor() {
    /* constructor logic */  }

  ngOnInit(): void {
    /* init logic */  }

  /* other logic*/
}

When Error TS2305 Occurs?

The error ts2305 is a TypeScript error, generally occurs in Angular while importing modules/classes.

The usual reason behind the error2305: Module Has No Exported Member is the missing export class in your component file that you try to import in other “component.ts” file.

In simple language, the compiler can not find your imported class as an export class at your specified component.ts file destination.

Solution

I was trying to import the ‘ErrorseaFilter’ class that I have written at the app.component.ts file to the my-page.component.ts file, which was generating an error.

After checking my app.component.ts file carefully, I found that I was trying to import the wrong class that does not exist in my app.component.ts file.

I actually implemented the filter class with the name ‘MyFilter’ rather than ‘ErrorseaFilter’. I renamed my class name from ‘MyFilter’ to ‘ErrorseaFilter,’ which I needed to resolve the issue.

My updated code is as embed below.

app.component.ts File

import { Component } from '@angular/core';
import { ConstantsService } from './common/services/constants.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  /* app implementation*/}

export class ErrorseaFilter {
  /* filter logic */}

my-page.component.ts File

import { Component, OnInit } from '@angular/core';

/* import Other modules */
import {ErrorseaFilter} from '{Filepath}/app.component';

@Component({
  selector: 'my-page',
  templateUrl: './my-page.component.html',
  styleUrls: ['./my-page.component.css']
})

export class MyPageComponent implements OnInit {

  constructor() {
    /* constructor logic */  }

  ngOnInit(): void {
    /* init logic */  }

  /* other logic*/
}

The other solution I could apply is to import the correct class name ‘MyFilter’ at my-page.component.ts

Points To Check for Solution in Your Code

Ensure that the class you are trying to import is available as an export class in the source file.
Check for a spelling mistake in class name because class names are case sensitive in Angular.
Also, check for the source file path at the ‘import …’ line just in case for the wrong path.
Worst case: Make sure all files are saved before running/debugging. Running files without saving can cause lots of errors.