Agregar un módulo a una extensión de herramienta

• Se aplica a:

  ✅ Windows Admin Center, ✅ Windows Admin Center Preview

En este artículo, se va a agregar un módulo vacío a una extensión de herramienta que se ha creado con la CLI de Windows Admin Center.

Preparación del entorno

Si aún no lo ha hecho, siga las instrucciones para desarrollar una extensión de herramienta (o solución) para preparar el entorno y crear una nueva extensión de herramienta vacía.

Uso de la CLI de Angular para crear un módulo (y un componente)

Si no está familiarizado con Angular, se recomienda que lea la documentación del sitio web de Angular para más información sobre Angular y NgModule. Consulte NgModule para obtener instrucciones.

Para obtener más información:

• Generación de un nuevo módulo en la CLI de Angular.
• Generación de un nuevo componente en la CLI de Angular.

Abra un símbolo del sistema, cambie el directorio a .\src\app en el proyecto y, luego, ejecute los comandos siguientes, pero reemplace {!ModuleName} por el nombre del módulo (sin espacios).

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

Value	Explicación	Ejemplo
{!ModuleName}	El nombre del módulo (sin espacios)	ManageFooWorksPortal

Ejemplo de uso:

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

Adición de información de enrutamiento

Si no está familiarizado con Angular, se recomienda que aprenda sobre la navegación y el enrutamiento de Angular. En las secciones siguientes se definen los elementos de enrutamiento necesarios que permiten a Windows Admin Center navegar a la extensión y entre las vistas de la extensión en respuesta a la actividad del usuario. Para más información, consulte la guía del enrutador.

Use el mismo nombre de módulo que usó en el paso anterior.

Adición de contenido a un nuevo archivo de enrutamiento

1. Vaya a la carpeta del módulo que creó mediante ng generate en el paso anterior.

2. Cree un nuevo archivo {!module-name}.routing.ts con esta convención de nomenclatura:

   Value	Explicación	Por ejemplo, nombreDeArchivo.
   {!module-name}	El nombre del módulo (en minúsculas, espacios reemplazados por guiones)	manage-foo-works-portal.routing.ts

3. Agregue este contenido al archivo que ha creado:

   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. Reemplace los valores del archivo que ha creado por los valores deseados:

   Value	Explicación	Ejemplo
   {!ModuleName}	El nombre del módulo (sin espacios)	ManageFooWorksPortal
   {!module-name}	El nombre del módulo (en minúsculas, espacios reemplazados por guiones)	manage-foo-works-portal

Adición de contenido al nuevo archivo de módulo

1. Abra el archivo {!module-name}.module.ts, que tiene la siguiente convención de nomenclatura:

   Value	Explicación	Por ejemplo, nombreDeArchivo.
   {!module-name}	El nombre del módulo (en minúsculas, espacios reemplazados por guiones)	manage-foo-works-portal.module.ts

2. Agregue contenido al archivo:

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

3. Reemplace los valores del contenido que acaba de agregar por los valores deseados:

   Value	Explicación	Ejemplo
   {!module-name}	El nombre del módulo (en minúsculas, espacios reemplazados por guiones)	manage-foo-works-portal

4. Modifique la instrucción imports para importar Routing:

   Valor original	Valor nuevo
   imports: [ CommonModule ]	imports: [ CommonModule, Routing ]

5. Asegúrese de que las instrucciones import están ordenadas alfabéticamente por origen.

Adición de contenido al nuevo archivo TypeScript de componentes

1. Abra el archivo {!module-name}.component.ts, que tiene la siguiente convención de nomenclatura:

   Value	Explicación	Por ejemplo, nombreDeArchivo.
   {!module-name}	El nombre del módulo (en minúsculas, espacios reemplazados por guiones)	manage-foo-works-portal.component.ts

2. Modifique el contenido del archivo para que coincida con el ejemplo siguiente.

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

Actualización de app-routing.module.ts

1. Abra el archivo app-routing.module.ts y modifique la ruta de acceso predeterminada para que se cargue el nuevo módulo que ha creado. Busque la entrada de path: '' y actualice loadChildren para cargar su módulo en lugar del módulo predeterminado:

   Value	Explicación	Ejemplo
   {!ModuleName}	El nombre del módulo (sin espacios)	ManageFooWorksPortal
   {!module-name}	El nombre del módulo (en minúsculas, espacios reemplazados por guiones)	manage-foo-works-portal

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

   He aquí un ejemplo de una ruta de acceso predeterminada actualizada:

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

Compilación y transferencia local de la extensión

Ahora ha agregado un módulo a la extensión. A continuación, puede compilar y transferir localmente la extensión en Windows Admin Center para ver los resultados.