Npm start - angular 12 - resolvido

Front-end
#1

Ao iniciar pelo npm start, dá este erro.

./src/polyfills.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
TypeError: The 'compilation' argument must be an instance of Compilation
    at getCompilationHooks (C:\sistemas\angular\Kcms.Erp.Web\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:125:10)
    at C:\sistemas\angular\Kcms.Erp.Web\node_modules\webpack\lib\javascript\CommonJsChunkFormatPlugin.js:43:19
    at Hook.eval [as call] (eval at create (C:\sistemas\angular\Kcms.Erp.Web\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:5:1)
    at Hook.CALL_DELEGATE [as _call] (C:\sistemas\angular\Kcms.Erp.Web\node_modules\tapable\lib\Hook.js:14:14)
    at Compiler.newCompilation (C:\sistemas\angular\Kcms.Erp.Web\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compiler.js:1030:30)
    at C:\sistemas\angular\Kcms.Erp.Web\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compiler.js:1073:29
    at Hook.eval [as callAsync] (eval at create (C:\sistemas\angular\Kcms.Erp.Web\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:13:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\sistemas\angular\Kcms.Erp.Web\node_modules\tapable\lib\Hook.js:18:14)
    at Compiler.compile (C:\sistemas\angular\Kcms.Erp.Web\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compiler.js:1068:28)
    at Compiler.runAsChild (C:\sistemas\angular\Kcms.Erp.Web\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compiler.js:520:8)

O que pode ser este erro ?

Errp no typescript no angular - resolvido
#2

Ninguém passou por isso ?

#3

Este err não está acontecendo mais.

Agora é este: Errp no typescript no angular

#4

Poste a saída desses 2 comandos: ng v e npm ls webpack.

#5

ng v

Angular CLI: 12.0.5
Node: 12.18.3
Package Manager: npm 6.14.6
OS: win32 x64

Angular: 12.0.5
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.5
@angular-devkit/build-angular   12.0.5
@angular-devkit/core            12.0.5
@angular-devkit/schematics      12.0.5
@schematics/angular             12.0.5
rxjs                            6.6.7
typescript                      4.2.4
#6

npm ls webpack

smartadmin@0.5.0 C:\sistemas\angular\Kcms.Erp.Web
`-- @angular-devkit/build-angular@12.0.5
  `-- webpack@5.39.1
#7

Posta o package.json pra gente ver.

Pesquisando aqui achei uma issue de um pessoal que teve esse mesmo problema: https://github.com/angular/angular-cli/issues/20773

#8

Eu consegui entre aspas resolver este erro. Eu li em outro tópico que poderia ser chamando um modulo e este chamando o anterior, assim entrando em um looping infinito

Agora está com outro erro.

#9

package.json

{

  "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-redux/store": "^10.0.0",

    "@angular/animations": "12.0.5",

    "@angular/common": "12.0.5",

    "@angular/compiler": "12.0.5",

    "@angular/core": "12.0.5",

    "@angular/forms": "12.0.5",

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

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

    "@angular/router": "12.0.5",

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

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

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

    "@swimlane/ngx-datatable": "^19.0.0",

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

    "angular2-qrcode": "^2.0.3",

    "angulartics2": "^10.0.0",

    "auth0-js": "^9.16.0",

    "bootstrap": "^5.0.1",

    "bootstrap-colorpicker": "^3.3.0",

    "bootstrap-duallistbox": "^3.0.9",

    "bootstrap-markdown": "^2.10.0",

    "bootstrap-progressbar": "^0.9.0",

    "bootstrap-slider": "^11.0.2",

    "bootstrap-tagsinput": "^0.7.1",

    "bootstrap-timepicker": "^0.5.2",

    "chart.js": "^3.2.1",

    "classlist.js": "^1.1.20150312",

    "clockpicker": "^0.0.7",

    "clone": "^2.1.2",

    "core-js": "^3.12.0",

    "crypto-js": "^4.0.0",

    "debounce": "^1.2.1",

    "dropzone": "^5.9.2",

    "dygraphs": "^2.1.0",

    "fuelux": "^3.17.2",

    "he": "^1.2.0",

    "highcharts": "^9.1.0",

    "ion-rangeslider": "^2.3.1",

    "jquery": "^3.6.0",

    "jquery-color": "^2.2.0",

    "jquery-jcrop": "^0.9.15",

    "jquery-knob": "^1.2.11",

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

    "jquery-validation": "^1.19.3",

    "jquery.maskedinput": "^1.4.1",

    "jszip": "^3.6.0",

    "markdown": "^0.5.0",

    "mixpanel-browser": "^2.41.0",

    "moment": "^2.29.1",

    "morris.js": "^0.5.0",

    "nestable2": "^1.6.0",

    "ng2-date-picker": "^11.0.0",

    "ng2-signalr": "^10.1.0",

    "ngx-bootstrap": "^6.2.0",

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

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

    "ngx-mask": "^12.0.0",

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

    "ngx-popover": "^0.0.16",

    "ngx-toastr": "^13.2.1",

    "nouislider": "^15.1.0",

    "pako": "^1.0.11",

    "raphael": "^2.3.0",

    "redux": "^4.1.0",

    "rxjs": "^6.6.7",

    "rxjs-compat": "^6.6.7",

    "scriptjs": "^2.5.9",

    "select2": "^4.1.0-rc.0",

    "signalr": "^2.4.2",

    "smartadmin-plugins": "^1.0.22",

    "summernote": "^0.8.18",

    "sweetalert2": "^11.0.0",

    "to-markdown": "^3.1.1",

    "ts-helpers": "^1.1.2",

    "tslib": "^2.0.0",

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

    "x-editable": "^1.5.1",

    "xmlhttprequest": "^1.8.0",

    "zone.js": "^0.11.4"

  },

  "devDependencies": {

    "@angular-devkit/build-angular": "~12.0.1",

    "@angular/cli": "^12.0.1",

    "@angular/compiler-cli": "12.0.5",

    "@googlemaps/types": "^3.44.4",

    "@types/jasmine": "^3.7.4",

    "@types/jquery": "^3.5.5",

    "@types/node": "^15.3.1",

    "codelyzer": "^6.0.2",

    "css-loader": "^5.2.5",

    "exports-loader": "^3.0.0",

    "expose-loader": "^2.0.0",

    "file-loader": "^6.2.0",

    "imports-loader": "^3.0.0",

    "jasmine-core": "^3.7.1",

    "jasmine-spec-reporter": "^7.0.0",

    "karma": "^6.3.2",

    "karma-chrome-launcher": "^3.1.0",

    "karma-cli": "^2.0.0",

    "karma-coverage-istanbul-reporter": "^3.0.3",

    "karma-jasmine": "^4.0.1",

    "karma-jasmine-html-reporter": "^1.6.0",

    "karma-remap-istanbul": "^0.6.0",

    "protractor": "^7.0.0",

    "raw-loader": "^4.0.2",

    "script-loader": "^0.7.2",

    "style-loader": "^2.0.0",

    "ts-node": "^8.3.0",

    "tslint": "^6.1.3",

    "typescript": "4.2.4",

    "url-loader": "^4.1.1",

    "webpack-bundle-analyzer": "^4.4.2"

  },

  "repository": {

    "type": "git",

    "url": "https://bitbucket.org/grigson/smartadmin-angular-2"

  },

  "bugs": {

    "url": "https://bitbucket.org/grigson/smartadmin-angular-2/issues"

  },

  "engines": {

    "node": ">= 4.2.1",

    "npm": ">= 3"

  }

}
#10

Qual outro erro?

No link da issue que tinha passado, pessoal tava falando que o problema poderia ser por conta de ter mais de uma versão do webpack configurada. E no seu package.json vc tem 2 dependências que usam o webpack. A dependência @angular-devkit/build-angular já resolve uma versão do webpack, e a webpack-bundle-analyzer também resolve uma versão do webpack. Pensei que, se essas 2 dependências estiverem baixando versões diferentes do webpack, isso poderia está causando o problema.

1 curtida
#11

Até o momento é algo dentro do app.

Resolvo um e aparece outro. São as importações de módulos.

1 curtida