CLI를 사용하여 구성 요소를 삭제하는 가장 좋은 방법은 무엇입니까
답변:
destroy또는 CLI에 비슷한 것이있을 수 있지만 현재로서는 주요 초점이 아닙니다. 따라서 수동으로 수행해야합니다.
구성 요소 디렉토리를 삭제하고 (사용하지 않았다고 가정 --flat) NgModule선언 된 위치에서 제거하십시오 .
무엇을해야할지 잘 모르겠다면 현재 git변경 사항이 없는 "깨끗한"앱을 사용하는 것이 좋습니다 . 그런 다음 구성 요소를 생성하고 리포지토리에서 변경된 내용을 확인하여 구성 요소를 삭제하는 데 필요한 작업을 역 추적 할 수 있습니다.
최신 정보
생성하려는 항목에 대해서만 실험하는 경우 --dry-run플래그를 사용하여 디스크에 파일을 생성하지 않고 업데이트 된 파일 목록을 볼 수 있습니다.
- 이 구성 요소가 포함 된 폴더를 삭제하십시오.
- app.module.ts에서이 컴포넌트의 import 문을 제거하고 @NgModule의 선언 섹션에서 이름을 제거하십시오.
- index.ts에서이 구성 요소에 대한 내보내기 명령문이있는 행을 제거하십시오.
각도 CLI를 사용하여 아직 지원되지 않기 때문에
CLI를 사용하여 구성 요소 / 서비스를 만들 때 어떤 일이 발생하는지 관찰하십시오 (예 :) ng g c demoComponent.
demoComponent(ng g c demoComponent) 라는 별도의 폴더를 만듭니다 .- 그것은 생성
HTML,CSS,ts하고spec파일 demoComponent에 전념. - 또한 app.module.ts 파일에 종속성을 추가하여 해당 구성 요소를 프로젝트에 추가합니다.
그래서 역순으로
- 에서 종속성 제거
app.module.ts - 해당 구성 요소 폴더를 삭제하십시오.
종속성을 제거 할 때는 두 가지 작업을 수행해야합니다.
- app.module.ts 파일에서 가져 오기 라인 참조를 제거하십시오.
- app.module.ts의 @NgModule 선언 배열에서 컴포넌트 선언을 제거하십시오.
현재 Angular CLI는 구성 요소를 제거하는 옵션을 지원하지 않으므로 수동으로 수행해야합니다.
- app.module에서 모든 구성 요소에 대한 가져 오기 참조 제거
- 구성 요소 폴더를 삭제하십시오.
- 또한 app.module.ts 파일의 @NgModule 선언 배열에서 구성 요소 선언을 제거해야합니다.
아래의 Yakov Fain이 작성한 프로세스를 자동화 해야하는 bash 스크립트를 작성했습니다. ./removeComponent myComponentName 과 같이 호출 할 수 있습니다. 이것은 Angular 6에서만 테스트되었습니다.
#!/bin/bash
if [ "$#" -ne 1 ]; then
echo "Input a component to delete"
exit 1
fi
# finds folder with component name and deletes
find . -type d -name $1 | xargs rm -rf
# removes lines referencing the component from app.module.ts
grep -v $1 app.module.ts > temp
mv temp app.module.ts
componentName=$1
componentName+="Component"
grep -v -i $componentName app.module.ts > temp
mv temp app.module.ts
app.module.ts에서 :
- 특정 구성 요소에 대한 가져 오기 라인을 지우십시오.
- @NgModule에서 선언을 지우십시오.
그런 다음 삭제와 포함 된 파일 할 구성 요소의 폴더를 삭제 ( .component.ts, .component.html, .component.css및 .component.spec.ts).
끝난.
-
main.ts에서 지우는 것에 대해 말하는 사람들을 읽었습니다. AppModule을 이미 가져 오기 때문에 처음부터 가져 오지 않아야했으며 AppModule은 사용자가 만든 모든 구성 요소를 가져 오는 것입니다.
이것은 Angular CLI에서 지원되지 않으며 조만간이를 포함시킬 기분이 아닙니다.
실제 생성 된 문제에 대한 링크는 다음과 같습니다-https: //github.com/angular/angular-cli/issues/1776
그리고 공무원의 솔루션 스크린 샷-
git checkout src).