如何更改 Angular 的默认模块

Posted 2023-02-22

【中文标题】如何更改 Angular 的默认模块

【英文标题】：How to change angular's default module

【发布时间】：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 的快速回复。

【参考方案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 ?了解更多详情。