Angular child module not seeing classes from parent module

Question

I have an angular recipe module. It declares and exports a recipe component.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RecipeComponent } from './recipe/recipe.component';

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

The recipe module structure also contains a recipes (plural) page which is going to list multiple recipe. However, when I put the recipe component inside of the recipes page html markup, I get an error

core.js:15724 ERROR Error: Uncaught (in promise): Error: Template parse errors:
'app-recipe' is not a known element:
1. If 'app-recipe' is an Angular component, then verify that it is part of this module.
2. If 'app-recipe' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<ion-content>

Unless I include the RecipeModule in the imports of recipes.module inside of the page subdirectory (commented out lines generate the error, uncommenting them makes the error go away)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
//import { RecipeModule } from '../../recipe/recipe.module';

import { IonicModule } from '@ionic/angular';

import { RecipesPage } from './recipes.page';

const routes: Routes = [
  {
    path: '',
    component: RecipesPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
//    RecipeModule,
    RouterModule.forChild(routes)
  ],
  declarations: [RecipesPage]
})
export class RecipesPageModule {}

Including a parent module inside of a child module seems like a sort of a recursive include to me. Is this the right way of doing it or will that have side effects down the line? Is there a better way to do it?

Folder structure:

    [-] --- src
         |
        [-] -- app
             |
            [-] -- recipe
                 |
                [-] -- recipe
                    |
                    ( the recipe component files)
                 |
                [-] -- recipes
                    |
                    (recipe page with its own module}
                 |
                -- recipe.module.ts
             |
             -- app.module.ts

Is there a reason for declaring `RecipeComponent` in the parent module, and `RecipesPageModule` in a child module, instead of the other way around? An alternative would be to put everything in the same module... — ConnorsFan, May 10 '19 at 19:33
@ConnorsFan, I'm just trying to orgonize and use the CLI generation mechanisms. First, I created the recipe module container with "generate module recipe", then I'm nesting component and pages inside of it. "generate page" creates not only a page but a module to go along with it automatically. I'm assuming the CLI knows what it's doing better than I do at this point ^_^ There's also going to be a service, which shouldn't go under the page's subdirectory, I think, because page = view and service isn't a view. — Creature, May 10 '19 at 19:38

Angular child module not seeing classes from parent module

0 Answers0