not-for-me / hb-angular-first

한빛미디어 앵귤러 첫걸음 예제 코드

앵귤러 첫걸음

• 온라인 미리보기

• 출판사 (한빛미디어)

• Yes24

• 알라딘

• 교보문고

• 반디앤루니스

• 인터파크

Angular 5 버전 반영

• 최신 버전이 반영되었습니다.
• 최신 버전은 책의 예제와 약간의 차이가 있습니다. 책의 예제코드는 ng-v4 태그의 커밋을 참조해 주세요.

git checkout ng-v4

• 관련 이슈 #19

오탈자 및 오류/변경 사항

1. 3장 예제 책의 코드 변경 (변경내역).

   • 3장 다국어 환영 메시지 서비스 -> 다국어 환영 인사 서비스
   • 3장 한글 -> 한국어

2. 43쪽 2번째 클래스 예제 코드

   • constructor(public string ...) -> constructor(public name ...)

3. 214쪽 그림 6-16 위 단락 4번째줄

   • [그림 6-16]의 우측 상단에는 -> [그림 6-16]의 좌측 상단에는
   • 자식 컴포넌트가 좌측에 선언되어 있습니다. -> 자식 컴포넌트가 우측에 선언되어 있습니다.

4. 70쪽 양방향 데이터 바인딩 맛보기

   • Angular CLI가 1.1 이후에 변경된 내용이 발생하여 70쪽 예제를 실습을 위해 추가 작업이 필요합니다.
   • src/app/app.module.ts 파일에 다음 링크와 같이 코드를 수정해야 합니다. 코드 링크

예제 코드 실행 방법

• 먼저, 예제의 실행을 위해서는 다음의 도구가 필요합니다.

  1. npm 혹은 yarn 설치
  2. 앵귤러 CLI 설치 (npm -g i @angular/cli)

• 소스를 다운로드 받은 후에 각 프로젝트 폴더에서 패키지 인스톨 후에 예제를 직접 실행해 볼 수 있습니다.

• [참고] 예제 코드 실행방법: Angular CLI에서 yarn 사용하기

예시

# 리파지토리 다운로드
$) git clone https://github.com/not-for-me/hb-angular-first.git

# 프로젝트 폴더 
$) cd hb-angular-first/ch03/ng-welcome-msg-app

# 패키지 설치
$) npm install (혹은 yarn)

# 앵귤러 CLI 개발 서버 
$) ng serve

# 브라우저에서 http://localhost:4200 에서 예제 실행 확인

단계적으로 예제 따라가기

• 예제의 모든 커밋은 책의 내용에 따라 순차적으로 변경내역이 반영되어 있습니다.
• 특별히 중요한 변경내역에는 태그를 붙여두어 손쉽게 특정 커밋을 체크아웃 받을 수 있습니다.

예시

# 태깅된 목록을 조회합니다.
$) git tag -l

# 5장의 태그만 보고 싶을 
$) git tag -l | grep -e ch5

# 3장의 4번째 변경내역 체크아웃
$) git checkout ch3-4

주요 예제 온라인 실습 코드

• 일부 간단한 예제의 경우 온라인에서 바로 동작 예제를 확인할 수 있도록 다음의 링크를 제공합니다.

장	링크	실습 예제
4	https://embed.plnkr.co/nSKxNw	NgIf 지시자
4	https://embed.plnkr.co/KyGLSK	NgFor 지시자
4	https://embed.plnkr.co/OI7zup	NgSwitch 지시자
4	https://embed.plnkr.co/goPGcq	Pipe
6	https://embed.plnkr.co/OVQ7Eu	ViewChild
6	https://embed.plnkr.co/R9ppp3	템플릿 참조 변수
6	https://embed.plnkr.co/SwHzA3	컨텐트 프로젝션
6	https://embed.plnkr.co/55lLof	NgOnInit/Destory
6	https://embed.plnkr.co/ZqfVSF	NgOnChanges
6	https://embed.plnkr.co/3gLODm	DoCheck
책에 없음	https://embed.plnkr.co/QB5jlX	지시자의 라이프 사이클
책에 없음	https://embed.plnkr.co/nRcg7v	프로퍼티 바인딩 관계
8	https://embed.plnkr.co/LfXMl3	NgModel

hb-angular-first's Issues

최신버전 반영

• Angular 5.1.0
• Angular CLI 1.6.0
• Material 5.0.0
  • md prefix => mat

page 273 2번째 줄 수정 질문

273페이지 3번째 줄에 ‘OnInit 생명주기가 실행될 때 @ViewChild('myModel') myNgModel 의 값이 바인딩되므로’라고 적혀있는데 OnAfterViewInit 생명주기 이후에 접근이 맞지 않나요?

70페이지 소스 변경관련 이슈발생

70쪽 양방향 데이터 바인딩 맛보기
Angular CLI가 1.1 이후에 변경된 내용이 발생하여 70쪽 예제를 실습을 위해 추가 작업이 필요합니다.
src/app/app.module.ts 파일에 다음 링크와 같이 코드를 수정해야 합니다

관련이슈로 app.module.ts 가 수정되었는데
관련하여 package.json 도 변경되어야 할 것 같습니다.
"@angular/cli": "1.0.1" -> "@angular/cli": "1.0.4"

ch07 v2코드예제 클론후 실행중에러가 발생했습니다.

** NG Live Development Server is running on http://localhost:4200 **
86% hashingcrypto.js:74
this._handle.update(data, encoding);
^

TypeError: Data must be a string or a buffer
at TypeError (native)
at Hash.update (crypto.js:74:16)
at HarmonyExportImportedSpecifierDependency.updateHash (D:\공유폴더\프로그래밍\hb-angular-first-master\ch07\contacts-manager-v2\node_modules\webpack\lib\dependencies\HarmonyExportI
mportedSpecifierDependency.js:144:8)
at D:\공유폴더\프로그래밍\hb-angular-first-master\ch07\contacts-manager-v2\node_modules\webpack\lib\DependenciesBlock.js:33:5
at Array.forEach (native)
at NormalModule.DependenciesBlock.updateHash (D:\공유폴더\프로그래밍\hb-angular-first-master\ch07\contacts-manager-v2\node_modules\webpack\lib\DependenciesBlock.js:32:20)
at NormalModule.Module.updateHash (D:\공유폴더\프로그래밍\hb-angular-first-master\ch07\contacts-manager-v2\node_modules\webpack\lib\Module.js:162:41)
at NormalModule.updateHash (D:\공유폴더\프로그래밍\hb-angular-first-master\ch07\contacts-manager-v2\node_modules\webpack\lib\NormalModule.js:327:30)
at modules.forEach.m (D:\공유폴더\프로그래밍\hb-angular-first-master\ch07\contacts-manager-v2\node_modules\webpack\lib\Chunk.js:253:31)
at Array.forEach (native)
at Chunk.updateHash (D:\공유폴더\프로그래밍\hb-angular-first-master\ch07\contacts-manager-v2\node_modules\webpack\lib\Chunk.js:253:16)
at Compilation.createHash (D:\공유폴더\프로그래밍\hb-angular-first-master\ch07\contacts-manager-v2\node_modules\webpack\lib\Compilation.js:1121:10)
at sealPart2 (D:\공유폴더\프로그래밍\hb-angular-first-master\ch07\contacts-manager-v2\node_modules\webpack\lib\Compilation.js:605:9)
at next (D:\공유폴더\프로그래밍\hb-angular-first-master\ch07\contacts-manager-v2\node_modules\tapable\lib\Tapable.js:184:11)
at Compilation. (D:\공유폴더\프로그래밍\hb-angular-first-master\ch07\contacts-manager-v2\node_modules\webpack\lib\ProgressPlugin.js:110:5)
at next (D:\공유폴더\프로그래밍\hb-angular-first-master\ch07\contacts-manager-v2\node_modules\tapable\lib\Tapable.js:186:14)

위와 같은 에러 생성후 실행이 되지 않습니다.

관련 이슈 사항을 찾아보니 webpack/webpack#4072 여기에 뭔가 해결책이 있는거 처럼 나오는데 잘모르겠습니다. 확인 부탁드릴께요

7장 in-memory-web-api Breaking Changes 반영

https://github.com/angular/in-memory-web-api#http-response-data-no-longer-wrapped-in-object-w-data-property

363페이지 그림 11-2 질문입니다.

그림에서 Advanced Route 가 나오는데요, 이것이 ActivatedRoute를 뜻하는 건가요?
ActivatedRoute 의 인터페이스 인지요?
오타인지 상위 인터페이스인지 판단이 서지않아 문의 드립니다.

소스 컴파일 에러가 발생합니다.

전체 소스 클론 후 ch03 폴더로 들어가서 npm install 후 ng serve 했는데 아래와 같은 에러와 워닝메세지가 출력됩니다.
윈도우10 64bit 최신버전입니다.

npm install 했을 땐 이런 워닝 메세지가 뜹니다.

npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

아래는 ng serve 하고나서의 에러 메세지입니다.

Your global Angular CLI version (1.2.3) is greater than your local version (1.0.1). The local Angular CLI version is used.

To disable this warning use "ng set --global warnings.versionMismatch=false".

 86% hashingcrypto.js:74
  this._handle.update(data, encoding);
               ^

TypeError: Data must be a string or a buffer
    at TypeError (native)
    at Hash.update (crypto.js:74:16)
    at HarmonyExportImportedSpecifierDependency.updateHash (C:\Users\koma\Documents\hb-angular-first\ch03\ng-welcome-msg-app\node_modules\webpack\lib\dependencies\HarmonyExportImportedSpecifierDependency.js:144:8)
    at C:\Users\koma\Documents\hb-angular-first\ch03\ng-welcome-msg-app\node_modules\webpack\lib\DependenciesBlock.js:33:5
    at Array.forEach (native)
    at NormalModule.DependenciesBlock.updateHash (C:\Users\koma\Documents\hb-angular-first\ch03\ng-welcome-msg-app\node_modules\webpack\lib\DependenciesBlock.js:32:20)
    at NormalModule.Module.updateHash (C:\Users\koma\Documents\hb-angular-first\ch03\ng-welcome-msg-app\node_modules\webpack\lib\Module.js:162:41)
    at NormalModule.updateHash (C:\Users\koma\Documents\hb-angular-first\ch03\ng-welcome-msg-app\node_modules\webpack\lib\NormalModule.js:327:30)
    at modules.forEach.m (C:\Users\koma\Documents\hb-angular-first\ch03\ng-welcome-msg-app\node_modules\webpack\lib\Chunk.js:253:31)
    at Array.forEach (native)
    at Chunk.updateHash (C:\Users\koma\Documents\hb-angular-first\ch03\ng-welcome-msg-app\node_modules\webpack\lib\Chunk.js:253:16)
    at Compilation.createHash (C:\Users\koma\Documents\hb-angular-first\ch03\ng-welcome-msg-app\node_modules\webpack\lib\Compilation.js:1121:10)
    at sealPart2 (C:\Users\koma\Documents\hb-angular-first\ch03\ng-welcome-msg-app\node_modules\webpack\lib\Compilation.js:605:9)
    at next (C:\Users\koma\Documents\hb-angular-first\ch03\ng-welcome-msg-app\node_modules\tapable\lib\Tapable.js:184:11)
    at Compilation.<anonymous> (C:\Users\koma\Documents\hb-angular-first\ch03\ng-welcome-msg-app\node_modules\webpack\lib\ProgressPlugin.js:110:5)
    at next (C:\Users\koma\Documents\hb-angular-first\ch03\ng-welcome-msg-app\node_modules\tapable\lib\Tapable.js:186:14)

예제 폴더에서 ng --verison 입력하면 나오는 메세지입니다.

@angular/cli: 1.0.1
node: 6.11.1
os: win32 x64
@angular/animations: 4.3.1
@angular/common: 4.3.1
@angular/compiler: 4.3.1
@angular/core: 4.3.1
@angular/forms: 4.3.1
@angular/http: 4.3.1
@angular/material: 2.0.0-beta.8
@angular/platform-browser: 4.3.1
@angular/platform-browser-dynamic: 4.3.1
@angular/router: 4.3.1
@angular/cli: 1.0.1
@angular/compiler-cli: 4.3.1

원래 설치된 글로벌 버전은(일반 폴더에서) 이렇습니다.

@angular/cli: 1.2.3
node: 6.11.1
os: win32 x64

bootstrap 의존성 이슈입니다.

여러 예제들 중 bootstrap 사용한 예제에서 버전 에러 발생하여 이슈 올립니다.

npm ERR! notarget No compatible version found: [email protected]
npm ERR! notarget Valid install targets:
npm ERR! notarget 4.0.0-alpha.6, 4.0.0-alpha.5, 4.0.0-alpha.4, 4.0.0-alpha.3, 4.0.0-alpha.2, 3.3.7, 3.3.6, 3.3.5, 3.3.4, 3.3.2, 3.3.1, 3.3.0, 3.2.0, 3.1.1, 0.0.2, 0.0.1

4.0.0-alpha-6 대신 4.0.0-alpha.6 로 변경해야 할 것 같습니다.

LoadingSpinner 기능이 IE11에서 화면중앙이 아닌 오른쪽 끝에서 보여지는 이슈

안녕하세요.

책을 구매하여 2~3회 정도 정독하면서 실습코드를 테스트해 보고 있습니다.

Angular cli로 셋업시 최신의 BootStrap 4.0으로 설정하고 테스트 중인데 LoadingSpinner 기능이 IE11에서 화면중앙이 아닌 화면 오른쪽 끝에서 보여지고 있습니다.
-> Chrome브라우져에서는 정상적으로 화면중앙에 보여집니다.

아래 코드에서 modal-backdrop 속성이 IE11에서 이상하게 동작하는 것으로 의심은 되는데 더 이상 원인을 찾지 못해 조언을 구하고자 합니다.

CSS 내부 동작방식을 전혀 모르고 있고 브라우져 호환성 이슈여서 더욱 원인 파악이 쉽지 않습니다.

도움 부탁드립니다.

감사합니다.

ch07/contacts-manager-v2 material 이슈

ch07/contacts-manager-v2 예제에서 npm run start 커맨드를 실행하면
app.module.ts에서 error가 발생합니다.

ERROR in /Users/dev/personal/angular-study/hb-angular-first/ch07/contacts-manager-v2/src/app/app.module.ts (29,20): Property 'forRoot' does not exist on type 'typeof MaterialModule'.

ERROR in Error encountered resolving symbol values statically. Calling function 'MaterialModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in /Users/dev/personal/angular-study/hb-angular-first/ch07/contacts-manager-v2/src/app/app.module.ts, resolving symbol AppModule in /Users/dev/personal/angular-study/hb-angular-first/ch07/contacts-manager-v2/src/app/app.module.ts

해결 방법은 app.module.ts의 MaterialModule.forRoot() 부분을 아래와 같이 변경해야 합니다.

MaterialModule

@angular/material의 2.0.0-beta.2에서 해당 변경사항이 적용되었습니다.

현재 예제 프로잭트는 2.0.0-beta.3를 사용하고 있습니다.

관련 링크
@angular/material 2.0.0-beta2 Release Note
related issue

SCM: 상품 정보 없을 때 스피너 사라지지 않는 현상

원인

• 상품 정보 등록 없이 코드 최종 구현을 실행 시킬 때 스피너가 사라지지 않는 문제
• 최초화면(MainDashboardComponent)에서 상품 요약 정보 조회를 위해 여러 데이터를 호출
• 이 때 RxJs를 활용하여 파이어베이스로부터 데이터 조회 하는데 중간에 Observable.from 사용부분 있음
• 데이터가 없을 때 subscribe 메서드의 onSuccess 콜백이 미실행
• @dkd051님의 제보로 확인

해결 방안

• 스피너는 API 호출이 종료되면 무조건 사라져야 하므로 onComplete 콜백으로 spinner.stop()로직 이동

최신 CLI 버전에서 FormsModule 자동 import 안하는 문제

[(ngModel)] 이걸 인식하지 못하더군요

참고로 제가 사용하는 버전입니다.
@angular/cli: 1.1.3
node: 8.1.2
os: darwin x64
@angular/animations: 4.2.4
@angular/common: 4.2.4
@angular/compiler: 4.2.4
@angular/core: 4.2.4
@angular/forms: 4.2.4
@angular/http: 4.2.4
@angular/platform-browser: 4.2.4
@angular/platform-browser-dynamic: 4.2.4
@angular/router: 4.2.4
@angular/cli: 1.1.3
@angular/compiler-cli: 4.2.4
@angular/language-service: 4.2.4

책에는 앵귤러CLI로 생성한 프로젝트는 기본으로 FormsModule을 임포트 하고 있다고 되어 있어서
에러가 나는 원인을 의심하지 못했었습니다 ㅜㅜ

오타가 났는지 인코딩이 꼬였는지 이것저것 해보다가
혹시나해서 app.module.ts를 봤는데 import되어 있지 않더군요

아마 CLI 최신 버전에서는 FormsModule이 자동으로 임포트 되지 않나봅니다.
저같은 초보들의 삽질을 줄이기 위해 남겨봅니다.

수정한 내용도 같이 넣어봅니다.

대상 파일 :​app.module.ts

import { FormsModule} from '골뱅이angular/forms';

imports: [
BrowserModule, FormsModule
],

No provider for AngularFireDatabase!

책따라 해가면서 공부중에 있는데요 아래와 같은 에러가 개발자 도구에서 계속 뜨네요.
ERROR Error: No provider for AngularFireDatabase! at injectionError (core.es5.js:1168) at noProviderError (core.es5.js:1206) at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._throwOrNull (core.es5.js:2648) at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (core.es5.js:2687) at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKey (core.es5.js:2619) at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2488) at resolveNgModuleDep (core.es5.js:9472) at _createClass (core.es5.js:9515) at _createProviderInstance$1 (core.es5.js:9483) at resolveNgModuleDep (core.es5.js:9468)

책에서 처럼 저의 api키로 environment.ts 도 설정하고
database.rules.json도 설정하고 app.moudle.ts 에도
/* 3rd Modules */ imports: [ AngularFireModule.initializeApp(environment.firebase), AngularFireDatabaseModule, AngularFireAuthModule]
설정 잘해주었습니다.

simple-commerce-manager 실행시 providers 누락

이제 막 책을 보기 시작해서 이 예제를 할 단계는 아니지만
결과물이 궁금해서 돌려봤습니다.

Error: Uncaught (in promise): Error: No provider for SessionAuthGuardService

서버 실행하고 페이지 접속해보니 페이지는 뜨는데 각 메뉴를 눌러보면 군데군데서
이런 에러가 나오더군요

shared.module.ts 파일에서
SessionAuthGuardService, CategoryListResolverService, CategoryDetailResolverService
3개 항목 추가해주니 에러 없이 페이지가 잘 나옵니다.

추가한 결과물은 아래와 같고요
providers: [NoCounterService, DataStoreService, SpinnerService, CanDeactivateGuardService, SessionAuthGuardService, CategoryListResolverService, CategoryDetailResolverService]

여기에 추가하는건지 잘 모르겠지만 일단 동작을 하니 알려드립니다.
그리고 검색 기능은 에러도 없이 동작을 안하던데 확인 부탁드려요.

페이지 전환시 에러가 떠서..

src/app/category/category-routing.module.ts,
providers: [
SessionAuthGuardService,
CategoryDetailResolverService,
CategoryListResolverService
]
src/app/product/product-routing.module.ts
providers: [
SessionAuthGuardService,
ProductDetailResolverService,
ProductListResolverService,
]
페이지 전환시 에러가 떠서..
위와 같이 수정하니 잘됩니다.

12장 모듈 불러오기 문제

angularfire2/interfaces 모듈에 FirebaseListFactoryOpts 멤버가 없습니다