I am currently working on updating the angular version of a project. It was v10 and I updated to v11. Fixed many errors, but ng2-charts keep throwing these errors on ng serve.
Error: node_modules/ng2-charts/lib/base-chart.directive.d.ts:39:21 - error TS2694: Namespace '"E:/projects/Credo/kratos/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'. 39 static ɵfac: i0.ɵɵFactoryDeclaration, never>; ~~~~~~~~~~~~~~~~~~~~ Error: node_modules/ng2-charts/lib/base-chart.directive.d.ts:40:21 - error TS2694: Namespace '"E:/projects/Credo/kratos/node_modules/@angular/core/core"' has no exported member 'ɵɵDirectiveDeclaration'. 40 static ɵdir: i0.ɵɵDirectiveDeclaration, "canvas[baseChart]", ["base-chart"], { "type": "type"; "legend": "legend"; "data": "data"; "opti ons": "options"; "plugins": "plugins"; "labels": "labels"; "datasets": "datasets"; }, { "chartClick": "chartClick"; "chartHover": "chartHover"; }, never>; ~~~~~~~~~~~~~~~~~~~~~~ Error: node_modules/ng2-charts/lib/ng-charts.module.d.ts:14:21 - error TS2694: Namespace '"E:/projects/Credo/kratos/node_modules/@angular/core/core"' has no exported member 'ɵɵF actoryDeclaration'. 14 static ɵfac: i0.ɵɵFactoryDeclaration; ~~~~~~~~~~~~~~~~~~~~ Error: node_modules/ng2-charts/lib/ng-charts.module.d.ts:15:21 - error TS2694: Namespace '"E:/projects/Credo/kratos/node_modules/@angular/core/core"' has no exported member 'ɵɵN gModuleDeclaration'. 15 static ɵmod: i0.ɵɵNgModuleDeclaration; ~~~~~~~~~~~~~~~~~~~~~ Error: node_modules/ng2-charts/lib/ng-charts.module.d.ts:16:21 - error TS2694: Namespace '"E:/projects/Credo/kratos/node_modules/@angular/core/core"' has no exported member 'ɵɵI njectorDeclaration'. 16 static ɵinj: i0.ɵɵInjectorDeclaration; ~~~~~~~~~~~~~~~~~~~~~ Error: node_modules/ng2-charts/lib/ng-charts.module.d.ts:8:21 - error TS2694: Namespace '"E:/projects/Credo/kratos/node_modules/@angular/core/core"' has no exported member 'ɵɵFa ctoryDeclaration'. 8 static ɵfac: i0.ɵɵFactoryDeclaration; ~~~~~~~~~~~~~~~~~~~~ Error: node_modules/ng2-charts/lib/ng-charts.module.d.ts:9:22 - error TS2694: Namespace '"E:/projects/Credo/kratos/node_modules/@angular/core/core"' has no exported member 'ɵɵIn jectableDeclaration'. 9 static ɵprov: i0.ɵɵInjectableDeclaration; ~~~~~~~~~~~~~~~~~~~~~~~ Error: node_modules/ng2-charts/lib/theme.service.d.ts:10:21 - error TS2694: Namespace '"E:/projects/Credo/kratos/node_modules/@angular/core/core"' has no exported member 'ɵɵFact oryDeclaration'. 10 static ɵfac: i0.ɵɵFactoryDeclaration; ~~~~~~~~~~~~~~~~~~~~ Error: node_modules/ng2-charts/lib/theme.service.d.ts:11:22 - error TS2694: Namespace '"E:/projects/Credo/kratos/node_modules/@angular/core/core"' has no exported member 'ɵɵInje ctableDeclaration'. 11 static ɵprov: i0.ɵɵInjectableDeclaration; ~~~~~~~~~~~~~~~~~~~~~~~ Error: src/app/modules/discussions/modules/view-discussion/view-discussion.module.ts:18:10 - error TS2724: '"ng2-charts"' has no exported member named 'ChartsModule'. Did you me an 'NgChartsModule'? 18 import { ChartsModule } from 'ng2-charts'; ~~~~~~~~~~~~ node_modules/ng2-charts/lib/ng-charts.module.d.ts:11:22 11 export declare class NgChartsModule { ~~~~~~~~~~~~~~ 'NgChartsModule' is declared here. Error: src/app/modules/statistics/statistics.module.ts:4:10 - error TS2724: '"ng2-charts"' has no exported member named 'ChartsModule'. Did you mean 'NgChartsModule'? 4 import { ChartsModule } from 'ng2-charts'; ~~~~~~~~~~~~ node_modules/ng2-charts/lib/ng-charts.module.d.ts:11:22 11 export declare class NgChartsModule { ~~~~~~~~~~~~~~ 'NgChartsModule' is declared here. Error: ./src/app/modules/discussions/modules/view-discussion/view-discussion.module.ts 48:16-28 "export 'ChartsModule' was not found in 'ng2-charts' Error: ./src/app/modules/statistics/statistics.module.ts 32:16-28 "export 'ChartsModule' was not found in 'ng2-charts' Error: ./node_modules/ng2-charts/fesm2015/ng2-charts.mjs 13:35-50 Can't import the named export 'BehaviorSubject' from non EcmaScript module (only default export is available) Error: ./node_modules/ng2-charts/fesm2015/ng2-charts.mjs 118:6-11 Can't import the named export 'Chart' from non EcmaScript module (only default export is available) Error: ./node_modules/ng2-charts/fesm2015/ng2-charts.mjs 118:27-32 Can't import the named export 'Chart' from non EcmaScript module (only default export is available) Error: ./node_modules/ng2-charts/fesm2015/ng2-charts.mjs 120:34-39 Can't import the named export 'Chart' from non EcmaScript module (only default export is available) Error: ./node_modules/ng2-charts/fesm2015/ng2-charts.mjs 429:0-5 Can't import the named export 'Chart' from non EcmaScript module (only default export is available) Error: ./node_modules/ng2-charts/fesm2015/ng2-charts.mjs 433:93-98 Can't import the named export 'Chart' from non EcmaScript module (only default export is available) Error: ./node_modules/ng2-charts/fesm2015/ng2-charts.mjs 228:11-24 Can't import the named export 'ElementRef' from non EcmaScript module (only default export is available) Error: ./node_modules/ng2-charts/fesm2015/ng2-charts.mjs 270:12-25 Can't import the named export 'ElementRef' from non EcmaScript module (only default export is available)0m Error: ./node_modules/ng2-charts/fesm2015/ng2-charts.mjs 67:26-38 Can't import the named export 'EventEmitter' from non EcmaScript module (only default export is available) Error: ./node_modules/ng2-charts/fesm2015/ng2-charts.mjs 68:26-38 Can't import the named export 'EventEmitter' from non EcmaScript module (only default export is available) Error: ./node_modules/ng2-charts/fesm2015/ng2-charts.mjs 50:10-20 Can't import the named export 'Injectable' from non EcmaScript module (only default export is available) Error: ./node_modules/ng2-charts/fesm2015/ng2-charts.mjs 423:10-20 Can't import the named export 'Injectable' from non EcmaScript module (only default export is available) Error: ./node_modules/ngx-window-token/fesm2015/ngx-window-token.mjs 2:17-31 Can't import the named export 'InjectionToken' from non EcmaScript module (only default export is available) Error: ./node_modules/ng2-charts/fesm2015/ng2-charts.mjs 279:12-17 Can't import the named export 'Input' from non EcmaScript module (only default export is available) Error: ./node_modules/ng2-charts/fesm2015/ng2-charts.mjs 71:62-82 Can't import the named export 'distinctUntilChanged' from non EcmaScript module (only default export is available) Error: ./node_modules/ng2-charts/fesm2015/ng2-charts.mjs 429:47-60 Can't import the named export 'registerables' from non EcmaScript module (only default export is available) Error: ./node_modules/ng2-charts/fesm2015/ng2-charts.mjs 35:10-28 Can't import the named export 'ɵɵFactoryTarget' from non EcmaScript module (only default export is available) Error: ./node_modules/ng2-charts/fesm2015/ng2-charts.mjs 234:10-28 Can't import the named export 'ɵɵFactoryTarget' from non EcmaScript module (only default export is available) Error: ./node_modules/ng2-charts/fesm2015/ng2-charts.mjs 408:10-28 Can't import the named export 'ɵɵFactoryTarget' from non EcmaScript module (only default export is available) Error: ./node_modules/ng2-charts/fesm2015/ng2-charts.mjs 460:10-28 Can't import the named export 'ɵɵFactoryTarget' from non EcmaScript module (only default export is available) Error: ./node_modules/ng2-charts/fesm2015/ng2-charts.mjs 255:0-27 Can't import the named export 'ɵɵngDeclareClassMetadata' from non EcmaScript module (only default export is available) Error: ./node_modules/ng2-charts/fesm2015/ng2-charts.mjs 29:20-41 Can't import the named export 'ɵɵngDeclareFactory' from non EcmaScript module (only default export is available) Error: ./node_modules/ng2-charts/fesm2015/ng2-charts.mjs 222:26-47 Can't import the named export 'ɵɵngDeclareFactory' from non EcmaScript module (only default export is available) Error: ./node_modules/ng2-charts/fesm2015/ng2-charts.mjs 402:29-50 Can't import the named export 'ɵɵngDeclareFactory' from non EcmaScript module (only default export is available) Error: ./node_modules/ng2-charts/fesm2015/ng2-charts.mjs 451:22-43 Can't import the named export 'ɵɵngDeclareFactory' from non EcmaScript module (only default export is available) Error: ./node_modules/ng2-charts/fesm2015/ng2-charts.mjs 37:21-45 Can't import the named export 'ɵɵngDeclareInjectable' from non EcmaScript module (only default export is available) Error: ./node_modules/ng2-charts/fesm2015/ng2-charts.mjs 410:30-54 Can't import the named export 'ɵɵngDeclareInjectable' from non EcmaScript module (only default export is available) Error: ./node_modules/ng2-charts/fesm2015/ng2-charts.mjs 470:22-44 Can't import the named export 'ɵɵngDeclareInjector' from non EcmaScript module (only default export is available) Error: ./node_modules/ng2-charts/fesm2015/ng2-charts.mjs 462:22-44 Can't import the named export 'ɵɵngDeclareNgModule' from non EcmaScript module (only default export is available)
I tried many different versions of ng2-charts, chart.js and @types/chart.js, but nothing seems to fix it.
package.json
{ "name": "kratos", "version": "15.17.1", "engines": { "npm": "please-use-yarn", "yarn": ">= 1.22.4", "node": ">=12.17" }, "license": "proprietary", "repository": { "type": "git", "url": "https://github.com/credoweb/kratos.git" }, "scripts": { "ng": "ng", "start": "yarn patch:pdpfjs && ng serve --disable-host-check --host 0.0.0.0", "start:ci": "yarn start --progress=false", "build": "yarn patch:pdpfjs && node --max-old-space-size=8192 node_modules/@angular/cli/bin/ng build --prod", "build:client": "yarn patch:pdpfjs && node --max-old-space-size=8192 node_modules/@angular/cli/bin/ng build --prod", "build:server": "yarn patch:pdpfjs && node --max-old-space-size=8192 node_modules/@angular/cli/bin/ng run kratos:server:production", "build:ssr": "yarn build:client --deploy-url=//d34t42wpe6kclg.cloudfront.net/client/ && yarn build:server && gulp && yarn patch:manifest", "build:dev:ssr": "yarn build:client && yarn build:server && gulp", "dev:ssr": "yarn patch:pdpfjs && node --max-old-space-size=8192 node_modules/@angular/cli/bin/ng run kratos:serve-ssr", "lint": "ng lint kratos && yarn lint:style", "lint:style": "stylelint \"src/**/*.scss\" -q -o lint-report.json", "serve:ssr": "node dist/server/main.js", "check-permissions": "make check-permissions", "pm2:start": "pm2 start ecosystem.config.json", "pm2:stop": "pm2 delete ecosystem.config.json", "pm2:restart": "pm2 restart ecosystem.config.json", "test": "ng test kratos", "test:ci": "yarn test --progress=false --watch=false --browsers=ChromeHeadless", "test:e2e": "nightwatch", "test:e2e:ci": "start-server-and-test start:ci http-get://localhost:4200 test:e2e", "test:e2e:remock": "cross-env REMOCK=1 nightwatch", "test:e2e:nofixtures": "cross-env DISABLE_FIXTURES=1 nightwatch", "test:e2e:debug": "cross-env DEBUG=nock.* nightwatch", "test:e2e:lbo": "cross-env LEAVE_BROWSER_OPEN=1 nightwatch", "release": "cross-env HUSKY_BYPASS=true standard-version", "patch:manifest": "node patch-hashed-assets-manifest --deploy-url=//d34t42wpe6kclg.cloudfront.net/client/", "webpack:analyze": "yarn patch:pdpfjs && ng build --prod --statsJson=true && npx webpack-bundle-analyzer dist/browser/stats.json", "patch:pdpfjs": "node patch-pdf-worker.js", "patch:bootstrap": "node bootstrap-post-install.js", "postinstall": "yarn patch:bootstrap" }, "private": true, "pre-commit": [ "lint", "check-permissions" ], "dependencies": { "@angular/animations": "11.2.14", "@angular/cdk": "^11.2.13", "@angular/common": "11.2.14", "@angular/compiler": "11.2.14", "@angular/core": "11.2.14", "@angular/forms": "11.2.14", "@angular/localize": "^11.2.14", "@angular/platform-browser": "11.2.14", "@angular/platform-browser-dynamic": "11.2.14", "@angular/platform-server": "11.2.14", "@angular/router": "11.2.14", "@angular/youtube-player": "^11.0.4", "@commitlint/cli": "11.0.0", "@commitlint/config-conventional": "11.0.0", "@ng-select/ng-select": "5.0.8", "@nguniversal/express-engine": "10.1.0", "@ngx-translate/core": "13.0.0", "@ngxs-labs/actions-executing": "^0.1.9", "@ngxs-labs/select-snapshot": "^3.0.0", "@ngxs/devtools-plugin": "^3.7.2", "@ngxs/logger-plugin": "^3.7.2", "@ngxs/store": "^3.7.2", "@popperjs/core": "^2.11.2", "@types/chart.js": "2.9.37", "amazon-ivs-player": "1.2.0", "chart.js": "3.8.0", "chartjs-plugin-datalabels": "0.7.0", "core-js": "^3.6.4", "css-loader": "^0.28.11", "datebook": "^7.0.8", "express": "^4.15.2", "faker": "^4.1.0", "hls.js": "^1.2.0", "html-entities": "^1.2.1", "html-loader": "^0.5.5", "http-status-codes": "^1.3.0", "husky": "^1.3.1", "isbot": "^3.4.6", "jwt-decode": "^2.2.0", "mkdirp": "^0.5.1", "mobile-detect": "^1.4.2", "moment": "^2.22.2", "ng-in-viewport": "^6.1.5", "ng2-charts": "^3.0.11", "ng2-tooltip-directive": "~2.9.22", "ngx-captcha": "^8.0.1", "ngx-clipboard": "^13.0.1", "ngx-quill": "^13.2.0", "ngx-responsive": "^9.0.3", "ngx-uploader": "10.0.0", "pm2": "^4.4.0", "postcss-loader": "^2.1.5", "quill-mention": "^3.0.3", "rxjs": "^6.5.4", "socket.io-client": "^2.3.0", "standard-version": "9.0.0", "subsink": "^1.0.1", "tslib": "^2.0.0", "ua-parser-js": "^1.0.2", "video.js": "^7.11.8", "zone.js": "0.10.3" }, "devDependencies": { "@angular-devkit/build-angular": "0.1102.19", "@angular/cli": "11.2.19", "@angular/compiler-cli": "11.2.14", "@angular/language-service": "11.2.14", "@angular/service-worker": "^11.0.0", "@credoweb/phoebe": "0.0.13", "@hetznercloud/ngx-translate-mock": "^0.1.0", "@nguniversal/builders": "10.1.0", "@types/express": "^4.17.0", "@types/jasmine": "~3.6.0", "@types/jasminewd2": "~2.0.3", "@types/lodash": "^4.14.106", "@types/node": "^14.0.6", "bootstrap": "5.1.3", "chalk": "^4.0.0", "chromedriver": "^85.0.0", "codelyzer": "^6.0.0", "cookie-parser": "^1.4.3", "cpy-cli": "^1.0.1", "cross-env": "^7.0.2", "detect-browser": "5.1.1", "dotdotdot-js": "4.1.0", "express": "^4.15.2", "gulp": "^4.0.1", "gulp-hash": "^4.2.2", "http-server": "^0.10.0", "intersection-observer": "^0.7.0", "jasmine-core": "~3.6.0", "jasmine-spec-reporter": "~5.0.0", "jsonwebtoken": "~8.5.0", "karma": "~6.4.1", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~3.0.2", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", "mutationobserver-shim": "^0.3.3", "ngx-bootstrap": "6.2.0", "ngx-extended-pdf-viewer": "^5.0.1", "ngx-infinite-scroll": "9.1.0", "ngx-swiper-wrapper": "^10.0.0", "nightwatch": "^1.3.5", "nock": "^12.0.3", "proxy-chain": "^0.4.5", "querystring": "^0.2.0", "reflect-metadata": "^0.1.10", "rxjs-compat": "6.6.3", "start-server-and-test": "^1.11.0", "stylelint": "^13.8.0", "stylelint-config-standard": "^20.0.0", "swiper": "^6.3.4", "ts-loader": "8.0.4", "ts-node": "9.0.0", "tslint": "~6.1.0", "typescript": "4.1.6", "webpack": "^4.41.6", "webpack-cli": "^3.1.1", "yargs": "^13.2.4" } }
angular.json
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "kratos": { "root": "", "sourceRoot": "src", "projectType": "application", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/browser", "index": "src/index.html", "main": "src/main.ts", "tsConfig": "src/tsconfig.app.json", "showCircularDependencies": false, "polyfills": "src/polyfills.ts", "assets": [ { "glob": "config.json", "input": "src/config", "output": "/" }, { "glob": "**/*", "input": "node_modules/ngx-extended-pdf-viewer/assets/", "output": "/assets/" }, { "glob": "**/*", "input": "node_modules/amazon-ivs-player/dist/assets/", "output": "/assets/" }, "src/assets", "src/vendor", "src/langs", "src/favicon.ico", "src/apple-touch-icon.png", "src/e2e.html", "src/legacy-index" ], "styles": [ { "input": "src/styles/core.scss", "bundleName": "core", "inject": true }, { "input": "src/styles/bootstrap-custom.scss", "bundleName": "bootstrap.custom", "inject": true }, { "input": "src/styles/shared.scss", "bundleName": "shared", "inject": true }, { "input": "src/styles/home.scss", "bundleName": "home.chunk", "inject": true }, { "input": "src/styles/publications.scss", "bundleName": "publications.chunk", "inject": true }, { "input": "src/styles/discussions.scss", "bundleName": "discussions.chunk", "inject": true }, { "input": "src/styles/events.scss", "bundleName": "events.chunk", "inject": true }, { "input": "src/styles/topics.scss", "bundleName": "topics.chunk", "inject": true }, { "input": "src/styles/surveys.scss", "bundleName": "surveys.chunk", "inject": true }, { "input": "src/styles/profiles.scss", "bundleName": "profiles.chunk", "inject": true }, { "input": "src/styles/notifications.scss", "bundleName": "notifications.chunk", "inject": true }, { "input": "src/styles/contacts.scss", "bundleName": "contacts.chunk", "inject": true }, { "input": "src/styles/settings.scss", "bundleName": "settings.chunk", "inject": true }, { "input": "src/styles/search.scss", "bundleName": "search.chunk", "inject": true }, { "input": "src/styles/chat-campaigns.scss", "bundleName": "chat-campaigns.chunk", "inject": true }, { "input": "src/styles/dashboard.scss", "bundleName": "dashboard.chunk", "inject": true }, { "input": "src/styles/referrals.scss", "bundleName": "referrals.chunk", "inject": true }, { "input": "src/styles/errors.scss", "bundleName": "errors.chunk", "inject": true }, { "input": "src/styles/static.scss", "bundleName": "static.chunk", "inject": true }, { "input": "src/styles/authentication.scss", "bundleName": "authentication.chunk", "inject": true }, { "input": "src/styles/courses.scss", "bundleName": "courses.chunk", "inject": true }, { "input": "src/styles/promotions.scss", "bundleName": "promotions.chunk", "inject": true }, { "input": "src/styles/credoweb.scss", "bundleName": "credoweb.chunk", "inject": true } ], "scripts": [ { "input": "node_modules/mutationobserver-shim/dist/mutationobserver.min.js", "bundleName": "mutation-observer", "inject": true }, { "input": "node_modules/intersection-observer/intersection-observer.js", "bundleName": "intersection-observer", "inject": true }, { "input": "node_modules/dotdotdot-js/dist/dotdotdot.js", "bundleName": "dotdotdot-js", "inject": true }, { "input": "node_modules/amazon-ivs-player/dist/assets/amazon-ivs-wasmworker.min.js", "bundleName": "amazon-ivs-wasmworker.min", "inject": true } ] }, "configurations": { "production": { "optimization": true, "outputHashing": "all", "sourceMap": false, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": true, "buildOptimizer": true, "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ] }, "serve": {} } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "kratos:build:serve" }, "configurations": { "production": { "browserTarget": "kratos:build:production" } } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "kratos:build" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "src/test.ts", "karmaConfig": "./src/karma.conf.js", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.spec.json", "styles": [ "src/styles/main.scss" ], "assets": [ "src/assets", "src/vendor", "src/langs", "src/favicon.ico" ] } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ "src/tsconfig.app.json" ], "exclude": [ "**/node_modules/**" ] } }, "server": { "builder": "@angular-devkit/build-angular:server", "options": { "outputPath": "dist/server", "main": "server.ts", "tsConfig": "src/tsconfig.server.json", "showCircularDependencies": false }, "configurations": { "production": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ] } } }, "serve-ssr": { "builder": "@nguniversal/builders:ssr-dev-server", "options": { "browserTarget": "kratos:build", "serverTarget": "kratos:server" }, "configurations": { "production": { "browserTarget": "kratos:build:production", "serverTarget": "kratos:server:production" } } }, "prerender": { "builder": "@nguniversal/builders:prerender", "options": { "browserTarget": "kratos:build:production", "serverTarget": "kratos:server:production", "routes": [ "/" ] }, "configurations": { "production": {} } } } }, "kratos-e2e": { "root": "e2e", "sourceRoot": "e2e", "projectType": "application", "architect": { "e2e": { "builder": "@angular-devkit/build-angular:protractor", "options": { "protractorConfig": "./e2e/protractor.conf.js", "devServerTarget": "kratos:serve" } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [], "exclude": [ "**/node_modules/**" ] } } } } }, "schematics": { "@schematics/angular:class": { "skipTests": true }, "@schematics/angular:component": { "skipTests": false, "inlineStyle": true, "inlineTemplate": false, "prefix": "app", "style": "scss" }, "@schematics/angular:directive": { "skipTests": true, "prefix": "app" }, "@schematics/angular:guard": { "skipTests": true }, "@schematics/angular:module": { "skipTests": true }, "@schematics/angular:pipe": { "skipTests": true }, "@schematics/angular:service": { "skipTests": true } }, "defaultProject": "kratos", "cli": { "analytics": false } }
Closing this threat. After few days of going back and forth through versions, nothing worked at all. I decided to upgrade to angular 12, and it all started working again. No resolution for angular 11.