Angular 1 to Angular 5 (import nested components)

Question

Before

• Angular 1.5
• ui-router

Now

• Angular 5.0

How import subcomponents in a component father like a angular 1.5? I do the tutorial Heroes from angular 5, but not explaint this transition, all components are imported in app.modole.ts.

The next image try to explain a litle how a I have imports in angular 1.5

Someone know how import subcomponents in a component in the new angular 5? or is absolute necesary import all components in app.module.ts?

Answer 1

It is no different to AngularJS in any way. This can be done with single App module (which isn't enough for complex applications), or a hierarchy of modules.

In AngularJS:

angular.module('app', ['foo'])
.component('app', {...});

angular.module('foo', [])
.component('foo', {...})
.component('barUsedByFoo', {...});

In Angular:

@NgModule({ declarations: [FooComponent, BarUsedByFooComponent], exports: [FooComponent] })
class FooModule {}

@NgModule({ imports: [FooModule], declarations: [AppComponent], bootstrap: [AppComponent] })
class AppModule {}

Angular team proposes the concept of feature modules. Feature module should explicitly specify its dependency on other modules with imports. All module components are specified in declarations and (optionally) exports.

The difference from AngularJS is that Angular modules are allowed to have local components. If BarComponent with bar selector is specified in both declarations and exports, it will be available in all component templates. If BarComponent is specified only in declarations and not exports, it will be available only in component templates from this module. This way different modules can have different <bar> that won't pollute global namespace.

If BarComponent is route component, it should be specified in both declarations and exports, because this way it will be available to router module.