Лучшая практика для вызова начальной загрузки main.ts в автономной конфигурации Angular 17+

Question

У меня вопрос о вызове начальной загрузки в автономной конфигурации API Angular 17. В частности: следует ли добавлять поставщиков/импорт в вызов начальной загрузки в дополнение к импорту в автономные компоненты, директивы и каналы?

Некоторый контекст:

Я перенес устаревшее приложение Angular на новую автономную конфигурацию API. Я использовал официальное автономное руководство по миграции . Эта схема содержит четыре этапа миграции, третий из которых:

Запустите ng g @angular/core:standalone и выберите «Загрузить проект с использованием автономных API».

На этом шаге поставщики/импорт копируются из корня –NgModule- модуль в новый вызов начальной загрузкиmain.ts. Моя теперь выглядит так:

      bootstrapApplication(AppComponent, {
    providers: [
        importProvidersFrom(AppRoutingModule, BrowserModule, ReactiveFormsModule, 
        MatToolbarModule, MatButtonModule, MatIconModule, FormsModule, MatFormFieldModule, MatInputModule, MatProgressSpinnerModule),
        provideAnimations(),
        provideHttpClient(withInterceptorsFromDi())
    ]
}).catch(err => console.error(err));

Вы можете видеть, что, например, импорт материалов Angular был добавлен вprovidersмассив в вызове начальной загрузки. Они также импортируются по отдельности в те компоненты, где они необходимы, как это необходимо при настройке автономного API.

Так:

• почему они также импортируются в вызове начальной загрузки?

• следует ли мне добавлять в вызов начальной загрузки какие-либо новые импорты, которые я буду использовать в будущем? то есть: если в будущем я решу использовать автозаполнение, должен ли я добавитьMatAutocompleteModuleв вызове начальной загрузки, а также в компоненте?

Обновлять

Согласно комментариям/ответам ниже, схема миграции добавляет к методу больше, чем необходимо/желательно (для обеспечения плавной миграции).

Я рекомендую провести рефакторинг наapp.config.tsшаблон.

После рефакторинга моя настройка:

main.ts

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

app.config.ts

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

Другой импорт (см.bootstrapApplicationв исходном посте) либо устарели, либо их следует импортировать только на уровне компонентов.

Некоторая дополнительная информация: Начало работы с автономными компонентами.