Bootstrapping in Angular 2 is the process by which the framework launches and initializes an Angular application. It is a crucial step that involves a few key concepts and steps to understand how an Angular application is bootstrapped.

Firstly, it's important to clarify that Angular 2 does not use the `ng-app` directive that was present in Angular 1. Instead, Angular 2 employs a different approach to bootstrapping that is centered around the concept of Providers and the use of the `bootstrap` method.

### Understanding Providers in Angular 2

In Angular 2, Providers are a way to define dependencies that a component or a service might need. Providers are defined using the `providers` array in the `@Component` or `@NgModule` decorators. They can be of various types such as `Value`, `Class`, `Factory`, `Existing`, or `UseClass`, which determine how the dependency is provided to the component or service.

### Bootstrapping Process

The bootstrapping process in Angular 2 involves the following steps:


1. Define the Root Component: The first step is to define the root component of your application. This is the main component that will serve as the entry point of your application.


2. Create a Platform: Before bootstrapping, you need to create a platform. This is done by calling `platformBrowserDynamic()` which sets up the dynamic platform for the browser.


3. Bootstrap the Application: The actual bootstrapping is done by calling the `bootstrap` method on the platform. This method takes the root component as an argument and returns a `Promise` that resolves when the bootstrap process completes.


4. Providers and Dependency Injection: During the bootstrap process, Angular will use the providers defined in the root component to create and inject the necessary dependencies into the component.


5. Compile and Render the Component: Once the dependencies are injected, Angular compiles the root component and its associated template, and then it renders the component into the DOM.


6. Application Initialization: After the root component is compiled and rendered, Angular performs the necessary initialization for the application, including running any lifecycle hooks such as `ngOnInit`.

### Example of Bootstrapping in Angular 2

Here's a simplified example of how you might bootstrap an Angular 2 application:

```typescript
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
.then(platform => {
console.log('Platform is ready');
})
.catch(err => {
console.error('Error occurred during bootstrap: ', err);
});
```

In this example, `AppModule` is the main module of the application, and it contains the root component that the platform will bootstrap.

### Conclusion

Bootstrapping in Angular 2 is a complex process that involves setting up the platform, defining the root component, and using providers to inject dependencies. It is a fundamental concept for Angular developers to understand as it forms the basis of how an Angular application is started and runs.

Now, let's move on to the translation of the above explanation into Chinese.

read more >>

Angular 2 -- An introduction of bootstrap and providers. Angular 2 does not have a bootstrap directive (ng-app). ... By calling the bootstrap the framework starts loading the main component into the component tree.Mar 6, 2016read more >>