Reputation: 909
How to resolve compile errors during upgrade of Angular project from version 6 to 7?
I have an Angular 6 project I would like to upgrade to Angular 10, but I have read it’s best to do it one major version at a time, so I am trying to get it to 7.3 for now. I have followed all the steps on update.angular.io, but I am beginning to think it’s not a very complete guide. This question will be broken up into several sub-questions:
- After upgrading Angular Core and CLI (ng update @angular/cli@7 @angular/core@7), I tried to run “ng serve”, but then get these compile errors:
ERROR in node_modules/@angular/core/src/di/injector.d.ts(68,70): error TS1005: ',' expected. node_modules/@angular/core/src/render3/definition.d.ts(317,32): error TS1005: ')' expected. node_modules/@angular/core/src/render3/definition.d.ts(317,33): error TS1003: Identifier expected. node_modules/@angular/core/src/render3/definition.d.ts(317,83): error TS1005: ';' expected. node_modules/@angular/core/src/render3/definition.d.ts(317,84): error TS1131: Property or signature expected. node_modules/@angular/core/src/render3/definition.d.ts(317,98): error TS1005: '=>' expected. node_modules/@angular/core/src/render3/definition.d.ts(328,16): error TS1109: Expression expected. node_modules/@angular/core/src/render3/definition.d.ts(372,12): error TS1109: Expression expected. node_modules/@angular/core/src/render3/definition.d.ts(372,28): error TS1005: ']' expected. node_modules/@angular/core/src/render3/definition.d.ts(372,29): error TS1005: ',' expected. node_modules/@angular/core/src/render3/definition.d.ts(372,30): error TS1136: Property assignment expected. node_modules/@angular/core/src/render3/definition.d.ts(372,31): error TS1136: Property assignment expected. node_modules/@angular/core/src/render3/definition.d.ts(372,40): error TS1005: ':' expected. node_modules/@angular/core/src/render3/definition.d.ts(372,70): error TS1005: ',' expected. node_modules/@angular/core/src/render3/definition.d.ts(383,13): error TS1109: Expression expected. node_modules/@angular/core/src/render3/definition.d.ts(383,29): error TS1005: ']' expected. node_modules/@angular/core/src/render3/definition.d.ts(383,30): error TS1005: ',' expected. node_modules/@angular/core/src/render3/definition.d.ts(383,31): error TS1136: Property assignment expected. node_modules/@angular/core/src/render3/definition.d.ts(383,32): error TS1136: Property assignment expected. node_modules/@angular/core/src/render3/definition.d.ts(383,41): error TS1005: ':' expected. node_modules/@angular/core/src/render3/definition.d.ts(383,52): error TS1005: ',' expected. node_modules/@angular/core/src/render3/definition.d.ts(389,14): error TS1109: Expression expected. node_modules/@angular/core/src/render3/definition.d.ts(393,18): error TS1109: Expression expected. node_modules/@angular/core/src/render3/definition.d.ts(393,44): error TS1005: '(' expected. node_modules/@angular/core/src/render3/definition.d.ts(393,55): error TS1005: ')' expected. node_modules/@angular/core/src/render3/definition.d.ts(397,20): error TS1109: Expression expected. node_modules/@angular/core/src/render3/definition.d.ts(397,55): error TS1109: Expression expected. node_modules/@angular/core/src/render3/definition.d.ts(399,27): error TS1109: Expression expected. node_modules/@angular/core/src/render3/definition.d.ts(399,82): error TS1109: Expression expected. node_modules/@angular/core/src/render3/definition.d.ts(405,14): error TS1109: Expression expected. node_modules/@angular/core/src/render3/definition.d.ts(406,1): error TS1128: Declaration or statement expected. node_modules/@angular/core/src/render3/definition.d.ts(406,2): error TS1128: Declaration or statement expected. node_modules/@angular/core/src/render3/definition.d.ts(406,4): error TS1128: Declaration or statement expected.
That seems strange to me that there are compile errors in the code inside the Angular Core. I have looked around on the internet but haven’t found any solutions. I tried deleting everything inside the node_modules folder and running “npm install”.
One thing that is strange is that my current Typescript version is 2.7.2, and I think it should be later for Angular 7. So I tried upgrading Typescript to 3.2 and then running “ng serve”, but it gives me this error:
ERROR in The Angular Compiler requires TypeScript >=2.7.2 and <2.8.0 but 3.2.4 was found instead.
So I downgraded Typescript back to 2.7.2.
When I ran “ng update @angular/cli@7 @angular/core@7”, it gave me these warnings:
> npm WARN @agm/[email protected] requires a peer of
> @angular/core@^5.0.0 || ^6.0.0 but none is installed. You must install
> peer dependencies yourself. npm WARN @angular/[email protected]
> requires a peer of @angular/[email protected] but none is installed. You must
> install peer dependencies yourself. npm WARN @angular/[email protected]
> requires a peer of @angular/[email protected] but none is installed. You must
> install peer dependencies yourself. npm WARN @angular/[email protected]
> requires a peer of @angular/[email protected] but none is installed. You must
> install peer dependencies yourself. npm WARN @angular/[email protected]
> requires a peer of @angular/[email protected] but none is installed. You must
> install peer dependencies yourself. npm WARN
> @angular/[email protected] requires a peer of @angular/[email protected]
> but none is installed. You must install peer dependencies yourself.
> npm WARN @angular/[email protected] requires a peer of
> @angular/[email protected] but none is installed. You must install peer
> dependencies yourself. npm WARN @angular/[email protected] requires a peer
> of @angular/[email protected] but none is installed. You must install peer
> dependencies yourself. npm WARN @ng-bootstrap/[email protected]
> requires a peer of @angular/common@^7.0.0 but none is installed. You
> must install peer dependencies yourself. npm WARN
> @ng-bootstrap/[email protected] requires a peer of
> @angular/forms@^7.0.0 but none is installed. You must install peer
> dependencies yourself. npm WARN @ng-bootstrap/[email protected]
> requires a peer of rxjs@^6.3.0 but none is installed. You must install
> peer dependencies yourself. npm WARN @swimlane/[email protected]
> requires a peer of rxjs@^5.0.0 but none is installed. You must install
> peer dependencies yourself. npm WARN [email protected] requires
> a peer of @angular/core@>=5.0.0 <7.0.0 but none is installed. You must
> install peer dependencies yourself. npm WARN
> [email protected] requires a peer of
> @angular/core@>=5.0.0 <7.0.0 but none is installed. You must install
> peer dependencies yourself. npm WARN [email protected]
> requires a peer of @angular/core@>=5.0.0 <7.0.0 but none is installed.
> You must install peer dependencies yourself. npm WARN [email protected]
> requires a peer of popper.js@^1.14.3 but none is installed. You must
> install peer dependencies yourself. npm WARN [email protected] requires
> a peer of @angular/core@>=2.3.1 <7.0.0 || >6.0.0-beta <7.0.0 but none
> is installed. You must install peer dependencies yourself. npm WARN
> [email protected] requires a peer of @angular/core@>=4.0.0 <7.0.0 but
> none is installed. You must install peer dependencies yourself. npm
> WARN [email protected] requires a peer of @angular/core@^2.0.0 ||
> ^4.0.0 || ^5.0.0 || ^6.0.0 but none is installed. You must install
> peer dependencies yourself. npm WARN [email protected] requires a peer
> of @angular/core@^6.0.0 but none is installed. You must install peer
> dependencies yourself. 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"})
Do I need to worry about these warnings? Do I need to go through every single one of them and figure out which version is compatible with Angular 7 and then upgrade them one by one?
Here’s my package.json. It seems strange to me that the command to update Angular Core and CLI didn’t update a bunch of other Angular dependencies.
{ "name": "Whatever", "version": "0.0.0", "scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e" }, "private": true, "dependencies": {
"@agm/core": "^1.0.0-beta.2",
"@angular/animations": "^6.0.3",
"@angular/common": "^6.0.3",
"@angular/compiler": "^6.0.3",
"@angular/core": "^7.2.16",
"@angular/forms": "^6.0.3",
"@angular/http": "^6.0.3",
"@angular/platform-browser": "^6.0.3",
"@angular/platform-browser-dynamic": "^6.0.3",
"@angular/router": "^6.0.3",
"@ng-bootstrap/ng-bootstrap": "^4.2.2",
"@ng-select/ng-select": "^2.15.1",
"@swimlane/ngx-datatable": "^11.0.4",
"@types/jquery": "^3.3.22",
"ag-grid-angular": "^19.1.2",
"ag-grid-community": "^19.1.2",
"angular-calendar": "^0.23.7",
"angular-tree-component": "^7.1.0",
"angular2-chartjs": "^0.4.1",
"angular2-lightbox": "^1.3.0",
"bootstrap": "^4.1.1",
"c3": "^0.4.18",
"core-js": "^2.5.4",
"css-animator": "^2.1.1",
"d3": "^4.12.0",
"famfamfam-flags": "^1.0.0",
"feather-icons-sass": "^1.0.0",
"font-awesome-scss": "^1.0.0",
"hammerjs": "^2.0.8",
"jquery": "^3.3.1",
"ng-click-outside": "^3.0.0",
"ng-select": "^1.0.0-rc.3",
"ng2-archwizard": "^2.1.0",
"ng2-dragula": "^1.5.0",
"ng2-file-upload": "^1.2.1",
"ng2-google-charts": "^3.5.0",
"ng2-nouislider": "^1.7.7",
"ng2-trim-on-blur": "^1.0.7",
"ng2-ui-switch": "^1.0.2",
"ng2-validation": "^4.2.0",
"ngx-bar-rating": "^1.1.0",
"ngx-chips": "^1.5.10",
"ngx-color-picker": "^5.0.4",
"ngx-mask": "^8.1.2",
"ngx-perfect-scrollbar": "^7.2.0",
"node-sass": "^4.12.0",
"nouislider": "^11.1.0",
"rxjs": "^6.0.0",
"screenfull": "^3.3.2",
"sweetalert2": "^7.0.3",
"zone.js": "^0.8.26" }, "devDependencies": {
"@angular-devkit/build-angular": "~0.6.6",
"@angular/cli": "~7.3.10",
"@angular/compiler-cli": "^6.0.3",
"@angular/language-service": "^6.0.3",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "^2.7.2" } }
Do you have any ideas how to get rid of my compile errors? (BTW, I am not using Angular Material.)
- At first when I tried to upgrade the Core and CLI (ng update @angular/cli@7 @angular/core@7), I kept getting errors like this:
Package "ngx-carousel" has an incompatible peer dependency to "@angular/core" (requires ">=5.0.0-rc.0 <6.0.0||>=2.4.0 <3.0.0||>=4.0.0 <5.0.0", would install "7.2.16"). Incompatible peer dependencies found.
So then I would update the dependency to be a later version that is compatible with Angular 7. Why don’t the instructions at update.angular.io talk about updating dependencies? Is there some automatic way to update all dependencies to be compatible with Angular 7?
As I’ve been reading many different web pages about how to do Angular upgrades, there is all sorts of conflicting advice. I was reading the ng documentation for this command:
ng update @angular/cli @angular/core
It says if you also use the --all=true flag, it will update all packages in package.json. This seems like it might be a good idea to me. But if it’s a good idea, why don’t the instructions on the main Angular page include this? Or will it update them to be more recent than Angular 7?
I have seen some people recommend running this:
ng update --all --force
Which I think will update all the dependencies to the latest. Is this a good idea?
- When I do a web search for upgrading Angular 6 to 7, there are many pages with various instructions. Here are two examples:
https://medium.com/@jeroenouw/upgrade-to-angular-7-beta-within-10-minutes-c14fc380edd https://dzone.com/articles/upgrade-to-angular-7-in-5-simple-steps-1
These have all sorts of other commands to run, such as:
npm install @angular/animations@latest @angular/common@latest @angular/compiler@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest --save
Is this a good idea? I don’t think I want the latest since I am just trying to get to Angular 7.
After one step where I installed something with npm, it gave me this tidbit:
found 1321 vulnerabilities (947 low, 20 moderate, 352 high, 2 critical) run
npm audit fixto fix them, ornpm auditfor details
Is it a good idea to run “npm audit fix”? Are there downsides? Could it break my code?
Thanks for any other suggestions you can give!
Upvotes: 1
Views: 3650
Answers (1)
Reputation: 919
I was able to fix the problem by upgrading some of the core dependencies manually like this:
npm install --save @angular/animations@7 @angular/common@7 @angular/compiler@7 @angular/forms@7 @angular/http@7 @angular/platform-browser@7 @angular/platform-browser-dynamic@7 @angular/router@7
npm install --save-dev @angular-devkit/[email protected] @angular/compiler-cli@7 @angular/language-service@7
npm install [email protected] --save
I don't know why these weren't updated automatically when I upgraded the Angular Core and CLI to 7. After I got to 7, I upgraded to Angular 8 then 9 then 10. With the upgrades to 8/9/10, all of the Angular dependencies were updated when I upgraded Core and CLI.
Upvotes: 3
Related Questions
- How can I fix compile time errors even using compiler options as target es6 and es2017 in Angular 7?
- Getting error when upgrading from Angular 10 to 11
- I am getting an ERROR when compiling Angular 6 project
- Compilation error after i upgrade my typescript from 3.4.1 to 3.7.4
- Angular 5 project is unable to upgrade in to Angular 7
- The Angular Compiler requires TypeScript >=2.7.2 and <2.8.0 but 2.8.3 was found instead
- Update Angular 6 to 7 - dependency warning and typescript error
- Updating Angular 6 to angular 7 got error
- Errors after Angular 4 upgrade from Angular 2
- Compilation Angular project fails after upgrading from 2 to 4