Angular CLI-빌드 명령

통사론

ng build <project> [options]
ng b <project> [options]

ng build 명령은 각도 응용 프로그램 / 라이브러리를 주어진 경로에서 dist라는 출력 디렉토리로 컴파일합니다. 옵션은 선택적 매개 변수입니다.

인수

Sr. 아니.	인수 및 구문	기술
1	<프로젝트>	빌드 할 애플리케이션 또는 라이브러리의 이름입니다.

옵션

Sr. 아니.	옵션 및 구문	기술
1	--aot = true | false	Ahead of Time 컴파일을 사용하여 빌드합니다. 기본값 : 거짓.
2	--baseHref = baseHref	빌드중인 애플리케이션의 기본 URL입니다.
삼	--buildEventLog = buildEventLog	실험적 이벤트 프로토콜 빌드 이벤트에 대한 출력 파일 경로입니다.
4	--buildOptimizer = true | false	'aot'옵션을 사용할 때 '@ angular-devkit / build-optimizer'최적화를 활성화합니다. 기본값 : 거짓.
5	--commonChunk = true | false	여러 번들에 사용되는 코드가 포함 된 별도의 번들을 사용하십시오. 기본값 : 거짓.
6	--configuration = configuration	angular.json의 "configurations"섹션에 지정된 명명 된 빌드 대상입니다. 명명 된 각 대상에는 해당 대상에 대한 옵션 기본값 구성이 함께 제공됩니다. 이를 설정하면 "--prod"플래그가 명시 적으로 재정의됩니다. 별칭 : -c.
7	--crossOrigin = none | anonymous | use-credentials	CORS 지원을 제공하는 요소의 crossorigin 속성 설정을 정의하십시오. 기본값 : 없음.
8	--deleteOutputPath = true | false	빌드하기 전에 출력 경로를 삭제하십시오. 기본값 : true.
9	--deployUrl = deployUrl	파일이 배포 될 URL입니다.
10	--experimentalRollupPass = true | false	모듈을 Webpack과 번들링하기 전에 Rollup과 연결하십시오. 기본값 : 거짓.
11	--extractCss = true | false	전역 스타일에서 CSS 파일을 js 대신 CSS 파일로 추출합니다. 기본값 : 거짓.
12	--extractLicenses = true | false	별도의 파일에 모든 라이센스를 추출하십시오. 기본값 : 거짓.
13	--forkTypeChecker = true | false	분기 된 프로세스에서 TypeScript 유형 검사기를 실행합니다. 기본값 : true.
14	--help = true | false | json | JSON	콘솔에이 명령에 대한 도움말 메시지를 표시합니다. 기본값 : 거짓.
15	--i18nMissingTranslation = warning | error | ignore	i18n에서 누락 된 번역을 처리하는 방법. 기본값 : 경고.
16	--index = index	애플리케이션의 HTML 색인 생성을 구성합니다.
17	--localize = true | false
18	--main = main	현재 작업 영역을 기준으로 앱에 대한 기본 진입 점의 전체 경로입니다.
19	--namedChunks = true | false	지연로드 된 청크에는 파일 이름을 사용하십시오. 기본값 : true.
20	--ngswConfigPath = ngswConfigPath	ngsw-config.json의 경로입니다.
21	--optimization = true | false	빌드 출력의 최적화를 활성화합니다.
22	--outputHashing = none | all | media | bundles	출력 파일 이름 캐시 무효화 해싱 모드를 정의합니다. 기본값 : 없음.
23	--outputPath = outputPath	현재 작업 공간에 상대적인 새 출력 디렉토리의 전체 경로입니다. 기본적으로 현재 프로젝트의 dist / 폴더에 출력을 씁니다.
24	--투표	폴링 시간을 밀리 초 단위로 감시하는 파일을 활성화하고 정의합니다.
25	--polyfills = polyfills	현재 작업 공간에 상대적인 polyfills 파일의 전체 경로입니다.
26	--preserveSymlinks = true | false	모듈을 확인할 때 실제 경로를 사용하지 마십시오. 기본값 : 거짓.
27	--prod = true | false	"--configuration = production"의 약자입니다. true 인 경우 빌드 구성을 프로덕션 대상으로 설정합니다. 기본적으로 프로덕션 타겟은 모든 빌드가 번들링, 제한된 트리 쉐이킹 및 제한된 데드 코드 제거를 사용하도록 작업 공간 구성에 설정됩니다.
28	--progress = true | false	빌드하는 동안 진행 상황을 콘솔에 기록합니다. 기본값 : true.
27	--resourcesOutputPath = resourcesOutputPath	outputPath에 상대적인 스타일 리소스가 배치 될 경로입니다.
28	--serviceWorker = true | false	프로덕션 빌드를위한 서비스 워커 구성을 생성합니다. 기본값 : 거짓.
29	--showCircularDependencies = true | false	빌드에 순환 종속성 경고를 표시합니다. 기본값 : true.
30	--sourceMap = true | false	출력 소스 맵. 기본값 : true.
31	--statsJson = true | false	'webpack-bundle-analyzer'와 같은 도구를 사용하여 분석 할 수있는 'stats.json'파일을 생성합니다. 기본값 : 거짓.
32	--subresourceIntegrity = true | false	하위 리소스 무결성 유효성 검사를 사용합니다. 기본값 : 거짓.
33	--tsConfig = tsConfig	현재 작업 공간에 상대적인 TypeScript 구성 파일의 전체 경로입니다.
34	--vendorChunk = true | false	공급 업체 라이브러리 만 포함 된 별도의 번들을 사용하십시오. 기본값 : true.
35	--verbose = true | false	출력 로깅에 더 많은 세부 정보를 추가합니다. 기본값 : true.
36	--watch = true | false	파일이 변경되면 빌드를 실행합니다. 기본값 : 거짓.
37	--webWorkerTsConfig = webWorkerTsConfig	웹 작업자 모듈에 대한 TypeScript 구성.

먼저 ng generate 명령을 사용하여 업데이트 된 각도 프로젝트로 이동합니다 . app.component.html의 내용을 다음 내용으로 바꾼 후 명령을 실행하십시오.

<app-goals></app-goals>
<router-outlet></router-outlet>

예

\>Node\>TutorialsPoint> ng build
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/core : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/animations/browser/testing : es2015 as esm2015
Compiling @angular/common/http/testing : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.

chunk {polyfills} polyfills-es2015.js, polyfills-es2015.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime-es2015.js, runtime-es2015.js.map (runtime) 6.16 kB [entry] [rendered]
chunk {runtime} runtime-es5.js, runtime-es5.js.map (runtime) 6.16 kB [entry] [rendered]
chunk {styles} styles-es2015.js, styles-es2015.js.map (styles) 12.4 kB [initial] [rendered]
chunk {styles} styles-es5.js, styles-es5.js.map (styles) 13.9 kB [initial] [rendered]
chunk {main} main-es2015.js, main-es2015.js.map (main) 61.4 kB [initial] [rendered]
chunk {main} main-es5.js, main-es5.js.map (main) 65 kB [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 656 kB [initial] [rendered]
chunk {vendor} vendor-es2015.js, vendor-es2015.js.map (vendor) 2.67 MB [initial] [rendered]
chunk {vendor} vendor-es5.js, vendor-es5.js.map (vendor) 3.11 MB [initial] [rendered]
Date: 2020-06-04T01:31:35.612Z - Hash: d5fd9371cdc40ae353bc - Time: 210494ms

여기 ng 빌드 명령이 우리 프로젝트 TutorialsPoint를 성공적으로 빌드했습니다.