FrameWork/Angular

[Angular] v8.2에서 v10.1.4로 업그레이드 후 발생한 에러 해결

나규태 2020. 10. 8. 13:18
2020년 9월 29일 Angular 버전을 아래와 같이 변경 

이전 버전 : 8.2.x => 현재 버전 : 10.1.4

업그레이드 후 상황

변경 전 정상 작동 되던 프로젝트가 변경 후 컴파일 에러가 발생 한다.

에러는 아래의 두가지 에러가 발생했다.

 

  • ngStyle, ngFor, ngIf 등 CommonModule에서 제공하는 Directive를 인식하지 못하는 에러
* Error 1

error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'.
  • Custom Elements를 인식하지 못하는 에러
* Error 2

error NG8001: 'app-xxx' is not a known element: 1. If 'app-xxx' is an Angular component, then verify that it is part of this module. 2. If 'app-xxx' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

해결하는 과정

버전을 업그레이드한 후 발생한 문제였으니 package.json에 dependency에 있는 각 모듈들의 버전을 확인해보고 새로운 프로젝트를 만들어서 기존 프로젝트와 비교도 해보고 프로젝트를 하나 하나 뜯어보는 등 많은 방법으로 에러를 잡으려고 노력하였지만 원인 조차 찾지 못했다.

원인

프로젝트를 조금씩 지워나가면서 원인을 찾는 과정에서 app.module.ts에 사용하고자 하는 component를 import하면 에러가 사라지는 것을 발견하였다. 그것을 힌트로 얻어 app-routing.module.ts에서 각 component들을 호출하는 방식을 의심했다. 구체적인 원인은 찾지 못했지만 에러가 발생하는 원인은 lazy loading에 있었다.

 

기존에는 아래와 같이 app-routing.module.ts를 구성했다면

* app-routing.module.ts

const routes : Routes = [
 { path : '', component: TestComponent }
];

export const AppRoutingModule = RouterModule.forRoot(routes);

해결된 방법은 아래와 같다.

* app-routing.module.ts

const routes : Routes = [
 { path : '', loadChildren: () => import('./test/testmodule').then((m) => m.TestModule) }
];

export const AppRoutingModule = RouterModule.forRoot(routes);

---------------------------------------------------------------------------------------------------------------------------

* test.module.ts

const routes : Routes = [
 { path : '', component: TestComponent }
];

@NgModule({  
    declarations: [TestComponent],  
    imports: [RouterModule.forChild(routes)],
})
export class TestModule { }

차이점으로는 기존에는 app-routing.module.ts에서 TestComponent를 바로 호출했다면, 현재는 app-routing.module.ts에서 TestModule을 호출하고 TestModule이 TestComponent를 호출하는 방식으로 변경되어 일주일 만에 문제가 해결되었다.

* 아래의 참고 자료에서 Angular Lazy-loading 참고

 

Angular 내부적으로 Compile시 체크하는 로직이 변경된 것이 아닌가 하는 추측을 해보지만 정확하지는 않다.

추 후 이에 대한 원인을 알게 된다면 다시 재작성 하려고 한다.

Angular Issues에 보면 저와 비슷한 에러를 가지고 있는 사람들이 많은것 같습니다. 저와 마찬가지로 몇 주 동안 해결하지 못한 사람도 있는것 같아 조금이나마 도움이 되고자 이 글을 작성하였습니다. 동일한 방법으로 해결 될 지는 모르겠지만 이 글이 작은 실마리가 되었으면 합니다.

부족한 부분도 많고 잘못 이해한 부분도 있으리라 생각합니다. 언제든지 지적해주세요.

 

읽어주셔서 감사합니다.

 

참고 자료