Do I need app.component.ts in Angular 2?

Question

I'm learning Angular 2. I've a question. Do I need app.component.ts ? I have a lot of components which are in folders. Everyone of the folders contains component and template but I'm wondering Do I really need main component or I could remove it ?

Best regards.

Answer 1

Keep in mind : At least one module and component are required to initiate Angular2 App.

Do I need app.component.ts?

Not necessary. That is just a name of .ts file. It can be any other component. But as said at least one module and component are required to initiate Angular2 App.

Understand below things,

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';   //<<<==== it imports AppModule class from app.module.ts file
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);        //<<<===we bootstarp our AppModule here

app.module.ts // name of .ts file

//contents are important as it contains @NgModule({}) decorator.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SomeComponent }   from './some.component';  
                                           //<<<===we import SomeComponent class from some.component.ts file to bootstrap it.


@NgModule({
  imports:      [ BrowserModule],
  declarations: [ SomeComponent ],         
  bootstrap:    [ SomeComponent ]          //<<<===we are going to bootstrap/initialize SomeComponent as our first component.
})
export class AppModule { }                 //<<<====we imported AppModule (contains @NgModule decorator) in main.ts as we are going to bootstrap this class which has @NgModule() decorator.

some.component.ts //name of .ts file

import { Component } from '@angular/core';
import {UserService} from '../shared/shared.service';
@Component({
  selector: 'my-app',                       //<<<===make sure this matches with custom HTML tag used in index.html
  template: `<h1>Anglar2</h1>  
  `
})
export class SomeComponent {}

Answer 2

you should have one root component to bootstrap your application.

@NgModule.bootstrap property identifies this AppComponent as the bootstrap component. When Angular launches the app, it places the HTML rendering of AppComponent in the DOM [https://angular.io/docs/ts/latest/guide/ngmodule.html#!#bootstrap]