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


답변:


76

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

개발 모드에서 두 번째 변경 감지 실행 중에 Angular는 허용되지 않는 모델 변경을 감지하기 위해 프로덕션에서 수행하지 않는 몇 가지 심층 객체 비교도 수행합니다.

최신 정보:

개발 모드에서는 HTML 새니 타이 저 서비스가 바인딩 [innerHTML]="..."또는 에서 값을 제거 할 때 콘솔에 힌트도 인쇄됩니다 [ngStyle]="...". 참고 항목 : RC.1에서는 바인딩 구문을 사용하여 일부 스타일을 추가 할 수 없습니다.


5
프로덕션 모드 또는 개발 모드에서 실행 중인지 어떻게 감지합니까?

나는 이것이 이미 요청되는 것을 보았지만 대답을 보지 못했습니다. 프로덕션 모드를 명시 적으로 활성화해야하며 코드에서 활성화 된 모드를 알기 위해 코드에서 확인할 수있는 prodMode를 활성화 할 때 일부 전역 변수를 설정할 수도 있습니다.
Günter Zöchbauer

6
또한 개발자 모드에서 실행 중이고 브라우저에서 콘솔을 열면 "Angular 2가 개발 모드에서 실행 중입니다. 프로덕션 모드를 활성화하려면 enableProdeMode ()를 호출하십시오."라는 메시지가 인쇄됩니다. 이미 프로덕션 모드에있는 경우 여기에 아무것도 표시되지 않습니다.
c.dunlap

36

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

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

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

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

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

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

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.