Как изменить модуль angular по умолчанию

Question

Изучая модули angular, я начал задумываться, можем ли мы изменить модуль по умолчанию angular или нет. Я попробовал, но не получилось. Изменения, которые я внес в файлы:

Я создал новый каталог в каталоге sr c с именем: core, который содержит следующий класс: core.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CoreComponent }  from './core.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ CoreComponent ],
  bootstrap:    [ CoreComponent ]
})
export class CoreModule { }

core dir содержит core.component.ts

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

@Component({
    selector: 'core',
    template: `<h2> Core Component Welcome you</h2>`
})
export class CoreComponent { }

Следующие изменения были внесены в main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { environment } from './environments/environment';
import { CoreModule } from './core/core.module';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(CoreModule)
  .catch(err => console.error(err));

и индекс. html

<core>loading core component</core>

I Я знаю, что в реальном мире никто бы не потрудился изменить модуль приложения, но я просто хочу понять, как все работает, поэтому, если вы любезно поможете мне понять, как все работает, что я пропускаю, или если его даже невозможно изменить модуль по умолчанию.

Обновление: Консоль не сообщает об ошибках, но содержимое не загружается. Вместо отображения (взято из части шаблона core.component.ts):

Core Component Добро пожаловать.

Отображается только (из индекса. html часть):

загрузка основного компонента

Answer 1

app.module считается модулем root, а модуль root отличается от других angular module

1️⃣ import BrowserModule

2️⃣ одним из объявленных компонент должен быть добавлен в bootstrap массив

3️⃣ добавить элемент в index.html совпадении с селектором bootstrap компонентов

4️⃣ установить новый модуль как root модуль мимоходом ссылка на метод bootstrapModule объекта platformBrowserDynamic объекта в main.ts.

core.module.ts

@NgModule({
  imports: [BrowserModule], // ? 1️⃣
  declarations: [CoreComponent],
  bootstrap: [CoreComponent] // ? 2️⃣
})
export class CoreModule {}

index. html

<core>loading</core> <!-- // ? 3️⃣-->

main .ts

platformBrowserDynamic().bootstrapModule(CoreModule) // ? 4️⃣
 .then(ref => {

 })
 .catch(err => console.error(err));

demo ?

проверьте это bootstrapping ? для получения более подробной информации.