Angular Karma getting Module not found: Error: Can't resolve

Question

I have a large Angular App that works fine. (v20 if it matters)

I recently added a new service to my App.Component, and now I'm getting the following error. ONLY in Karma, the service works as expected when running my app locally, and deployed to Production.

And this same service passes unit tests in it's own SPEC file, it just caused the App.Component.spec.ts to blow up. I'm sure it's due to some kind of DI issue, but I don't know what.

./src/app/app.component.ts:1206:0-92 - Error: Module not found: Error: Can't resolve './services/mapOffers/mapOffers.component.js' in 'c:\Source\Project\src\app'

I really have no idea how to even trouble shoot this since it works perfect outside of Karma. The 'MapOffers' service does nothing more than an API call to get a set of data. But I'm mocking (see below) so it's not even doing anything.

Here's the top of App.Component: (note, I'm not even consuming the service here. Just injecting it is causing this). Keep in mind, it works perfect in normal mode, and it's even in production this way working perfect.

import { MapOffers } from './services/mapOffers/mapOffers.component.js';
//#endregion

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    standalone: false
})
export class AppComponent implements OnInit {
  private _router = inject(Router);
  private _mapOffers = inject(MapOffers);

The constructor for MapOffers is as follows. This module is in App.Module It's also mocked in App.Component

@Injectable({
  providedIn: "root",
})
export class MapOffers {

In the spec file, I am mocking it as follows:

describe(AppComponent.name, () => {
  beforeEach(async () => {
    const mockMapsffers: Partial<MapOffers> = {};
    const mockHttpHandler: Partial<HttpHandler> = {};
    const mockHttpClient: Partial<HttpClient> = {};
    await TestBed.configureTestingModule({
      imports: [
        RouterModule.forRoot([])
      ],
      providers: [
        { provide: MapOffers, useValue: mockMapOffers},
        { provide: HttpHandler, useValue: mockHttpHandler},
        { provide: HttpClient, useValue: mockHttpClient},
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  });

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });
});

Naren Murali · Accepted Answer · 2025-11-06 11:45:32Z

1

The first problem I see is why are you using js instead of ts file. Rename the file to ts since typescript files are picked up by the Angular compiler, which could be the problem.

Services should be .service.ts instead of .component.ts, so update the import to:

import { MapOffers } from './services/mapOffers/mapOffers.service';

Also there is no need to mention the extension in the import, so it should be:

import { MapOffers } from './services/mapOffers/mapOffers.service';
//#endregion
...

...
@Component({
  ...

answered Nov 6 at 11:45

Naren Murali

66.2k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brian Kitt Nov 7 at 0:39

Oh, crap! How did that .JS get into the path!!!! Wow. That was a huge mistake on my part. Thank you soo much, that really was just the issue.

Collectives™ on Stack Overflow

Angular Karma getting Module not found: Error: Can't resolve

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related