도구 확장에 모듈 추가
적용 대상: Windows 관리 Center, Windows 관리 Center 미리 보기
이 문서에서는 Windows 관리 Center CLI를 사용하여 만든 도구 확장에 빈 모듈을 추가합니다.
환경 준비
아직 수행하지 않은 경우 도구(또는 솔루션) 확장 개발의 지침에 따라 환경을 준비하고 비어 있는 새 도구 확장을 만듭니다.
Angular CLI를 사용하여 모듈(및 구성 요소) 만들기
Angular를 접하는 경우 Angular 웹 사이트의 설명서를 읽고 Angular 및 NgModule에 대해 알아보는 것이 좋습니다. 지침은 NgModule을 참조하세요.
자세히 알아보려면 다음을 수행합니다.
- Angular CLI에서 새 모듈 생성
- Angular CLI에서 새 구성 요소 생성
명령 프롬프트를 열고 프로젝트에서 디렉터리를 .\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 관리 센터에서 사용자 활동에 대한 응답으로 확장 및 확장의 보기 사이로 이동할 수 있도록 하는 필요한 라우팅 요소를 정의합니다. 자세한 내용은 라우터 지침을 참조 하세요.
이전 단계에서 사용한 것과 동일한 모듈 이름을 사용합니다.
새 라우팅 파일에 콘텐츠 추가
이전 단계에서 만든
ng generate
모듈 폴더로 찾습니다.이 명명 규칙에 따라 새 파일을
{!module-name}.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
파일에 콘텐츠를 추가합니다.
import { Routing } from './{!module-name}.routing';
방금 추가된 콘텐츠의 값을 원하는 값으로 바꿉다.
값 설명 예시 {!module-name}
모듈 이름(소문자, 대시로 바뀐 공백) manage-foo-works-portal
라우팅을 가져오도록 imports 문을 수정합니다.
원래 값 새로운 값 imports: [ CommonModule ]
imports: [ CommonModule, Routing ]
문이 원본별로 사전순으로 정렬되어 있는지 확인
import
합니다.
새 구성 요소 TypeScript 파일에 콘텐츠 추가
다음 명명 규칙을 사용하여 찾은 파일을
{!module-name}.component.ts
엽니다.값 설명 파일 이름 예제 {!module-name}
모듈 이름(소문자, 대시로 바뀐 공백) manage-foo-works-portal.component.ts
다음 예제와 일치하도록 파일의 콘텐츠를 수정합니다.
constructor() { // TODO } public ngOnInit() { // TODO }
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 관리 센터에서 확장을 빌드하고 테스트용으로 로드하여 결과를 확인할 수 있습니다.