将模块添加到工具扩展中

本文介绍如何将空模块添加到使用 Windows Admin Center CLI 创建的工具扩展。

准备环境

如果您还没有进行此操作，请按照开发工具（或解决方案）扩展的说明，准备环境并创建一个新的空白工具扩展。

使用 Angular CLI 创建模块（和组件）

如果你不熟悉 Angular，建议你阅读 Angular 网站上的文档，以了解 Angular 和 NgModule。 有关指南，请参阅 NgModule 。

若要了解详细信息，请访问以下链接：

• 在 Angular CLI 中生成新模块。
• 在 Angular CLI 中生成新组件。

打开命令提示符，在项目中将目录更改为 .\src\app，然后运行以下命令，将 {!ModuleName} 替换为模块名称（删除空格）。

cd .\src\app
ng generate module {!ModuleName}
ng generate component {!ModuleName}

示例用法：

cd .\src\app
ng generate module ManageFooWorksPortal
ng generate component ManageFooWorksPortal

添加路由信息

如果你不熟悉 Angular，建议你了解 Angular 路由和导航。 以下各节定义了必要的路由元素，这些元素可使 Windows Admin Center 导航到扩展并在扩展中的视图之间导航，以响应用户活动。 若要了解详细信息，请参阅 路由器指南

使用在上一步中使用的相同模块名称。

将内容添加到新的路由文件

1. 浏览到上一步中由 ng generate 创建的模块文件夹。

2. 按照此命名约定，创建新文件 {!module-name}.routing.ts：

   Value	Explanation	示例文件名
   {!module-name}	模块名称（小写，空格替换为短划线）	manage-foo-works-portal.routing.ts

3. 将此内容添加到创建的文件：

   import { NgModule } from '@angular/core';
   import { RouterModule, Routes } from '@angular/router';
   import { {!ModuleName}Component } from './{!module-name}.component';
   
   const routes: Routes = [
       {
           path: '',
           component: {!ModuleName}Component,
           // if the component has child components that need to be routed to, include them in the children array.
           children: [
               {
                   path: '',
                   redirectTo: 'base',
                   pathMatch: 'full'
               }
           ]
   }];
   
   @NgModule({
       imports: [
           RouterModule.forChild(routes)
       ],
       exports: [
           RouterModule
       ]
   })
   export class Routing { }
   

4. 将创建的文件中的值替换为所需的值：

   Value	Explanation	Example
   {!ModuleName}	模块名称（删除空格）	ManageFooWorksPortal
   {!module-name}	模块名称（小写，空格替换为短划线）	manage-foo-works-portal

将内容添加到新模块文件

1. 打开使用以下命名约定找到的文件 {!module-name}.module.ts：

   Value	Explanation	示例文件名
   {!module-name}	模块名称（小写，空格替换为短划线）	manage-foo-works-portal.module.ts

2. 将内容添加到文件：

   import { Routing } from './{!module-name}.routing';
   

3. 将刚添加的内容中的值替换为所需的值：

   Value	Explanation	Example
   {!module-name}	模块名称（小写，空格替换为短划线）	manage-foo-works-portal

4. 修改导入语句以导入路由：

   原始值	新值
   imports: [ CommonModule ]	imports: [ CommonModule, Routing ]

5. 确保 import 语句按源的字母顺序排序。

将内容添加到新组件 TypeScript 文件

1. 打开使用以下命名约定找到的文件 {!module-name}.component.ts：

   Value	Explanation	示例文件名
   {!module-name}	模块名称（小写，空格替换为短划线）	manage-foo-works-portal.component.ts

2. 修改文件中的内容以匹配以下示例。

   constructor() {
       // TODO
   }
   
   public ngOnInit() {
       // TODO
   }
   

更新 app-routing.module.ts

1. 打开文件 app-routing.module.ts，并修改默认路径，以便加载创建的新模块。 找到 path: '' 的条目，并更新 loadChildren 以加载你的模块（而不是默认模块）：

   Value	Explanation	Example
   {!ModuleName}	模块名称（删除空格）	ManageFooWorksPortal
   {!module-name}	模块名称（小写，空格替换为短划线）	manage-foo-works-portal

       {
           path: '',
           loadChildren: 'app/{!module-name}/{!module-name}.module#{!ModuleName}Module'
       },
   

   下面是更新后的默认路径的示例：

       {
           path: '',
           loadChildren: 'app/manage-foo-works-portal/manage-foo-works-portal.module#ManageFooWorksPortalModule'
       },
   

生成并旁加载扩展

现在，你已将模块添加到扩展。 接下来，便可以在 Windows Admin Center 中生成并旁加载扩展以查看结果。