Erro ao npm start em um projeto - versão de Angular de 4 para 12 - resolvido

Front-end
#4

Quando fui atualizar para a versão 8. Mas não entendi o erro.

# npm resolution error report

2021-05-17T18:39:00.237Z

Found: @angular/animations@7.2.16
node_modules/@angular/animations
  @angular/animations@"8.2.14" from the root project

Could not resolve dependency:
@angular/animations@"8.2.14" from the root project

Conflicting peer dependency: @angular/core@8.2.14
node_modules/@angular/core
  peer @angular/core@"8.2.14" from @angular/animations@8.2.14
  node_modules/@angular/animations
    @angular/animations@"8.2.14" from the root project

Fix the upstream dependency conflict, or retry
this command with --force, or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Raw JSON explanation object:

{
  "code": "ERESOLVE",
  "current": {
    "name": "@angular/animations",
    "version": "7.2.16",
    "location": "node_modules/@angular/animations",
    "dependents": [
      {
        "type": "prod",
        "name": "@angular/animations",
        "spec": "8.2.14",
        "error": "INVALID",
        "from": {
          "location": "C:\\sistemas\\angular\\Kcms.Erp.Web"
        }
      }
    ]
  },
  "currentEdge": null,
  "edge": {
    "type": "prod",
    "name": "@angular/animations",
    "spec": "8.2.14",
    "error": "INVALID",
    "from": {
      "location": "C:\\sistemas\\angular\\Kcms.Erp.Web"
    }
  },
  "peerConflict": {
    "name": "@angular/core",
    "version": "8.2.14",
    "whileInstalling": {
      "name": "smartadmin",
      "version": "0.5.0",
      "path": "C:\\sistemas\\angular\\Kcms.Erp.Web"
    },
    "location": "node_modules/@angular/core",
    "dependents": [
      {
        "type": "peer",
        "name": "@angular/core",
        "spec": "8.2.14",
        "from": {
          "name": "@angular/animations",
          "version": "8.2.14",
          "whileInstalling": {
            "name": "smartadmin",
            "version": "0.5.0",
            "path": "C:\\sistemas\\angular\\Kcms.Erp.Web"
          },
          "location": "node_modules/@angular/animations",
          "dependents": [
            {
              "type": "prod",
              "name": "@angular/animations",
              "spec": "8.2.14",
              "from": {
                "location": "C:\\sistemas\\angular\\Kcms.Erp.Web"
              }
            }
          ]
        }
      }
    ]
  },
  "strictPeerDeps": false,
  "force": false
}
#5

Nâo sei se entendi direito tb, mas vamos lah:

Parece que o pacote @angular/core@8.2.14 está tentando baixar o pacote @angular/animations@"8.2.14, e o pacote @angular/animations já foi encontrado, porém numa outra versão: 7.2.16.

#6

OK. Porque como estou seguindo o passo a passo,

Atualize o framework e CLI para a versão 7 executando  `ng update @angular/cli@7 @angular/core@7`  no terminal.

Atualize o framework e CLI para a versão 8 executando  `ng update @angular/cli@8 @angular/core@8`  no terminal.

Até o 7 foi sem erro

1 curtida
#7

E como está o package.json do projeto?

#8 
"dependencies": {

    "@angular-redux/store": "6.5.7",

    "@angular/animations": "7.2.16",

    "@angular/common": "7.2.16",

    "@angular/compiler": "7.2.16",

    "@angular/core": "7.2.16",

    "@angular/forms": "7.2.16",

    "@angular/http": "7.2.16",

    "@angular/platform-browser": "7.2.16",

    "@angular/platform-browser-dynamic": "7.2.16",

    "@angular/router": "7.2.16",

    "@aspnet/signalr": "^1.1.4",

    "@bugsnag/js": "^7.3.3",

    "@bugsnag/plugin-angular": "^7.3.3",

    "@swimlane/ngx-datatable": "9.3.1",

    "angular-2-dropdown-multiselect": "^1.6.3",

    "angular2-qrcode": "^2.0.3",

    "angulartics2": "^4.6.3",

    "auth0-js": "^8.10.1",

    "bootstrap": "3.3.7",

    "bootstrap-colorpicker": "2.5.1",

    "bootstrap-duallistbox": "3.0.6",

    "bootstrap-markdown": "2.10.0",

    "bootstrap-progressbar": "0.9.0",

    "bootstrap-slider": "9.8.1",

    "bootstrap-tagsinput": "0.7.1",

    "bootstrap-timepicker": "0.5.2",

    "chart.js": "2.6.0",

    "classlist.js": "^1.1.20150312",

    "clockpicker": "0.0.7",

    "clone": "2.1.1",

    "core-js": "2.4.1",

    "crypto-js": "^3.1.9-1",

    "debounce": "1.0.2",

    "dropzone": "4.3.0",

    "dygraphs": "2.0.0",

    "fuelux": "3.16.1",

    "he": "1.1.1",

    "highcharts": "5.0.14",

    "ion-rangeslider": "2.2.0",

    "jquery": "^2.2.4",

    "jquery-color": "https://github.com/jquery/jquery-color/tarball/485460cc0109cef100a1a6afd0d0225292bd69b9",

    "jquery-jcrop": "0.9.13",

    "jquery-knob": "1.2.11",

    "jquery-ui-npm": "1.12.0",

    "jquery-validation": "1.16.0",

    "jquery.maskedinput": "1.4.1",

    "jszip": "^3.5.0",

    "markdown": "0.5.0",

    "mixpanel-browser": "^2.22.4",

    "moment": "^2.24.0",

    "morris.js": "0.5.0",

    "nestable2": "^1.6.0",

    "ng2-date-picker": "2.7.0",

    "ng2-signalr": "^2.1.1",

    "ngx-bootstrap": "^2.0.0-beta.2",

    "ngx-color-picker": "^4.5.3",

    "ngx-google-places-autocomplete": "^2.0.4",

    "ngx-mask": "^1.0.3",

    "ngx-perfect-scrollbar": "^4.9.6",

    "ngx-popover": "0.0.16",

    "ngx-toastr": "^6.4.0",

    "nouislider": "9.2.0",

    "pako": "^1.0.6",

    "raphael": "2.2.7",

    "redux": "3.7.2",

    "rxjs": "^6.6.7",

    "rxjs-compat": "^6.2.2",

    "scriptjs": "2.5.8",

    "select2": "4.0.3",

    "signalr": "^2.2.2",

    "smartadmin-plugins": "1.0.20",

    "summernote": "^0.8.12",

    "sweetalert2": "^7.16.0",

    "to-markdown": "3.1.0",

    "ts-helpers": "1.1.2",

    "tslib": "^1.9.0",

    "web-animations-js": "2.3.1",

    "x-editable": "^1.5.1",

    "X-editable": "github:vitalets/x-editable",

    "xmlhttprequest": "^1.8.0",

    "zone.js": "^0.8.29"

  },
#9

Tu pode tentar alterar a versão do @angular/animations do package.json para a versão 8.2.14 manualmente, e depois tentar rodar o comando novamente.

1 curtida
#10

Tive que atualizar estes manuais

"@angular/animations": "8.2.14",
"@angular/common": "8.2.14",
"@angular/platform-browser": "8.2.14",
"@angular/core": "8.2.14",
"zone.js": "~0.9.1"

Ai só depois rodar aquele comando

1 curtida
#11

Deu tudo certo?

#12

Agora esta dando erro para o 9 . Estou vendo se consigo ver se consigo resolver.

1 curtida
#13

ng update @angular/core@9 @angular/cli@9 --force --allow-dirty

:heavy_check_mark: Packages installed successfully.
** Executing migrations of package ‘@angular/cli’ **

Angular Workspace migration.
Update an Angular CLI workspace to version 9.
× Migration failed: Could not find (undefined)
See “C:\Users\guilh\AppData\Local\Temp\ng-v1wcuS\angular-errors.log” for further details.

Erro:

[error] Error: Could not find (undefined)
    at Object.getWorkspace (C:\sistemas\angular\Kcms.Erp.Web\node_modules\@schematics\angular\migrations\update-9\utils.js:78:15)
    at C:\sistemas\angular\Kcms.Erp.Web\node_modules\@schematics\angular\migrations\update-9\update-workspace-config.js:20:35
    at MergeMapSubscriber.project (C:\Users\guilh\AppData\Local\Temp\.ng-temp-packages-FnioKz\node_modules\@angular-devkit\schematics\src\rules\call.js:75:24)
    at MergeMapSubscriber._tryNext (C:\Users\guilh\AppData\Local\Temp\.ng-temp-packages-FnioKz\node_modules\rxjs\internal\operators\mergeMap.js:67:27)
    at MergeMapSubscriber._next (C:\Users\guilh\AppData\Local\Temp\.ng-temp-packages-FnioKz\node_modules\rxjs\internal\operators\mergeMap.js:57:18)
    at MergeMapSubscriber.Subscriber.next (C:\Users\guilh\AppData\Local\Temp\.ng-temp-packages-FnioKz\node_modules\rxjs\internal\Subscriber.js:66:18)
    at Observable._subscribe (C:\Users\guilh\AppData\Local\Temp\.ng-temp-packages-FnioKz\node_modules\rxjs\internal\util\subscribeToArray.js:5:20)
    at Observable._trySubscribe (C:\Users\guilh\AppData\Local\Temp\.ng-temp-packages-FnioKz\node_modules\rxjs\internal\Observable.js:44:25)
    at Observable.subscribe (C:\Users\guilh\AppData\Local\Temp\.ng-temp-packages-FnioKz\node_modules\rxjs\internal\Observable.js:30:22)
    at MergeMapOperator.call (C:\Users\guilh\AppData\Local\Temp\.ng-temp-packages-FnioKz\node_modules\rxjs\internal\operators\mergeMap.js:37:23)

package.json

"dependencies": {

    "@angular-redux/store": "6.5.7",

    "@angular/animations": "9.1.13",

    "@angular/common": "9.1.13",

    "@angular/compiler": "9.1.13",

    "@angular/core": "9.1.13",

    "@angular/forms": "9.1.13",

    "@angular/platform-browser": "9.1.13",

    "@angular/platform-browser-dynamic": "9.1.13",

    "@angular/router": "9.1.13",

    "@aspnet/signalr": "^1.1.4",

    "@bugsnag/js": "^7.3.3",

    "@bugsnag/plugin-angular": "^7.3.3",

    "@swimlane/ngx-datatable": "9.3.1",

    "angular-2-dropdown-multiselect": "^1.6.3",

    "angular2-qrcode": "^2.0.3",

    "angulartics2": "^4.6.3",

    "auth0-js": "^8.10.1",

    "bootstrap": "3.3.7",

    "bootstrap-colorpicker": "2.5.1",

    "bootstrap-duallistbox": "3.0.6",

    "bootstrap-markdown": "2.10.0",

    "bootstrap-progressbar": "0.9.0",

    "bootstrap-slider": "9.8.1",

    "bootstrap-tagsinput": "0.7.1",

    "bootstrap-timepicker": "0.5.2",

    "chart.js": "2.6.0",

    "classlist.js": "^1.1.20150312",

    "clockpicker": "0.0.7",

    "clone": "2.1.1",

    "core-js": "2.4.1",

    "crypto-js": "^3.1.9-1",

    "debounce": "1.0.2",

    "dropzone": "4.3.0",

    "dygraphs": "2.0.0",

    "fuelux": "3.16.1",

    "he": "1.1.1",

    "highcharts": "5.0.14",

    "ion-rangeslider": "2.2.0",

    "jquery": "^2.2.4",

    "jquery-color": "https://github.com/jquery/jquery-color/tarball/485460cc0109cef100a1a6afd0d0225292bd69b9",

    "jquery-jcrop": "0.9.13",

    "jquery-knob": "1.2.11",

    "jquery-ui-npm": "1.12.0",

    "jquery-validation": "1.16.0",

    "jquery.maskedinput": "1.4.1",

    "jszip": "^3.5.0",

    "markdown": "0.5.0",

    "mixpanel-browser": "^2.22.4",

    "moment": "^2.24.0",

    "morris.js": "0.5.0",

    "nestable2": "^1.6.0",

    "ng2-date-picker": "2.7.0",

    "ng2-signalr": "^2.1.1",

    "ngx-bootstrap": "^2.0.0-beta.2",

    "ngx-color-picker": "^4.5.3",

    "ngx-google-places-autocomplete": "^2.0.4",

    "ngx-mask": "^1.0.3",

    "ngx-perfect-scrollbar": "^4.9.6",

    "ngx-popover": "0.0.16",

    "ngx-toastr": "^6.4.0",

    "nouislider": "9.2.0",

    "pako": "^1.0.6",

    "raphael": "2.2.7",

    "redux": "3.7.2",

    "rxjs": "^6.6.7",

    "rxjs-compat": "^6.2.2",

    "scriptjs": "2.5.8",

    "select2": "4.0.3",

    "signalr": "^2.2.2",

    "smartadmin-plugins": "1.0.20",

    "summernote": "^0.8.12",

    "sweetalert2": "^7.16.0",

    "to-markdown": "3.1.0",

    "ts-helpers": "1.1.2",

    "tslib": "^1.9.0",

    "web-animations-js": "^2.3.2",

    "x-editable": "^1.5.1",

    "X-editable": "github:vitalets/x-editable",

    "xmlhttprequest": "^1.8.0",

    "zone.js": "~0.10.3"
#14

Vc usa algum pacote privado (que esteja em algum repo local e não no npm)?

#15

Só se forem estes

"X-editable": "github:vitalets/x-editable",

"jquery-color": "https://github.com/jquery/jquery-color/tarball/485460cc0109cef100a1a6afd0d0225292bd69b9",
#16

De acordo com essa thread no github: https://github.com/angular/angular-cli/issues/10167, parece que o angular-cli não consegue fazer upgrade qdo há pacotes privados. Porém essa thread é de 2018 e pode ter sido resolvida (ou não). Não achei mais referência sobre isso.

E essa mensagem Error: Could not find (undefined) não ajuda em nada também. Talvez se tu tentar comentar as dependências desses pacotes privados e tentar de novo.

Assim, estou meio sem ideias agora.

1 curtida
#17

Quando vc falar em comentar as privadas, seria deixar somente as com @angular, para fazer o update pelo comando ng update @angular/core@9 @angular/cli@9 --force --allow-dirty e quando chegar na versão 12, instalar cada uma delas manual ?

1 curtida
#18

Sim. Foi o que consegui pensar aqui.

1 curtida
#19

Pense que, se vc conseguir atualizar os pacotes do angular primeiro, atualizar as outras ficaria mais fácil depois. Mas é soh um palpite.

1 curtida
#20

Apaguei a paste node_modules.

{
  "name": "smartadmin",
  "version": "0.5.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "8.2.14",
    "@angular/common": "8.2.14",
    "@angular/compiler": "8.2.14",
    "@angular/core": "8.2.14",
    "@angular/forms": "8.2.14",
    "@angular/platform-browser": "8.2.14",
    "@angular/platform-browser-dynamic": "8.2.14",
    "@angular/router": "8.2.14",
    "rxjs": "^6.6.7",
    "tslib": "^1.9.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.29",
    "@angular/cli": "^8.3.29",
    "@angular/compiler-cli": "8.2.14",
    "@types/jasmine": "2.5.53",
    "@types/node": "8.0.17",
    "codelyzer": "^5.0.1",
    "jasmine-core": "2.6.4",
    "jasmine-spec-reporter": "4.1.1",
    "karma": "1.7.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "1.3.0",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "karma-remap-istanbul": "0.6.0",
    "protractor": "5.1.2",
    "ts-node": "3.3.0",
    "tslint": "5.5.0",
    "typescript": "3.5.3"
  }
}

digitei npm install e apertei enter. Sem erros.

digitei ng update @angular/core@9 @angular/cli@9

{
  "name": "smartadmin",
  "version": "0.5.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "9.1.13",
    "@angular/common": "9.1.13",
    "@angular/compiler": "9.1.13",
    "@angular/core": "9.1.13",
    "@angular/forms": "9.1.13",
    "@angular/platform-browser": "9.1.13",
    "@angular/platform-browser-dynamic": "9.1.13",
    "@angular/router": "9.1.13",
    "rxjs": "^6.6.7",
    "tslib": "^1.9.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.15",
    "@angular/cli": "^9.1.15",
    "@angular/compiler-cli": "9.1.13",
    "@types/jasmine": "2.5.53",
    "@types/node": "8.0.17",
    "codelyzer": "^5.0.1",
    "jasmine-core": "2.6.4",
    "jasmine-spec-reporter": "4.1.1",
    "karma": "1.7.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "1.3.0",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "karma-remap-istanbul": "0.6.0",
    "protractor": "5.1.2",
    "ts-node": "3.3.0",
    "tslint": "5.5.0",
    "typescript": "3.8.3"
  }
}

e deu o seguinte erro:

UPDATE package.json (1273 bytes)
✔ Packages installed successfully.
** Executing migrations of package '@angular/cli' **

> Angular Workspace migration.
  Update an Angular CLI workspace to version 9.
× Migration failed: Could not find (undefined)
  See "C:\Users\guilh\AppData\Local\Temp\ng-JTGoZ1\angular-errors.log" for further details.

PS C:\sistemas\angular\Kcms.Erp.Web>

[error] Error: Could not find (undefined)

    at Object.getWorkspace (C:\sistemas\angular\Kcms.Erp.Web\node_modules\@schematics\angular\migrations\update-9\utils.js:78:15)

    at C:\sistemas\angular\Kcms.Erp.Web\node_modules\@schematics\angular\migrations\update-9\update-workspace-config.js:20:35

    at MergeMapSubscriber.project (C:\Users\guilh\AppData\Local\Temp\.ng-temp-packages-fY6yQM\node_modules\@angular-devkit\schematics\src\rules\call.js:75:24)

    at MergeMapSubscriber._tryNext (C:\Users\guilh\AppData\Local\Temp\.ng-temp-packages-fY6yQM\node_modules\rxjs\internal\operators\mergeMap.js:67:27)

    at MergeMapSubscriber._next (C:\Users\guilh\AppData\Local\Temp\.ng-temp-packages-fY6yQM\node_modules\rxjs\internal\operators\mergeMap.js:57:18)

    at MergeMapSubscriber.Subscriber.next (C:\Users\guilh\AppData\Local\Temp\.ng-temp-packages-fY6yQM\node_modules\rxjs\internal\Subscriber.js:66:18)

    at Observable._subscribe (C:\Users\guilh\AppData\Local\Temp\.ng-temp-packages-fY6yQM\node_modules\rxjs\internal\util\subscribeToArray.js:5:20)

    at Observable._trySubscribe (C:\Users\guilh\AppData\Local\Temp\.ng-temp-packages-fY6yQM\node_modules\rxjs\internal\Observable.js:44:25)

    at Observable.subscribe (C:\Users\guilh\AppData\Local\Temp\.ng-temp-packages-fY6yQM\node_modules\rxjs\internal\Observable.js:30:22)

    at MergeMapOperator.call (C:\Users\guilh\AppData\Local\Temp\.ng-temp-packages-fY6yQM\node_modules\rxjs\internal\operators\mergeMap.js:37:23)

O que pode ser em ?

Depois exxecutei o npm install

image
image.png721×342 8.42 KB

#21

Acho que encontrei uma referência sobre o erro: https://github.com/angular/devkit/issues/892

Veja essa resposta nessa thread: https://github.com/angular/devkit/issues/892#issuecomment-389528870

1 curtida
#22

Li e não entendi nada.

#23

Criei o arquivo angular.json

copiei as informações de outro projeto, ajustando a este projeto

e funcionou.

1 curtida