Ajouter un module à une extension d’outil

  • Article

S'applique à : Windows Admin Center, Windows Admin Center Preview

Dans cet article, nous ajoutons un module vide à une extension d’outil que nous avons créée avec l’interface CLI Windows Admin Center.

Préparer votre environnement

Si ce n’est pas déjà fait, suivez les instructions de développement d’une extension d’outil (ou de solution) pour préparer votre environnement et créer une extension d’outil vide.

Utiliser l’interface CLI Angular pour créer un module (et un composant)

Si vous débutez avec Angular, nous vous encourageons à lire la documentation sur le site web Angular pour en savoir plus sur Angular et NgModule. Pour obtenir de l’aide, consultez NgModule.

Pour en savoir plus :

Ouvrez une invite de commandes, remplacez le répertoire par .\src\app dans votre projet, puis exécutez les commandes suivantes, en remplaçant {!ModuleName} par le nom de votre module (espaces supprimés).

cd .\src\app
ng generate module {!ModuleName}
ng generate component {!ModuleName}
active Explication Exemple
{!ModuleName} Nom de votre module (espaces supprimés) ManageFooWorksPortal

Exemple d'utilisation :

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

Ajouter des informations de routage

Si vous débutez avec Angular, nous vous recommandons de vous documenter sur le routage et la navigation Angular. Les sections suivantes définissent les éléments de routage nécessaires qui permettent à Windows Admin Center de naviguer vers votre extension et entre les vues de votre extension en réponse à l’activité des utilisateurs. Pour en savoir plus, consultez l’aide sur le routeur

Utilisez le même nom de module que celui que vous avez utilisé à l’étape précédente.

Ajouter du contenu au nouveau fichier de routage

  1. Accédez au dossier de module créé par ng generate à l’étape précédente.

  2. Créez un fichier {!module-name}.routing.ts, en respectant la convention d’affectation de noms suivante :

    Valeur Explication Exemple de nom de fichier
    {!module-name} Le nom de votre module (en minuscules, les espaces sont remplacés par des tirets) manage-foo-works-portal.routing.ts

  3. Ajoutez ce contenu au fichier créé :

    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. Remplacez les valeurs du fichier créé par les valeurs souhaitées :

    active Explication Exemple
    {!ModuleName} Nom de votre module (espaces supprimés) ManageFooWorksPortal
    {!module-name} Le nom de votre module (en minuscules, les espaces sont remplacés par des tirets) manage-foo-works-portal

Ajouter du contenu au nouveau fichier de module

  1. Ouvrez le fichier {!module-name}.module.ts, qui respecte la convention d’affectation de noms suivante :

    Valeur Explication Exemple de nom de fichier
    {!module-name} Le nom de votre module (en minuscules, les espaces sont remplacés par des tirets) manage-foo-works-portal.module.ts

  2. Ajoutez du contenu au fichier :

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

  3. Remplacez les valeurs du contenu que vous venez d’ajouter par les valeurs souhaitées :

    Valeur Explication Exemple
    {!module-name} Le nom de votre module (en minuscules, les espaces sont remplacés par des tirets) manage-foo-works-portal

  4. Modifiez l’instruction imports pour importer le routage :

    Valeur d'origine Nouvelle valeur
    imports: [ CommonModule ] imports: [ CommonModule, Routing ]

  5. Vérifiez que les instructions import sont en ordre alphabétique par source.

Ajouter du contenu au nouveau fichier TypeScript de composant

  1. Ouvrez le fichier {!module-name}.component.ts, qui respecte la convention d’affectation de noms suivante :

    Valeur Explication Exemple de nom de fichier
    {!module-name} Le nom de votre module (en minuscules, les espaces sont remplacés par des tirets) manage-foo-works-portal.component.ts

  2. Modifiez le contenu du fichier pour qu’il corresponde à l’exemple suivant.

    constructor() {
    // TODO
}

public ngOnInit() {
    // TODO
}

Mettre à jour app-routing.module.ts

  1. Ouvrez le fichier app-routing.module.ts, puis modifiez le chemin par défaut afin qu’il charge le nouveau module que vous avez créé. Recherchez l’entrée pour path: '', et mettez à jour loadChildren pour charger votre module au lieu du module par défaut :

    Valeur Explication Exemple
    {!ModuleName} Nom de votre module (espaces supprimés) ManageFooWorksPortal
    {!module-name} Le nom de votre module (en minuscules, les espaces sont remplacés par des tirets) manage-foo-works-portal 
        {
        path: '',
        loadChildren: 'app/{!module-name}/{!module-name}.module#{!ModuleName}Module'
    },

    Voici un exemple de chemin d’accès par défaut mis à jour :

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

Générer et charger la version test de votre extension

Vous avez maintenant ajouté un module à votre extension. Ensuite, vous pouvez générer et charger latéralement votre extension dans Windows Admin Center pour voir les résultats.