Angular 6, Cannot import component into routing.module

Question

This is my file structure:

My app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SearchFormComponent } from './components/search-form/search-form.component';
import { QueryDisplayComponent } from './components/query-display/query-display.component';
import { HttpClientModule } from '@angular/common/http';


@NgModule({
  declarations: [
    AppComponent,
    SearchFormComponent,
    QueryDisplayComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule
  ],
  exports:[],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

'' app.component.html

<div style="text-align:center">
  <h1>
    Places Search
  </h1>
</div>


<router-outlet></router-outlet>

the component im trying to display when the route is hit

import { Component, OnInit } from '@angular/core';
// import { Place } from '../../place'
import { GetReqPlaces } from '../../services/get-req-places.service'
import { Router } from '@angular/router'


@Component({
  selector: 'app-search-form',
  templateUrl: './search-form.component.html',
  styleUrls: ['./search-form.component.css']
})
export class SearchFormComponent implements OnInit {

  constructor(private getPlaces: GetReqPlaces, private router: Router) { }

  westLong: number;
  eastLong: number;
  northLat: number;
  southLat: number;

  // log(x){console.log(x)}
  onSubmit(form){

  this.westLong = form.value.wLong; // 
  this.eastLong = form.value.eLong; // 
  this.northLat = form.value.nLat; // 
  this.southLat = form.value.sLat; // 
    console.log(this.getPlaces.getPlaces(this.westLong,this.southLat,this.eastLong,this.northLat))
  }

}

'' routing module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent} from './app.component'
import { SearchFormComponent} from '../components/search-form.component'


const routes: Routes = [

  { path: 'search', component: SearchFormComponent },


];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

the error code is as follows in VScode:

"message": "Cannot find module '../components/search-form.component'."

and

"ERROR in src/app/app-routing.module.ts(4,36): error TS2307: Cannot find module '../components/search-form.component'."

in the angular cli when i try to serve the app.

Im kind of at my wits end, im able to import AppComponent, but why is router module not recognizing the SearchFormComponent? 4 hours into this i feel like its at the tip of my fingers but I feel like i dug myself into a black hole. Thank you for your help and patience, new to Angular and loving it... despite what this post may represent haha. I'd love to get over this bump and start working on the backend.

since routing module is in the same folder of app module u can import like this import { SearchFormComponent } from './components/search-form/search-form.component'; — Hari
– Hari, Commented Feb 23, 2019 at 5:56
I was not allowed by StackOverflow. My account is not credible enough to post images yet. — ManBearPig
– ManBearPig, Commented Feb 23, 2019 at 5:57
@N.HariHaraSudhan yes thank you, it was not just that but also i missed a folder in the path, coding an entire day and not seeing the sun causes lapses in short-term memory... thank you to everyone who jumped to my help despite how simple this problem turned out to be, much love! — ManBearPig
– ManBearPig, Commented Feb 23, 2019 at 6:03

Ritwick Dey · Accepted Answer · 2019-02-23 05:56:49Z

1

try

import { SearchFormComponent} from './components/search-form.component'

Not ../ , it's ./ as components folder & routing file is under same level of folder structure

answered Feb 23, 2019 at 5:56

Ritwick Dey

19.1k4 gold badges27 silver badges38 bronze badges

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

3 Comments

ManBearPig Over a year ago

Also './components/search-form/search-form.component' i forgot the .../search-form/... file path, thanks Ritwick!

Ritwick Dey Over a year ago

That worked ? Feel free to accept/upvote answer if that worked

ManBearPig Over a year ago

had to give it to @N.HariHaraSudhan for being there first, i was banging my head reading the routing docs over and over, at least i learned things for the future haha :D, gave ya an upvote though!

Hari · Accepted Answer · 2019-02-23 05:57:29Z

1

Since routing module is in the same folder of app module u can import like this

import { SearchFormComponent } from './components/search-form/search-form.component'

answered Feb 23, 2019 at 5:57

Hari

1,6231 gold badge25 silver badges48 bronze badges

Collectives™ on Stack Overflow

Angular 6, Cannot import component into routing.module

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related