在Stackblitz中向app.module.ts添加组件时出现导入错误

Hey there, let's work through this import error you're hitting! I've run into similar snags in Stackblitz before, so here are the most common fixes to try:

1. Double-check your file structure & naming #

First, make sure the file actually exists where you're pointing to. In your Stackblitz project, you need to have:

• A heroes folder inside src/app/
• A heroes.component.ts file inside that heroes folder

Stackblitz is case-sensitive, so watch out for tiny typos:

• Did you name the file Heroes.component.ts (capital H) instead of heroes.component.ts?
• Is the folder named hero instead of heroes?

2. Verify the component is exported correctly #

Even if the file exists, if you didn't export the component class, Angular won't be able to find it. Open your heroes.component.ts and make sure it has this core structure:

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

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html', // Also double-check these paths if you add template/style files
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent {
  // Your component logic here
}

The critical line is export class HeroesComponent — without that export, the import in app.module.ts will fail every time.

3. Refresh to clear Stackblitz cache #

Occasionally Stackblitz's file system gets glitchy with cached data. Try reloading the page, or even delete and re-create the heroes folder/component files if the above steps don't work.

Quick check against your code #

Looking at your app.module.ts import line:

import { HeroesComponent } from './heroes/heroes.component';

This path translates directly to src/app/heroes/heroes.component.ts — so confirm that exact file shows up in your project's file explorer on the left side of the Stackblitz interface.

内容的提问来源于stack exchange，提问作者Blank