2

I have an Angular 2 project with the following structure:

/app
    app.component.ts
    app.module.ts
    /shared
           shared.module.ts
           /layout
           /utilities
                     utilities.module.ts
                     /icon
                          icon.component.ts
                     /message
                             message.module.ts
                             message.component.ts <----Problem here

Within utilities.module.ts I import the icon component, declare it and export it. Within the shared module, I import the utilities module and export it as well. Within the app module, I import the shared module. Within my app component I want to use my icon component, but I get the error: 'app-icon' is not a known element:

Is it posible to to re-export modules/components like this? If not, is the only alternative to import the utilities module directly into the app module?

Edit: I have noticed that the module/component/template that is complaining that the app-icon component is not available is the message component. I have tried to import the icon component directly into the message component, but it still complains about the icon component not being available.

Jan
  • 500
  • 6
  • 9

1 Answers1

1

Edit: I have noticed that the module/component/template that is complaining that the app-icon component is not available is the message component. I have tried to import the icon component directly into the message component, but it still complains about the icon component not being available.

Component/directives/pipes don't get inherited from parent modules, i.e. MessageModule doesn't get any made available through the AppModule. The MessageModule needs to provide access to whatever outside items it needs, by importing the module that contains those items. So you could probably just imports: [ UtilitiesModule ] into the MessageModule, and that should get to not raise the error.

If you have the MessageModule inside the UtilitiesModule, this might cause a circurlar dependency error. I am not sure. In this case, you may need a restructure.

Paul Samsotha
  • 205,037
  • 37
  • 486
  • 720
  • Thanks for the explanation. Importing the icon component into the message module actually caused an error about the icon component being declared in two modules. Probably because the message module gets imported by the utilities module. Anyway, I simply made an icon module, which I could then import into the utilities and message module. I am not sure how good a solution that is, will need to dig deeper into structuring angular 2. – Jan Nov 11 '16 at 05:26