Angular Modules not recognizing imported modules

Question

I am trying to import a module into a home-page module, but it is throwing a TypeScript error stating that it cannot find the module despite the fact that it is defined. This is the terminal error -

ERROR in src/app/home-page/home-page.module.ts(11,5): error TS2304: Cannot find name 'UtilityComponentModule'.

My UtilityComponentModule is set up-

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ModalWindowComponent } from './modal-window/modal-window.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    ModalWindowComponent
  ],
  exports: [
    ModalWindowComponent
  ]
})
export class UtilityComponentModule { }

And the module I'm attempting to import it into is set up as -

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomePageControllerComponent } from './home-page-controller/home-page-controller.component';
import { LanguageBarComponent } from './language-bar/language-bar.component';
import { SnippetAdderComponent } from './snippet-adder/snippet-adder.component';
import { SnippetCardComponent } from './snippet-card/snippet-card.component';

@NgModule({
  imports: [
    CommonModule,
    UtilityComponentModule
  ],
  declarations: [
    HomePageControllerComponent,
    LanguageBarComponent,
    SnippetAdderComponent,
    SnippetCardComponent
  ],
  exports: [
    HomePageControllerComponent
  ]
})
export class HomePageModule { }

Completely blindsided as to what could be causing this error.

Thank you in advance for any suggestions or direction you have.

Cheers!

Where exactly did you import it in your HomePageModule ? You might want to add something like import { UtilityComponentModule } from 'path-to-the-module' — SiddAjmera
– SiddAjmera, Commented Oct 5, 2018 at 18:25
This was exactly what I needed to do, but I was trying with just the ./path and had to actually go as far as src/app/path. Thank you for taking the time to answer this question! — RyanIndustries8
– RyanIndustries8, Commented Oct 5, 2018 at 18:54

Diogo Santos · Accepted Answer · 2018-10-05 18:26:24Z

1

You need to add it to the import list, in the top of your second file as

import { UtilityComponentModule } from 'your path';

answered Oct 5, 2018 at 18:26

Diogo Santos

8288 silver badges23 bronze badges

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

3 Comments

RyanIndustries8 Over a year ago

After adding the module to the second file I received another error- ERROR in ./src/app/home-page/home-page.module.ts Module not found: Error: Can't resolve './utility-component/utility-component.module' in '/Users/jbyron/Desktop/code-snip/src/app/home-page' ℹ ｢wdm｣: Failed to compile. ERROR in src/app/home-page/home-page.module.ts(3,40): error TS2307: Cannot find module './utility-component/utility-component.module'.

RyanIndustries8 Over a year ago

I figured it out. This just seems so obvious and I had tried your recommendation and was getting the error I posted above. I wasn't able to use the ./path and I had to actually type out the src/app/path. I have it up and working. Thank you for taking the time to answer this question!

Diogo Santos Over a year ago

Using ./foo means that you are refering foo that is in your current folder. If you need to go back a folder you need ../. Don't know if that is the case :)

Collectives™ on Stack Overflow

Angular Modules not recognizing imported modules

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related