Accessing a component via root

In order to use the collector component inside the root component (app.ts) we need to inform the root about it. So declare the CollectorComponent inside the app.modules.ts.

Tip

Notice that as soon as you add the CollectorComponent in the declarations array, WebStorm IDE imports the related class automatically.

If you are not using WebStorm, you need to manually import the collector.component.ts into the root otherwise you will get an error later:

// src/app/app.ts 
//... 
import {CollectorComponent}from "./collector/collector.component"; 
//... 

Also don't forget to declare the new component in the module file:

// src/app/app.modue.ts 
import {CollectorComponent} from "./collector/collector.component"; 
//... 
@NgModule({ 
  declarations: [AppComponent, NavigationComponent, CollectorComponent], 
  //... 
}) 
export class AppModule { 
} 

Now that we have the Collector component imported, we have access to its selector. To prove that, edit the app.html as follows...