angular5 -> angular6
레퍼런스 : https://medium.com/@filipjerga/angular-5-to-angular-6-migration-guide-7ba4d2544411
백오피스의 앵귤러 버전이 5라서 그 흔한 서비스 컴포넌트에
providedIn: root 로 싱클톤으로 서비스를 구성하는게 쉽지 않았음..
결국 그냥 레거시로 두더라도, 운영할때 좀 편하게 angular 6까지는 업그레이드 합시다.
변동포인트가 조금 있어요.
위에 레퍼런스대로 따라하다가 막히고, 해결한 부분만 따로 정리했습니다.
angular-cli.json -> angular.json
ng update @angular/core@6
블로그 찾아보면 이거 하나 나오는데 안되는 경우는 설명을 안해둠
저는 역시나 버전업이 안됐어요. 기존 라이브러리들이 버전이 맞지 않아서 그런건데요.
일단 요 패키지들을 따로 기록해두고, 다 제거합니다. 그후에 다시 ng update @angular/core@6 해주시면 될거에요. 버전이 높아도 마찬가지겠죠. 이런 상황에서는 일단 ng update로 angular 버전을 올려주고, 문제의 라이브러리를 재설치하면 될것 같아요.
solarconnect-yosephnoh ~/dev/core_web/client feature/Angular6Try2 ● ng update @angular/core@6
Your global Angular CLI version (10.1.1) is greater than your local
version (6.2.9). The local Angular CLI version is used.
To disable this warning use "ng config -g cli.warnings.versionMismatch false".
Package "angular2-toaster" has an incompatible peer dependency to "rxjs" (requires "^5.4.2", would install "6.6.3").
Package "ng2-table" has an incompatible peer dependency to "@angular/compiler" (requires "~2.0.0" (extended), would install "6.1.10").
Package "ng2-table" has an incompatible peer dependency to "@angular/common" (requires "~2.0.0" (extended), would install "6.1.10").
Package "ng2-table" has an incompatible peer dependency to "@angular/forms" (requires "~2.0.0" (extended), would install "6.1.10").
Package "ng2-table" has an incompatible peer dependency to "@angular/core" (requires "~2.0.0" (extended), would install "6.1.10").
Incompatible peer dependencies found. See above.rxjs-5-to-6-migrate -p src/tsconfig.app.json
rxjs5에서 rxjs6 업그레이드 될때 꽤 많이 바뀌어요.
내부 feature 위치랑 import 방식등이 조금 달라요. lint로 한번에 바꿔주는데
저 같은 경우는 lint 후에 또 일일이 바꿔줬어요.
npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.jsonangular-cli.json -> angular.json
요즘 앵귤러하시는 분들은 angular-cli.json이 뭐냐 하시겠지만
@angular/cli 버전이 아주 낮았을때는 angular-cli.json을 썻더라고요.
버전업 하면 이런 에러가 발생해요. Error: Local workspace file ('angular.json') could not be found.
해결책 ng update @angular/cli --from=1.7.4 --migrate-only
11:34:51 AM client.1 | Local workspace file ('angular.json') could not be found.
11:34:51 AM client.1 | Error: Local workspace file ('angular.json') could not be found.
11:34:51 AM client.1 | at WorkspaceLoader._getProjectWorkspaceFilePath (/Users/solarconnect-yosephnoh/dev/core_web/client/node_modules/@angular/cli/models/workspace-loader.js:44:19)
11:34:51 AM client.1 | at WorkspaceLoader.loadWorkspace (/Users/solarconnect-yosephnoh/dev/core_web/client/node_modules/@angular/cli/models/workspace-loader.js:31:21)
11:34:51 AM client.1 | at ServeCommand._loadWorkspaceAndArchitect (/Users/solarconnect-yosephnoh/dev/core_web/client/node_modules/@angular/cli/models/architect-command.js:201:32)
11:34:51 AM client.1 | at ServeCommand.<anonymous> (/Users/solarconnect-yosephnoh/dev/core_web/client/node_modules/@angular/cli/models/architect-command.js:53:25)
11:34:51 AM client.1 | at Generator.next (<anonymous>)
11:34:51 AM client.1 | at /Users/solarconnect-yosephnoh/dev/core_web/client/node_modules/@angular/cli/models/architect-command.js:7:71
11:34:51 AM client.1 | at new Promise (<anonymous>)
11:34:51 AM client.1 | at __awaiter (/Users/solarconnect-yosephnoh/dev/core_web/client/node_modules/@angular/cli/models/architect-command.js:3:12)
11:34:51 AM client.1 | at ServeCommand.initialize (/Users/solarconnect-yosephnoh/dev/core_web/client/node_modules/@angular/cli/models/architect-command.js:52:16)
11:34:51 AM client.1 | at Object.<anonymous> (/Users/solarconnect-yosephnoh/dev/core_web/client/node_modules/@angular/cli/models/command-runner.js:127:23)
11:34:51 AM client.1 | npm
11:34:51 AM client.1 | ERR! code ELIFECYCLEhttps://stackoverflow.com/questions/50232874/angular-6-migration-angular-cli-json-to-angular-json
jenkins빌드가 잘 돌았는데 서버에 들어가보니 런타임 에러가 뜨네요.
특이 케이스인데, 운영서버에서 도커를 쓰신다면, 그리고 dockerfile에 @angular/cli 버전을 명시해뒀다면, package.json의 @angular/cli랑 버전 맞춰줘야합니다.
main.a8e3e961f9a043801d24.js:1 ERROR Error: Uncaught (in promise): ReferenceError: global is not defined
ReferenceError: global is not defined
at Object.czA5 (2.04831a40da47177ee005.js:1)
at c (runtime.d61c49fce3f6fd32ad18.js:1)
at Object.YVFZ (2.04831a40da47177ee005.js:1)
at c (runtime.d61c49fce3f6fd32ad18.js:1)
at Object.2V7f (2.04831a40da47177ee005.js:1)
at c (runtime.d61c49fce3f6fd32ad18.js:1)
at Object.3/HP (2.04831a40da47177ee005.js:1)
at c (runtime.d61c49fce3f6fd32ad18.js:1)
at Object.Nia1 (2.04831a40da47177ee005.js:1)
at c (runtime.d61c49fce3f6fd32ad18.js:1)
at j (polyfills.0fbe5f6e6bbf394f1c7b.js:1)
at j (polyfills.0fbe5f6e6bbf394f1c7b.js:1)
at polyfills.0fbe5f6e6bbf394f1c7b.js:1
at e.invokeTask (polyfills.0fbe5f6e6bbf394f1c7b.js:1)
at Object.onInvokeTask (main.a8e3e961f9a043801d24.js:1)
at e.invokeTask (polyfills.0fbe5f6e6bbf394f1c7b.js:1)
at t.runTask (polyfills.0fbe5f6e6bbf394f1c7b.js:1)
at y (polyfills.0fbe5f6e6bbf394f1c7b.js:1)구글링 해서 적용한 방법
<!-- https://github.com/aws/aws-amplify/issues/678 fix: -->
<script>
if (global === undefined) {
var global = window;
}
</script>
<!-- https://github.com/aws/aws-amplify/issues/678 fix end-->