Passing input data into a lazy-loaded Angular module

Question

I have a component called NewsComponent which is shared within my app. I would like to expand it into a NewsModule and add a routing system to display individual articles, so that my routes would look like

/some-component
/some-component/news
/some-component/news/article/12345
/other-component
/other-component/news
/other-component/news/article/23456

To make its routes relative, I am lazy-loading the module:

const routes: Route = [
  {
    path: 'some-component',
    component: SomeComponent
  },
  {
    path: 'some-component/news',
    component: SomeNewsWrapperComponent,
    children: [
      {
        path: '',
        loadChildren: './news/module#NewsModule'
      }
    ]
  }
  // same for /other-component
]

The problem is that NewsComponent displays visuals based on some input data, and I used to pass it via @Input. But now that the component is encapsulated within its lazy-loaded module, this is no longer possible.

I could create a NewsService within a third module imported both NewsModule and AppModule and pass data that way, but I feel that this is a breach of modularity and would like to avoid it. Is there a better solution for one-directional data flow into the module?

score 3 · Answer 1 · answered Mar 19 '19 at 03:09

I think there is no way to pass data (If you lazy load) apart from these two methods.

Use of query params
Having a shared service

As per my point of understanding, modularity is all about your design. If you have lots of data to be passed to your lazy loading module, then definitely you should have broken your module at a wrong place. When you are lazy loading, you should have passed a minimum amount of information, in such a way that those information can be passed through some query params.

If you have a shared service, yes it is a solution to overcome the above problem, but yes, it also breaches modularity, but it is a design issue. Use of lazy loading at most appropriate level makes the design perfect and makes no issues in modularity.

Passing input data into a lazy-loaded Angular module

1 Answers1