Uncaught TypeError: Cannot read properties of undefined (reading 'Logger')

[asimkaya]

I'm submitting a...

• [] Bug report
• [ ] Feature request
• [ ] Documentation issue or request
• [x] Question

Current behavior

I have situation like this. Please help me. My api-prefix-interceptor; Uncaught TypeError: Cannot read properties of undefined (reading 'Logger')

//api-prefix.interceptor.ts

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse } from '@angular/common/http';
import { catchError, Observable } from 'rxjs';

import { environment } from '@env/environment';
import { AuthenticationService, CredentialsService } from '@app/auth';

/**
 * Prefixes all requests not starting with `http[s]` with `environment.serverUrl`.
 */
@Injectable({
  providedIn: 'root'
})
export class ApiPrefixInterceptor implements HttpInterceptor {
  constructor(private cred: CredentialsService, private auth: AuthenticationService) { }

  intercept(request: HttpRequest, next: HttpHandler): Observable> {
    if (!request.url.includes('Auth/Login')) {
      const localData = JSON.parse(localStorage.getItem("credentials") || '');
      const token = localData.data.token;
      if (/^(http|https):/i.test(request.url)) {
        request = request.clone({
          setHeaders: { Authorization: `Bearer ${token}` }
        });
      }
    } else {
      if (!/^(http|https):/i.test(request.url)) {
        request = request.clone({
          url: environment.serverUrl + request.url,
        });
      }
    }

    return next.handle(request).pipe(
      catchError(
        err =>
          new Observable>(observer => {
            if (err instanceof HttpErrorResponse) {
              const errResp = err;
              if (errResp.status == 401) {
                this.auth.logout();
              }
            }
            observer.error(err);
            observer.complete();
          })
      ))
  }
}

Error handler interceptor;

//error-handler.interceptor.ts

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';

import { environment } from '@env/environment';
import { Logger } from '../logger.service';

const log = new Logger('ErrorHandlerInterceptor');

/**
 * Adds a default error handler to all requests.
 */
@Injectable({
  providedIn: 'root'
})
export class ErrorHandlerInterceptor implements HttpInterceptor {

  intercept(request: HttpRequest, next: HttpHandler): Observable> {
    return next.handle(request).pipe(catchError(error => this.errorHandler(error)));
  }

  // Customize the default error handler here if needed
  private errorHandler(response: HttpEvent): Observable> {
    if (!environment.production) {
      // Do something with the error
      log.error('Request error', response);
    }
    throw response;
  }

}

## Console errors;

error-handler.interceptor.ts:15 Uncaught TypeError: Cannot read properties of undefined (reading 'Logger')
    at Module.Logger (error-handler.interceptor.ts:15:21)
    at 7766 (i18n.service.ts:9:17)
    at __webpack_require__ (bootstrap:19:1)
    at 7196 (index.ts:3:47)
    at __webpack_require__ (bootstrap:19:1)
    at 3401 (home.module.ts:18:22)
    at __webpack_require__ (bootstrap:19:1)
    at 6907 (i18n.service.ts:13:21)
    at __webpack_require__ (bootstrap:19:1)
    at 1674 (auth-routing.module.ts:13:25)

## Environment

ngX-Rocket: 11.0.0
Node.js: v18.8.0
Npm: 8.18.0
OS: win32 x64 10.0.22000

Generated project options:
{
  "generator-ngx-rocket": {
    "version": "11.0.0",
    "props": {
      "location": "path",
      "strict": true,
      "skipInstall": false,
      "skipQuickstart": false,
      "initGit": true,
      "usePrefix": true,
      "appName": "admin panel",
      "target": [
        "web"
      ],
      "ui": "material",
      "layout": "side-menu",
      "features": [
        "auth",
        "lazy"
      ],
      "languages": [
        "tr-TR",
        "en-US"
      ],
      "tools": [],
      "utility": [],
      "deploy": "none",
      "projectName": "admin-panel",
      "packageManager": "npm",
      "mobile": [],
      "desktop": [],
      "pwa": false,
      "auth": true,
      "lazy": true,
      "e2e": false,
      "cypress": false,
      "angulartics": false
    }
  }
}

Thanks.

[Ruslancic]

Try to use console.error('Request error', response); instead log.error('Request error', response);

If error disapear, then Logger service have wrong path! Try to reimport it! I had same problem, when using custom path in ts-config!

[asimkaya]

Try to use console.error('Request error', response); instead log.error('Request error', response);

If error disapear, then Logger service have wrong path! Try to reimport it! I had same problem, when using custom path in ts-config!

Thanks, but it's not working. I changed it but same error.

[iamandreadompe]

Any news about this?