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

  • Artigo

Aplica-se a: Windows Admin Center, Versão prévia do Windows Admin Center

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

  1. Navegue até a pasta do módulo criada por ng generate na etapa anterior.

  2. 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

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

  4. 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

  1. 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

  2. Adicione conteúdo para o arquivo:

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

  3. 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

  4. Modifique a instrução importações para importar roteamento:

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

  5. Verifique se as instruções import estão em ordem alfabética por fonte.

Adicionar conteúdo ao novo arquivo TypeScript do novo componente

  1. 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

  2. Modifique o conteúdo no arquivo para corresponder ao exemplo a seguir.

    constructor() {
    // TODO
}

public ngOnInit() {
    // TODO
}

Atualizar o app-routing.module.ts

  1. 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.