0

I'm using Stackblitz to practice angularJS and it's coming up with an error when I attempt to import a component in the app.module.ts file.

Import error, can't find file:
./heroes/heroes.component

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { HeroesComponent } from './heroes/heroes.component';

https://stackblitz.com/edit/angular-akxx4e?file=src%2Fapp%2Fapp.module.ts

Blank
  • 155
  • 4
  • 16

2 Answers2

2

Update below Changes, because it's in different folder

import { HeroesComponent } from '../heroes/heroes.component';
Hiren Vaghasiya
  • 5,454
  • 1
  • 11
  • 25
0

Method 1

This issue occurs due to component creation inside wrong location. So heroes component should be created inside app root. This is the recommended answer.

Method 2

Correcting component's relative path is also works. But it is not the correct answer.

import { HeroesComponent } from '../heroes/heroes.component';
VSM
  • 1,765
  • 8
  • 18
  • 1
    Method 2 is the answer most suited to what I need as I should be able to import files from other directories I would think, and not be limited to putting all files in the same directory. I was aware of Method 1 as a solution but it's not what I wanted to do. – Blank Nov 19 '19 at 10:14
  • It's my pleasure :) – VSM Nov 19 '19 at 10:23