@agm/core modules are giving error in angular 7 'ɵɵdefineInjectable' was not found in '@angular/core'

Question

i am using @agm/core libraries and few packages in angular 7. but i am getting error:

WARNING in ./node_modules/@agm/core/fesm5/agm-core.js 4538:34-52
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/ngx-bootstrap-slider/fesm5/ngx-bootstrap-slider.js 7:38-56
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/@agm/core/fesm5/agm-core.js 4538:120-128
"export 'ɵɵinject' was not found in '@angular/core'

my package.json

{
  "name": "angular-registration-login-example",
  "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",
    "@agm/snazzy-info-window": "^1.0.0",
    "@angular/animations": "~7.0.0",
    "@angular/cdk": "^7.0.0",
    "@angular/common": "~7.0.0",
    "@angular/compiler": "~7.0.0",
    "@angular/core": "~7.0.0",
    "@angular/forms": "~7.0.0",
    "@angular/http": "~7.0.0",
    "@angular/material": "^7.0.0",
    "@angular/platform-browser": "~7.0.0",
    "@angular/platform-browser-dynamic": "~7.0.0",
    "@angular/router": "~7.0.0",
    "@ng-bootstrap/ng-bootstrap": "^4.2.1",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "core-js": "^2.5.4",
    "igniteui-angular": "^7.0.0",
    "ng-multiselect-dropdown": "^0.2.4",
    "ngx-bootstrap-slider": "^1.8.0",
    "ngx-loading": "^3.0.0",
    "ngx-mask": "^8.0.5",
    "rxjs": "~6.3.3",
    "s": "^1.0.0",
    "snazzy-info-window": "^1.1.1",
    "web-animations-js": "^2.3.1",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.13.3",
    "@angular/cli": "~7.0.3",
    "@angular/compiler-cli": "^7.2.6",
    "@angular/language-service": "~7.0.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.1"
  }
}

the packages which are causing the issue according to testing are: "@agm/core": "^1.0.0", "@agm/snazzy-info-window": "^1.0.0", "snazzy-info-window": "^1.1.1", "ngx-bootstrap-slider": "^1.8.0",

in console it gives this error:

ERROR Error: Uncaught (in promise): TypeError: Object(...) is not a function
TypeError: Object(...) is not a function
    at ngx-bootstrap-slider.js:7
    at Module../node_modules/ngx-bootstrap-slider/fesm5/ngx-bootstrap-slider.js (ngx-bootstrap-slider.js:15)
    at __webpack_require__ (bootstrap:83)
    at Module../src/app/shared/app-shared.module.ts (ngx-bootstrap-slider.js:485)
    at __webpack_require__ (bootstrap:83)
    at Module../src/app/theme/theme.module.ts (theme.component.ts:8)
    at __webpack_require__ (bootstrap:83)
    at $_lazy_route_resource lazy namespace object:31
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at Object.onInvoke (core.js:14060)
    at resolvePromise (zone.js:831)
    at resolvePromise (zone.js:788)
    at zone.js:892
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:14051)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)

usage in feature module:

@NgModule({
  imports: [
    AppSharedModule,
    SupervisorRoutingModule,
    IgxSliderModule,
    NgMultiSelectDropDownModule.forRoot(),
    AgmCoreModule.forRoot({
      apiKey: "AIzaSyCLXtOnKhBDBGmoqSnfhujdFT2Zmj2r8A"
    }),
    AgmSnazzyInfoWindowModule
  ],
  exports: [],
  declarations: [AdminComponent, ProfileComponent, ConfigurationComponent],
  providers: [],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AdminModule { }

does these versions of agm modules not support angular 7? how to make these work. I have to work with angular 7 only

Answer 1

Yes, the latest version of @agm/core is supposed to work with Angular9/10. It seems that the version which can be used with Angular7 is 1.0.0-beta.7. First you should uninstall current version of package and then run npm i @agm/[email protected]

Answer 2

the root cause behind this issue is well explained by devoto13.

• And the reason for this issue is that Angular 6 or 7 (don't remember exactly) used ɵɵdefineInjectable for the tree-shakable providers in the generated code for libraries (which got published to NPM). Then Angular 8 renamed this property to defineInjectable and broke all the libraries using tree-shakable providers. Then libraries got adapted and published new versions where generated code was using defineInjectable. And then Angular decided that it was not fun enough and replaced defineInjectable with ɵɵdefineInjectable and broke all the libraries using tree-shakable providers once again.
• Because of this back and forth renaming you have to use specific versions of libraries with specific versions of Angular to ensure that the symbol, which is expected by the library is actually present in the Angular bundles. Hope this explains the root cause of the problem.

Basically we need to see when the package was developed. in this case angular 7 was published around 2 years ago. so we need to install package versions published 2 years ago. that's how to avoid the question..