도구 확장에 모듈 추가

아티클
09/25/2024
적용 대상:

✅ Windows Admin Center, ✅ Windows Admin Center Preview

해당 문서는 Windows Admin Center CLI를 사용하여 만든 도구 확장에 빈 모듈을 추가합니다.

사용자 환경 준비하기

아직 수행하지 않은 경우 도구(또는 솔루션) 확장 개발의 지침에 따라 환경을 준비하고 비어 있는 새 도구 확장을 만듭니다.

Angular CLI를 사용하여 모듈(및 구성 요소) 생성하기

Angular를 처음 접하는 경우 Angular 웹 사이트의 설명서를 읽고 Angular 및 NgModule에 대해 알아보는 것이 좋습니다. 지침은 NgModule을 참조하세요.

자세히 알아보려면 다음을 수행합니다.

명령 프롬프트를 열고 프로젝트에서 디렉터리를 .\src\app으로 변경한 다음 다음 명령을 실행하여 {!ModuleName}을 모듈 이름(공백 제거됨)으로 바꿉니다.

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

값	설명	예시
`{!ModuleName}`	모듈 이름(공백 제거)	`ManageFooWorksPortal`

예제 사용법:

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

라우팅 정보 추가

Angular를 접하는 경우 Angular 라우팅 및 탐색에 대해 알아보는 것이 좋습니다. 다음 섹션에서는 Windows Admin Center가 사용자 활동에 대한 응답으로 확장 및 확장의 보기 사이로 이동할 수 있도록 하는 필요한 라우팅 요소를 정의합니다. 자세한 내용은 라우터 지침을 참조하세요.

이전 단계에서 사용한 것과 동일한 모듈 이름을 사용합니다.

새 라우팅 파일에 콘텐츠 추가

이전 단계에서 ng generate이 생성한 모듈 폴더로 이동합니다.
이 명명 규칙에 따라 새 파일 {!module-name}.routing.ts을 만듭니다.

값 설명 예시 파일 이름

{!module-name} 모듈 이름(소문자, 대시로 대체된 공백) manage-foo-works-portal.routing.ts

값	설명	예시 파일 이름
`{!module-name}`	모듈 이름(소문자, 대시로 대체된 공백)	`manage-foo-works-portal.routing.ts`

다음 콘텐츠를 생성된 파일에 추가합니다.

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

만든 파일의 값을 원하는 값으로 바꿉니다.

값 설명 예시

{!ModuleName} 모듈 이름(공백 제거) ManageFooWorksPortal

{!module-name} 모듈 이름(소문자, 대시로 대체된 공백) manage-foo-works-portal

새 모듈 파일에 콘텐츠 추가

다음 명명 규칙을 사용하여 찾은 {!module-name}.module.ts 파일을 엽니다.

값 설명 예시 파일 이름

{!module-name} 모듈 이름(소문자, 대시로 대체된 공백) manage-foo-works-portal.module.ts

값	설명	예시 파일 이름
`{!module-name}`	모듈 이름(소문자, 대시로 대체된 공백)	`manage-foo-works-portal.module.ts`

파일에 콘텐츠 추가.

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

방금 추가된 콘텐츠의 값을 원하는 값으로 바꿉니다.

값 설명 예시

{!module-name} 모듈 이름(소문자, 대시로 대체된 공백) manage-foo-works-portal
라우팅을 가져오도록 imports 문을 수정합니다.

원래 값 새 값

imports: [ CommonModule ] imports: [ CommonModule, Routing ]
import 문이 원본별로 사전순으로 정렬되어 있는지 확인합니다.

값	설명	예시
`{!module-name}`	모듈 이름(소문자, 대시로 대체된 공백)	`manage-foo-works-portal`

원래 값	새 값
`imports: [ CommonModule ]`	`imports: [ CommonModule, Routing ]`

새 구성 요소 TypeScript 파일에 콘텐츠 추가

다음 명명 규칙을 사용하여 찾은 {!module-name}.component.ts 파일을 엽니다.

값 설명 예시 파일 이름

{!module-name} 모듈 이름(소문자, 대시로 대체된 공백) manage-foo-works-portal.component.ts
다음 예제와 일치하도록 파일의 내용을 수정합니다.
```
constructor() {
    // TODO
}

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

값	설명	예시 파일 이름
`{!module-name}`	모듈 이름(소문자, 대시로 대체된 공백)	`manage-foo-works-portal.component.ts`

app-routing.module.ts 업데이트

파일 app-routing.module.ts을 열고 만든 새 모듈을 로드할 수 있도록 기본 경로를 수정합니다. path: ''에 대한 항목을 찾고, 기본 모듈 대신 모듈을 로드하도록 loadChildren를 업데이트 합니다.

값 설명 예시

{!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에서 확장을 빌드하고 사이드 로드하여 결과를 확인할 수 있습니다.

다음을 통해 공유