Error referencing angular component from a component in another module

Simba 0
Viewed 34

I am working in an Angular system, adding a new component to a module ('Cards') that already contains several other components. My code runs locally, but I'm getting an error when I try to build it.

My new component needs to use some functionality from another component in a separate module (let's call it 'widget'), so I have added the angular tag for that component to the html template in my new component. I have also imported the module in the NGModule imports.

The folder structure looks like this:

cards   (the module being worked on)
 + existing-card-1
 + existing-card-2
 + new-card
    + new-card.component.html
    + new-card.component.scss
    + new-card.component.spec.ts
    + new-card.component.ts
 cards.module.ts
 index.ts
widget
 widget.component.html
 widget.component.scss
 widget.component.spec.ts
 widget.component.ts
 widget.module.ts
 index.ts

The widget component is already in use in a similar way in several other modules.

I have tried to use the widget component within the new-card component as follows:

new-card.component.html looks like this (stripped down):

<div class='new-card'>
  <widget [title]='content.title'>
  </widget>
</div>

In order to use the <widget> tag, I've imported WidgetModule into the main Cards.module.ts as follows:

import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
import { ExistingCard1Component } from "./existing-card-1/existing-card-1.component";
import { ExistingCard2Component } from "./existing-card-2/existing-card-2.component";
import { NewCardComponent } from "./new-card/new-card.component";
import { WidgetModule } from "../widget/widget.module";

@NgModule({
  imports: [
    CommonModule,
    RouterModule,
    WidgetModule,
  ],
  exports: [
    ExistingCard1Component,
    ExistingCard2Component,
    NewCardComponent,
  ],
  declarations: [
    ExistingCard1Component,
    ExistingCard2Component,
    NewCardComponent,
  ],
})
export class CardsModule {}

As far as I understand it, this should be enough to allow <widget> to be used in new-card.component.html. And true enough, when I run it locally and test it in a browser, it works.

However, when I build it using ng build --prod, it throws the following errors:

ERROR in Unexpected value 'undefined' imported by the module 'CardsModule in /Users/me/projects/our-system/dist/our-system/our-system.d.ts'
Unexpected value 'undefined' exported by the module 'CardsModule in /Users/me/projects/our-system/dist/our-system/our-system.d.ts'
'widget' is not a known element:
1. If 'widget' is an Angular component, then verify that it is part of this module.
2. If 'widget' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<div class="new-card">
  [ERROR ->]<widget [title]="content.title">
")

I've tried a bunch of combinations of importing and exporting the Widget module and component into CardsModule, but nothing has resolved the error above (a few things I've tried have added to it though).

Can anyone tell me what I'm missing, please? I'm pretty new to Angular, but this seems like a pretty standard thing, so I'm obviously doing something daft.

angular-components angular
2 Answers

Thanks for the suggestions.

It turned out that I had got everything right in the code after all. The problem was that I was missing a step when rebuilding it, and thus the build step I was doing was still picking up the problem even after it was fixed.

Short anwswer: I needed to do a yarn build every time as well as ng build.

Simba0

I'm sorry I cannot comment so I have to make an actual answer.

Regarding your own answer, know that you have a .angular folder at the root of your project : this is used by the CLI to speed up the compilation of your project.

Sometimes it keeps the errors as you have faced : just removing this folder and re-running ng serve or ng build shoudl do the trick.

Hope this helps the next time you face a similar issue !

MGX0
Related