Adicionar um módulo a uma extensão de ferramenta

Artigo
05/08/2023
Aplica-se a:

✅ Windows Admin Center, ✅ Windows Admin Center Preview

Neste artigo, adicionamos um módulo vazio a uma nova extensão de ferramenta vazia que criamos com a CLI do Windows Admin Center.

Prepare o seu ambiente

Caso ainda não tenha feito isso, siga as instruções em desenvolver uma extensão de ferramenta (ou solução) para preparar seu ambiente e criar uma nova extensão de ferramenta vazia.

Usar a CLI do Angular para criar um módulo (e um componente)

Se você ainda não conhece o Angular, recomendamos que leia a documentação no site do Angular para mais informações sobre Angular e NgModule. Confira NgModule para obter diretrizes.

Para saber mais:

Abra uma solicitação de comando, altere o diretório para .\src\app em seu projeto e execute os comandos a seguir, substituindo {!ModuleName} pelo nome do módulo (espaços removidos).

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

Valor	Explicação	Exemplo
`{!ModuleName}`	O nome do módulo (espaços removidos)	`ManageFooWorksPortal`

Exemplo de uso:

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

Adicionar informações de roteamento

Se você ainda não conhece o Angular, é recomendável que aprenda sobre o Roteamento e a Navegação do Angular. As seções a seguir definem os elementos de roteamento necessários que permitem o Windows Admin Center navegar até sua extensão e entre os modos de exibição dela em resposta a atividade do usuário. Para mais informações, confira as diretrizes do roteador

Use o mesmo nome de módulo usado na etapa anterior.

Adicionar conteúdo ao novo arquivo de roteamento

Navegue até a pasta do módulo criada por ng generate na etapa anterior.
Criar um novo arquivo {!module-name}.routing.ts, seguindo este convenção de nomenclatura:

Valor Explicação Exemplo de nome de arquivo

{!module-name} Seu nome do módulo (letras minúsculas, espaços substituídos por traços) manage-foo-works-portal.routing.ts

Valor	Explicação	Exemplo de nome de arquivo
`{!module-name}`	Seu nome do módulo (letras minúsculas, espaços substituídos por traços)	`manage-foo-works-portal.routing.ts`

Adicione este conteúdo ao arquivo criado:

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 { }

Substitua os valores no arquivo criado pelos seus valores desejados:

Valor	Explicação	Exemplo
`{!ModuleName}`	O nome do módulo (espaços removidos)	`ManageFooWorksPortal`
`{!module-name}`	Seu nome do módulo (letras minúsculas, espaços substituídos por traços)	`manage-foo-works-portal`

Adicionar conteúdo ao novo arquivo de módulo

Abra o arquivo {!module-name}.module.ts, encontrado com a seguinte convenção de nomenclatura:

Valor Explicação Exemplo de nome de arquivo

{!module-name} Seu nome do módulo (letras minúsculas, espaços substituídos por traços) manage-foo-works-portal.module.ts

Valor	Explicação	Exemplo de nome de arquivo
`{!module-name}`	Seu nome do módulo (letras minúsculas, espaços substituídos por traços)	`manage-foo-works-portal.module.ts`

Adicione conteúdo para o arquivo:

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

Substitua os valores no conteúdo adicionada pelos seus valores desejados:

Valor Explicação Exemplo

{!module-name} Seu nome do módulo (letras minúsculas, espaços substituídos por traços) manage-foo-works-portal
Modifique a instrução importações para importar roteamento:

Valor original Novo valor

imports: [ CommonModule ] imports: [ CommonModule, Routing ]
Verifique se as instruções import estão em ordem alfabética por fonte.

Valor	Explicação	Exemplo
`{!module-name}`	Seu nome do módulo (letras minúsculas, espaços substituídos por traços)	`manage-foo-works-portal`

Valor original	Novo valor
`imports: [ CommonModule ]`	`imports: [ CommonModule, Routing ]`

Adicionar conteúdo ao novo arquivo TypeScript do novo componente

Abra o arquivo {!module-name}.component.ts, encontrado com a seguinte convenção de nomenclatura:

Valor Explicação Exemplo de nome de arquivo

{!module-name} Seu nome do módulo (letras minúsculas, espaços substituídos por traços) manage-foo-works-portal.component.ts
Modifique o conteúdo no arquivo para corresponder ao exemplo a seguir.
```
constructor() {
    // TODO
}

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

Valor	Explicação	Exemplo de nome de arquivo
`{!module-name}`	Seu nome do módulo (letras minúsculas, espaços substituídos por traços)	`manage-foo-works-portal.component.ts`

Atualizar o app-routing.module.ts

Abra o arquivo app-routing.module.ts e modifique o caminho padrão para que ele carregue o novo módulo que você criou. Localize a entrada para path: '' e atualize loadChildren para carregar o seu módulo em vez do módulo padrão:

Valor	Explicação	Exemplo
`{!ModuleName}`	O nome do módulo (espaços removidos)	`ManageFooWorksPortal`
`{!module-name}`	Seu nome do módulo (letras minúsculas, espaços substituídos por traços)	`manage-foo-works-portal`

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

Eis um exemplo de um caminho padrão atualizado:

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

Compilar e carregar a extensão lateralmente

Você acabou de adicionar um módulo à sua extensão. Em seguida, você pode criar e carregar a extensão no Windows Admin Center para ver os resultados.

Partilhar via