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

user_10626449 0
Viewed 6491

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);
    });
  }
}
angular webpack typescript lazy-loading
2 Answers

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

user_149911060

@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...

user_141979020
Related