Angular 微前端库 - ngx-planet 使用指南

🚀🌍🚀 Angular 微前端库 - ngx-planet 使用指南

ngx-planet🚀🌍🚀A powerful, reliable, fully-featured and production ready Micro Frontend library for Angular.项目地址:https://gitcode.com/gh_mirrors/ng/ngx-planet

ngx-planet 是一个专为Angular设计的强大、可靠的微前端库，它提供了全面的功能，并且已经准备好用于生产环境部署。本指南旨在帮助开发者快速理解项目结构，掌握启动文件与配置文件的使用，以便高效地集成到您的开发流程中。

1. 项目目录结构及介绍

ngx-planet 的目录结构精心组织以支持微前端的开发模式。以下是其典型的项目结构概述：

├── src                  # 主要源代码目录
│   ├── app              # 应用主组件和核心逻辑
│   │   ├── shared       # 共享组件和服务
│   │   └── modules      # 各自的业务模块或子应用入口
│   ├── assets           # 静态资源，如图片、字体文件等
│   ├── environments     # 环境配置文件（例如 environment.ts）
│   └── index.html       # 主入口HTML文件
├── angular.json         # Angular配置文件
├── package.json         # 项目依赖与脚本命令
├── README.md            # 项目说明文档
├── tsconfig.json        # TypeScript编译配置
├── karma.conf.js        # 单元测试配置文件
├── tslint.json          # TypeScript代码规范配置
└── etc...               # 可能包含更多的辅助文件或自定义配置

• src/app: 应用的核心区域，包括主要逻辑和界面。
• shared: 包含可以跨微前端重用的组件和服务。
• environments: 不同环境下的配置文件，比如开发与生产环境。
• angular.json: 定义了构建过程的各种选项和工作区设置。
• package.json: 记录项目依赖项以及可执行脚本。

2. 项目的启动文件介绍

在 ngx-planet 中，启动主要由 main.ts 文件控制，位于 src/main.ts。这是Angular应用的入口点。当运行 ng serve 或其他构建命令时，TypeScript 编译器从这里开始执行，初始化应用程序。尽管对于微前端来说，实际的“启动”可能更多涉及到与其他微前端实例的加载和管理，但基础的应用启动逻辑仍然在此文件内定义。

// 示例 main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

3. 项目的配置文件介绍

angular.json

angular.json 文件是管理和配置整个Angular工作空间的关键。它不仅包含了默认构建和开发服务器的设置，还能指定特定于项目的配置，如输出路径、构建目标和优化选项等。对于微前端场景，你可能会在这里调整打包输出的方式，使之适应微前端架构的部署需求。

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          // 设置输出路径、环境变量等
        },
        "serve": {
          // 开发服务器配置，包括端口和HMR设置
        }
      }
    }
  }
}

environment.ts 和 environment.prod.ts

这两个文件分别用于存储开发环境和生产环境的配置变量。在进行微前端开发时，不同环境下的API基础URL或其他环境特异性配置应该在这两个文件中进行区分。

// environment.ts
export const environment = {
  production: false,
  apiEndpoint: 'http://localhost:3000/api',
};

// environment.prod.ts
export const environment = {
  production: true,
  apiEndpoint: 'https://api.example.com/prod',
};

请注意，具体的配置和文件结构可能会根据版本更新有所变化，建议参考最新的项目文档或源码注释获取最准确的信息。

ngx-planet🚀🌍🚀A powerful, reliable, fully-featured and production ready Micro Frontend library for Angular.项目地址:https://gitcode.com/gh_mirrors/ng/ngx-planet