[angular 4 / typescript ]import component path not reconized. But seems valid and should work

Question

I am building a router component in angular and typescript.

observe my current project structure below.

Lets focus on the landingPageComponent

observe by the image that my path to the component is valid but is not recognized.

my code in my landingpageComponent.ts file:

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


@Component({
  selector: 'app-landing-page',
  templateUrl: './landingpage.component.html',
  styleUrls: ['./landingpage.component.css']
})
export class LandingPageComponent implements OnInit {
  @ViewChild('f')citySubmit : NgForm;

  cities:string[]=['Chicago', 'New Mexico', 'London'];

  ngOnInit() {
  }

}

the proper imports are done in the app.module.ts file without error. Meaning the path is recognized.

I am hoping I am just making a silly mistake somewhere

Thank you.

Answer 1

In your app.routing.module.ts it should be,

import { LandingPageComponent } from './landingpage/landingpage.component';
import { HowItWorksComponent } from './howitworks/howitworks.component'