Angular TypeError: _angular_core__WEBPACK_IMPORTED_MODULE_1__.ɵɵdefineInjectable is not a function

Question

I am running my app LiveCicle and when I navigate to the map route I get this error:

ERROR Error: Uncaught (in promise): TypeError: _angular_core__WEBPACK_IMPORTED_MODULE_1__.ɵɵdefineInjectable is not a function
TypeError: _angular_core__WEBPACK_IMPORTED_MODULE_1__.ɵɵdefineInjectable is not a function
    at tm.service.ts:9

This is weird because I am defining tm service as a provider in the route's module.

@NgModule({
 providers: [
    {
      provide:
        HTTP_INTERCEPTORS
      ,

      useClass: AuthInterceptor,
      multi: true
    },
    TicketMasterService
  ],
})

const routes: Routes = [
  {path: 'map',   loadChildren: () => import('./event-map-page/event-map-page.module').then(m => m.EventMapPageModule)},

  {path: '**', redirectTo: '', pathMatch: 'full'},

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

I only get this error in production. everything works perfectly when I run locally.

import { Injectable, OnInit } from '@angular/core';
import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
import { environment } from '../../environments/environment';
import { DataService } from '../../services/dataService/data.service';
import { TmEvent } from '../../models/tmEvent/tm-event.model';
@Injectable()
export class TicketMasterService {
  noAuthHeader = { headers: new HttpHeaders({ 'NoAuth': 'True'})};
  private readonly TM_EVENTS = 'TM_EVENTS';
  tmEvents: any = [];
  constructor(private http: HttpClient, private data: DataService) {
  }

  fetchTmData() {
    this.http.get(environment.apiBaseUrl + '/ticketmaster-events', this.noAuthHeader).subscribe(res => {
      this.getTheFields(res);
    });
  }
}

Answer 1

I experimented with a similar problem go to ./node_modules/ng-inline-svg/lib_esmodule/svg-cache.service.js and search for ɵɵ and delete it or click on the error and search for ɵɵ and delete it I hope this can be useful for anyone

Answer 2

@Jonathan which angular version are you using?

I experimented with a similar problem when I updated to angular 8.

Like you, my application worked fine locally but not in production. Lazy loading or double click events were not working fine and the application thrown a similar error.

After surfing on Internet, I found some solutions updating dependencies for angular core, cli.. but none of them solved the problem.

In my case, problem was in the production configuration files, specifically in tsconfig.e2e.json file. But also review your local configuration at tsconfig.json file.

Make sure you are using these parameters for angular 8 or later versions:

"module": "esnext", "moduleResolution": "node", "target": "es5"

I hope this can be useful for someone...