CODEWITHSUNDEEP
javascriptangulartypescript
Doug
Doug

Reputation: 547

Angular2 - Component Injection outside of NgModule

I am new to A2 so this question has likely been asked before but I am using the wrong terminology so cannot find the answer.

However, I am trying to understand the @Component injection within A2. As best I can tell, all components no matter how nested they are always have to be declared as part of the NgModules file at the root level (i.e. services declared here are accessible through all components)

@NgModule({
    imports: [
        ...
    ],
    declarations: [
        1stComponent,
        2ndComponent,
        3rdComponent,
        4thComponent     <-- All components must be included here
    ],
    providers: [
       ...
    ],
    bootstrap: [
        AppComponent
    ]
})

To me, this seems a little weird. What if you have a ChildComponent that is only ever displayed as part of a ParentComponent? Why does the ChildComponent need to be declared at the NgModule level? Can this ChildComponent not be declared as part of the parent component when its needed? Does declaring all components up front not cause overhead when loading the application - it needs to get everything up front? Or is it just that NgModule defines what the components are for the build, not when or how they display at run time?

Upvotes: 4

Views: 188

Answers (1)

williamsandonz
williamsandonz

Reputation: 16430

In earlier releases of Angular, it functioned the way you were expecting it to (i.e each component defined it's own dependencies). Around the time RC was released the A2 team decided to change it.

As Estus mentioned you can use Lazy loading. There's a good reference guide here that shows how to do it. (scroll down to the 'Lazy Loading the Home module' section).

Basically the Angular team decided to allow you to segment your application into different modules, whereby all component & directive dependencies are defined at the module level. If you really are worried about the initial load being too much, break things up into different modules.

Also in answer to your question, yes by defining your components in the declarations array in app.module.ts then you will subsequently be loading them. (As you have to import them in the file to reference them in the first place).

Upvotes: 1

Related Questions