it-swarm.dev

Angular2의 프로덕션 모드와 개발 모드의 차이점은 무엇입니까?

어떤 이유로 든 앱을 프로덕션 모드에서 실행해야합니다. 이들 모드의 차이점은 무엇입니까?

84
Rhushikesh

개발 모드에서 변경 감지는 첫 번째 실행 직후 두 번째 실행을 수행하고 첫 번째 실행과 두 번째 실행 사이에 바인딩 된 값이 변경되면 오류를 생성합니다. 이는 값 확인에 부작용이 있거나 필드 또는 함수가 후속 호출에서 Angular의 변경 감지를 손상시키는 동일한 값을 반환하지 않는 버그를 찾는 데 도움이됩니다.

개발 모드에서 두 번째 변경 감지 실행 중에 Angular는 허용되지 않는 모델 변경을 감지하기 위해 프로덕션에서 수행하지 않을 일부 딥 오브젝트 비교도 수행합니다.

업데이트 :

개발 모드에서 HTML 소독제 서비스가 바인딩 [innerHTML]="..." 또는 [ngStyle]="..."에서 값을 제거 할 때 힌트가 콘솔에 인쇄됩니다. RC.1에서는 바인딩 구문을 사용하여 일부 스타일을 추가 할 수 없음

73
Günter Zöchbauer

ApplicationRef.tick () 상태에 대한 문서 :

개발 모드에서 tick()은 추가 변경이 감지되지 않도록 두 번째 변경 감지주기 (TTL = 2)도 수행합니다. 이 두 번째주기 동안 추가 변경 사항이 발생하면 앱의 바인딩에 단일 변경 감지 단계에서 해결할 수없는 부작용이 있습니다. 이 경우 Angular 응용 프로그램은 하나의 변경 감지 패스 만 가질 수 있으므로 모든 변경 감지가 완료되어야하므로 Angular에서 오류가 발생합니다.

추가 변경이 불가능한 이유는 프로덕션 모드에서 변경 감지가 한 번만 실행되기 때문에 구성 요소 트리의 모든 구성 요소가 맨 처음부터 (TTL = 1) 검사됩니다. 주문. 예를 들어 자식 구성 요소의 입력 속성을 변경하면 부모 구성 요소가 뷰/템플릿에서 바인딩 한 다른 속성으로 변경되는 경우 부모 구성 요소의 뷰가 업데이트되지 않습니다 (변경 감지는 "원 패스"트리 탐색으로 인해 프로덕션 모드에서 상위 구성 요소를 다시 방문하지 않기 때문에). 다음에 일부 이벤트가 발생하고 변경 감지가 다시 실행될 때만 업데이트되지만 너무 늦습니다!

다음은 규칙을 위반하는 Plunker 입니다. 자식 구성 요소에는 다른 입력 속성을 수정하는 입력 속성에 set 메서드가 있습니다. 예, 이것은 좋은 예이지만 다음 예보다 이해하기 쉽습니다.

이 문제가 발생할 수있는 또 다른 시나리오는 상태 저장 파이프를 사용하는 것입니다. 문제가 있다면 이 답변 을 확인하십시오.

다른 SO 질문에서 문제를 설명해야합니다. 그것을 고칠 수있는 방법이 있어야합니다.

35
Mark Rajcok