CODEWITHSUNDEEP
angularreferenceangular-module
Yogi Bear
Yogi Bear

Reputation: 963

angular group module references in a single module

My application has a number of modules users may reference before they decide to sign-up. I want to keep them separate from others.

These "PreRegistration" modules would be then lazy loaded. Directory PreRegistration has a splash-page module (and eventually others) that are all referenced by the pre-reg.module.ts:

enter image description here

pre-reg module is the collection of all PreRegistration modules (only 1 in this case):

enter image description here

In this simple case, I want to show it in the app.component.html so I import in AppModule:

enter image description here

But in app.component.html, the splash-page selector is not recognized. SplashPageComponent has no functions, just a dummy html.

enter image description here

but the selector is correct. Here is app.component.html complaining about the missing reference?

enter image description here

My "cute" organization seems to be a waste of time. Any ideas why it isn't being referenced? THANKS IN ADVANCE. :-) Yogi

Upvotes: 0

Views: 408

Answers (2)

Nicholas K
Nicholas K

Reputation: 15423

There are a couple of things you are missing here:

  1. You need to declare the component in the module, so that angular is aware of it
  2. To use a component outside its declared module, you need to export it in the module so that it can be used elsewhere.

splash-page.module.ts

@NgModule({
   declarations: [SpashScreenComponent, ....],
   exports: [SpashScreenComponent]
})

Upvotes: 1

Nikola Stekovic
Nikola Stekovic

Reputation: 635

I assume that you forgot to export SpashPageComponent in SplashPageModule.

splash-page.module.ts ...

@NgModule({
declarations: [SpashScreenComponent, ....],
exports: [SpashScreenComponent]
})

Upvotes: 1

Related Questions