بدء تشغيل تطبيق مستقل

تشغيل تطبيق Standalone

نقطة الإدخال: main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent);

مصدر bootstrapApplication

المكوّن الجذر

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<h1>My App</h1>'
})
export class AppComponent {}

توفير خدمات التطبيق

bootstrapApplication(AppComponent, {
  providers: []
});

توفير Router

import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes)]
});

توفير HttpClient

import { provideHttpClient } from '@angular/common/http';

bootstrapApplication(AppComponent, {
  providers: [provideHttpClient()]
});

دمج Providers

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideHttpClient()
  ]
});

نمط app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)]
};

استخدام app.config في main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig);

معالجة الأخطاء

bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));

اختبار سريع: Bootstrapping

مراجعة: Bootstrapping