Angular-cli: ng μΆ”κ°€ - ν”„λ‘œμ νŠΈ 이름을 μ§€μ •ν•˜μ‹­μ‹œμ˜€

에 λ§Œλ“  2018λ…„ 05μ›” 25일  Β·  1논평  Β·  좜처: angular/angular-cli

버전

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / β–³ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.0.5
Node: 10.1.0
OS: darwin x64
Angular: 6.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.6.5
@angular-devkit/build-angular      0.6.5
@angular-devkit/build-ng-packagr   0.6.5
@angular-devkit/build-optimizer    0.6.5
@angular-devkit/core               0.6.5
@angular-devkit/schematics         0.6.5
@angular/cli                       6.0.5
@angular/material                  6.1.0
@ngtools/json-schema               1.1.0
@ngtools/webpack                   6.0.5
@schematics/angular                0.6.5
@schematics/update                 0.6.5
ng-packagr                         3.0.0-rc.5
rxjs                               6.2.0
typescript                         2.7.2
webpack                            4.8.3

μž¬ν˜„ 단계

  • 1 단계
    ng new angular-project 둜 μƒˆ ν”„λ‘œμ νŠΈ μ‹œμž‘
  • 2 단계
    μƒˆ angular-cli ν”„λ‘œμ νŠΈ λ‚΄μ—μ„œ 라이브러리/μ‘μš© ν”„λ‘œκ·Έλž¨ 생성
    sh ng g library mylibrary ng g application myapp
  • 3단계
    @angular/material μΆ”κ°€
    ng add @angular/material myapp Installing packages for tooling via npm. Multiple projects are defined; please specify a project name

κ΄€μ°°λœ 행동

@angular/material λŠ” λ…Έλ“œ 쒅속성에 μ˜¬λ°”λ₯΄κ²Œ μ„€μΉ˜λ˜μ§€λ§Œ myapp ν”„λ‘œμ νŠΈλŠ” 라이브러리λ₯Ό μ‚¬μš©ν•˜λ„λ‘ κ΅¬μ„±λ˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€.

μ›ν•˜λŠ” 행동

ν˜„μž¬ ng add μ‚¬μš©λŸ‰: usage: ng add <collection>
μ΄μƒμ μœΌλ‘œλŠ” λ‹€μŒκ³Ό 같이 λŒ€μƒ 앱을 전달할 수 μžˆμ–΄μ•Ό ν•©λ‹ˆλ‹€.

usage: ng add <collection> [options]
options:
  --project
      The name of the project.
angulacli feature

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

λ‚˜λ„ λ˜‘κ°™μ΄ ν•˜λ €κ³  ν–ˆλ‹€. ng add @angular/material --project=my-app ν•˜λ©΄ "μž‘λ™"ν•©λ‹ˆλ‹€. λ‚΄κ°€ κ΄€μ°°ν•œ λ‚΄μš©μ€ λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

  1. λ¬Έμ„œμ—μ„œλŠ” 이 λ§€κ°œλ³€μˆ˜λ₯Ό μ§€μ •ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.
  2. ng generate @angular/material:material-nav --name=app-nav λŠ” κΈ°λ³Έ ν”„λ‘œμ νŠΈμ—μ„œ μƒμ„±ν•˜λŠ” λŒ€μ‹  src\app μ—μ„œ ꡬ성 μš”μ†Œλ₯Ό μŠ€μΊν΄λ“œν•©λ‹ˆλ‹€. λ˜ν•œ --project=my-app λ₯Ό μΆ”κ°€ν•˜μ—¬ μ˜¬λ°”λ₯Έ μœ„μΉ˜λ‘œ μ„€μ •ν•΄μ•Ό ν•©λ‹ˆλ‹€.
  3. ng serve --project=demo λŠ” μ˜¬λ°”λ₯Έ 앱을 μ œκ³΅ν•©λ‹ˆλ‹€.
  4. μƒμ„±λœ ν…œν”Œλ¦Ώμ—λŠ” μ•½κ°„μ˜ 버그가 μžˆμŠ΅λ‹ˆλ‹€. isHandset$ | async λŠ” ()

>λͺ¨λ“  λŒ“κΈ€

λ‚˜λ„ λ˜‘κ°™μ΄ ν•˜λ €κ³  ν–ˆλ‹€. ng add @angular/material --project=my-app ν•˜λ©΄ "μž‘λ™"ν•©λ‹ˆλ‹€. λ‚΄κ°€ κ΄€μ°°ν•œ λ‚΄μš©μ€ λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

  1. λ¬Έμ„œμ—μ„œλŠ” 이 λ§€κ°œλ³€μˆ˜λ₯Ό μ§€μ •ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.
  2. ng generate @angular/material:material-nav --name=app-nav λŠ” κΈ°λ³Έ ν”„λ‘œμ νŠΈμ—μ„œ μƒμ„±ν•˜λŠ” λŒ€μ‹  src\app μ—μ„œ ꡬ성 μš”μ†Œλ₯Ό μŠ€μΊν΄λ“œν•©λ‹ˆλ‹€. λ˜ν•œ --project=my-app λ₯Ό μΆ”κ°€ν•˜μ—¬ μ˜¬λ°”λ₯Έ μœ„μΉ˜λ‘œ μ„€μ •ν•΄μ•Ό ν•©λ‹ˆλ‹€.
  3. ng serve --project=demo λŠ” μ˜¬λ°”λ₯Έ 앱을 μ œκ³΅ν•©λ‹ˆλ‹€.
  4. μƒμ„±λœ ν…œν”Œλ¦Ώμ—λŠ” μ•½κ°„μ˜ 버그가 μžˆμŠ΅λ‹ˆλ‹€. isHandset$ | async λŠ” ()
이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰