如何更改 Angular 的默认模块答案

【问题标题】：How to change angular's default module如何更改 Angular 的默认模块
【发布时间】：2020-05-31 15:38:20
【问题描述】：

在学习 Angular 模块时，我开始想知道我们是否可以更改 Angular 的默认模块。我试过但失败了。我对文件所做的更改：

我在 src 目录下创建了一个新目录，名为：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 目录也包含 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));

和 index.html

<core>loading core component</core>

我知道在现实世界的场景中没有人会费心更改应用程序模块，但我只是想了解事情是如何工作的，所以如果你能帮助我了解事情是如何工作的，我缺少什么，或者如果不是甚至可以更改默认模块。

更新：控制台不报告任何错误，但内容不加载。而不是显示（来自 core.component.ts 模板部分）：

核心组件欢迎您。

它只是显示（来自 index.html 部分）：

加载核心组件

【问题讨论】：

我可以看看你的错误吗？
控制台不报告任何错误，但内容不加载。而不是显示：核心组件欢迎您。它只显示：加载核心组件
查看这个演示我创建了你的代码基础它工作正常stackblitz.com/edit/angular-change-def-module ????????
我不知道那里出了什么问题，但我现在试了一下，现在工作正常。 stackblitz.com/edit/change-app-root
感谢@Fmerco 的快速回复。

标签： angular module components default

【解决方案1】：

app.module 被认为是一个根模块，根模块与其他 Angular 模块几乎没有区别

1️⃣导入BrowserModule

2️⃣最晚声明的组件之一必须添加到引导数组

3️⃣在index.html中添加一个元素匹配引导组件选择器

4️⃣ 通过将模块引用传递给 main.ts 中 platformBrowserDynamic 对象的 bootstrapModule 方法，将新模块设置为根模块。

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 ?了解更多详情。

【讨论】：