core.mjs:6531 ERROR TypeError: Cannot read properties of undefined (reading 'ɵcmp')

[itsnotviktoriaaa]

Which @angular/* package(s) are the source of the bug?

router

Is this a regression?

No

Description

When using Angular 17, everything worked ok without aliases, but when I added the path to tsconfig and changed the paths everywhere, I encountered an error in the console

import { Routes } from '@angular/router';
import { LoginComponent, SignupComponent } from 'app/views/auth';
import { authForwardGuard, LayoutComponent } from 'app/shared';

export const routes: Routes = [
  { path: '', title: 'Login in MyBookShelf', component: LoginComponent, canActivate: [authForwardGuard] },
  // { path: 'login', title: 'Login in MyBookShelf', component: LoginComponent },
  {
    path: 'signup',
    title: 'Signup in MyBookShelf',
    component: SignupComponent,
    canActivate: [authForwardGuard],
  },
  {
    path: 'home',
    component: LayoutComponent,
    canActivate: [authForwardGuard],
    children: [
      {
        path: '',
        title: 'MyBookShelf',
        loadComponent: () => import('app/views/user').then(c => c.HomeComponent),
      },
      {
        path: 'show',
        title: 'MyBookShelf',
        loadComponent: () => import('app/views/user').then(c => c.ShowAllComponent),
      },
      {
        path: 'favorites',
        title: 'MyBookShelf',
        loadComponent: () => import('app/views/user').then(c => c.FavoritesComponent),
      },
      {
        path: 'book/:id',
        title: 'MyBookShelf',
        loadComponent: () => import('app/views/user').then(c => c.DetailBookComponent),
      },
      {
        path: 'upload',
        title: 'MyBookShelf',
        loadComponent: () => import('app/views/user').then(c => c.UploadComponent),
      },
      {
        path: 'search',
        title: 'MyBookShelf',
        loadComponent: () => import('app/views/user').then(c => c.SearchComponent),
      },
    ],
  },
  { path: '**', redirectTo: '/' },
];




import { ActivatedRouteSnapshot, CanActivateFn, Router } from '@angular/router';
import { catchError, from, of, switchMap } from 'rxjs';
import { OAuthService } from 'angular-oauth2-oidc';
import { inject } from '@angular/core';
import { oAuthConfig } from 'config/';

export const authForwardGuard: CanActivateFn = (route: ActivatedRouteSnapshot, state) => {
  const router: Router = inject(Router);
  const oAuthService: OAuthService = inject(OAuthService);
  oAuthService.configure(oAuthConfig);
  console.log('HIIIII');
  if (state.url === '/' || state.url === '/signup') {
    return from(oAuthService.loadDiscoveryDocument()).pipe(
      switchMap(() => oAuthService.tryLoginImplicitFlow()),
      switchMap(() => {
        if (!oAuthService.hasValidAccessToken()) {
          console.log('мы тут');
          return of(true);
        } else {
          console.log('jjjejeje');
          return of(router.createUrlTree(['/home']));
        }
      })
    );
  } else if (state.url.includes('/home')) {
    return from(oAuthService.loadDiscoveryDocument()).pipe(
      switchMap(() => oAuthService.tryLoginImplicitFlow()),
      switchMap(() => {
        if (!oAuthService.hasValidAccessToken()) {
          return of(router.createUrlTree(['/']));
        } else {
          console.log('WE ARE HEREEE');
          return of(true);
        }
      }),
      catchError(err => {
        console.log(err);
        return of(router.createUrlTree(['/']));
      })
    );
  }

  return of(true);
};


import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { RouterModule } from '@angular/router';

import { DetailBookEffects } from 'app/ngrx';

import { getFirestore, provideFirestore } from '@angular/fire/firestore';
import { environment } from '../environments/environment.development';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { getStorage, provideStorage } from '@angular/fire/storage';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { getAuth, provideAuth } from '@angular/fire/auth';
import { provideHttpClient } from '@angular/common/http';
import { provideOAuthClient } from 'angular-oauth2-oidc';
import { provideAngularSvgIcon } from 'angular-svg-icon';
import { homeNowReducer, homeReducer } from 'app/ngrx';
import { EffectsModule } from '@ngrx/effects';
import { FavoritesEffects } from 'app/ngrx';
import { favoritesReducer } from 'app/ngrx';
import { StoreModule } from '@ngrx/store';
import { detailReducer } from 'app/ngrx';
import { AuthorEffects } from 'app/ngrx';
import { authorReducer } from 'app/ngrx';
import { BookEffects } from 'app/ngrx';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
    importProvidersFrom([
      RouterModule.forRoot(routes, {
        scrollPositionRestoration: 'enabled',
      }),
      provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
      provideAuth(() => getAuth()),
      provideFirestore(() => getFirestore()),
      provideStorage(() => getStorage()),
      StoreModule.forRoot({
        home: homeReducer,
        homeNow: homeNowReducer,
        favorites: favoritesReducer,
        detailBook: detailReducer,
        author: authorReducer,
      }),
      EffectsModule.forRoot([BookEffects, FavoritesEffects, DetailBookEffects, AuthorEffects]),
      !environment.production ? StoreDevtoolsModule.instrument() : [],
    ]),
    provideAngularSvgIcon(),
    provideOAuthClient(),
  ],
};


{
  "name": "frontend",
  "version": "0.0.0",
  "engines": {
    "node": "20.11.1",
    "npm": "10.5.0"
  },
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint",
    "lint-style": "stylelint --fix \"src/**/*.scss\" && echo \"Stylelint has finished checking\"",
    "prettier": "npx prettier --write .",
    "prepare": "husky install",
    "heroku-postbuild": "ng build"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/cli": "^17.3.1",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/compiler-cli": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/fire": "^17.0.1",
    "@angular/forms": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/router": "^17.3.0",
    "@emailjs/browser": "^4.3.3",
    "@ngrx/effects": "^17.1.1",
    "@ngrx/store": "^17.1.1",
    "angular-oauth2-oidc": "^17.0.2",
    "angular-svg-icon": "^17.0.0",
    "express": "^4.19.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "typescript": "~5.4.2",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.3.1",
    "@angular-eslint/builder": "17.3.0",
    "@angular-eslint/eslint-plugin": "17.3.0",
    "@angular-eslint/eslint-plugin-template": "17.3.0",
    "@angular-eslint/schematics": "17.3.0",
    "@angular-eslint/template-parser": "17.3.0",
    "@angular/cli": "^17.3.1",
    "@angular/compiler-cli": "^17.3.0",
    "@ngrx/eslint-plugin": "^17.1.1",
    "@types/jasmine": "~5.1.0",
    "@typescript-eslint/eslint-plugin": "7.2.0",
    "@typescript-eslint/parser": "7.2.0",
    "eslint": "^8.57.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-stylelint": "^0.1.1",
    "husky": "^8.0.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "prettier": "^3.2.5",
    "prettier-eslint": "^16.3.0",
    "stylelint": "^16.2.1",
    "stylelint-config-standard": "^36.0.0",
    "stylelint-order": "^6.0.4",
    "stylelint-scss": "^6.2.1",
    "typescript": "~5.4.2"
  }
}


/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "declaration": false,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "useDefineForClassFields": false,
    "lib": ["ES2022", "dom"],
    "paths": {
      "app/*": ["./src/app/*"],
      "shared/*": ["./src/app/shared/*"],
      "shared/": ["./src/app/shared"],
      "types/*": ["./src/app/types/*"],
      "types/": ["./src/app/types"],
      "ngr/*": ["./src/app/ngrx/*"],
      "ngr/": ["./src/app/ngrx"],
      "views/*": ["./src/app/views/*"],
      "views/": ["./src/app/views"],
      "core/*": ["./src/app/core/*"],
      "core/": ["./src/app/core"],
      "config/*": ["./src/app/config/*"],
      "config/": ["./src/app/config"]
    }
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

I would be grateful for your help!

Please provide a link to a minimal reproduction of the bug

Please provide the exception or error you saw

I get this error when I try to access routes that have loadChildren. Those. When I log in to login or signup, there is no such problem, but when I go to home, an error appears. Until I made the path in tsconfig, the entire application worked completely. Those. Apparently I can’t get to the paths that will be loaded via lazy loading

app.routes.ts:22 ERROR TypeError: Cannot read properties of undefined (reading 'ɵcmp')
    at getComponentDef (core.mjs:2529:12)
    at extractDirectiveDef (core.mjs:2418:12)
    at core.mjs:2592:21
    at Array.map (<anonymous>)
    at core.mjs:2592:10
    at createTView (core.mjs:11394:63)
    at getOrCreateComponentTView (core.mjs:11343:28)
    at createRootComponentView (core.mjs:15966:49)
    at ComponentFactory.create (core.mjs:15845:39)
    at ViewContainerRef2.createComponent (core.mjs:16265:47)

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 17.3.2
Node: 20.11.1
Package Manager: npm 9.6.7
OS: win32 x64

Angular: 17.3.2
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.2
@angular-devkit/build-angular   17.3.2
@angular-devkit/core            17.3.2
@angular-devkit/schematics      17.3.2
@angular/fire                   17.0.1
@schematics/angular             17.3.2
rxjs                            7.8.1
typescript                      5.4.3
zone.js                         0.14.4

Anything else?

[JeanMeche]

Hello, we reviewed this issue and determined that it doesn't fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.

[alan-agius4]

It's likely that there's an import cycle causing this issue.

[itsnotviktoriaaa]

It's likely that there's an import cycle causing this issue.

No circular dependency found!

[JeanMeche]

Did you check that with tools like madge ?

[alan-agius4]

@itsnotviktoriaaa, in the case you do not have a circular reference. Kindly provide a minimal reproduction that we can take a look at.

[itsnotviktoriaaa]

Did you check that with tools like madge ?

Yes)

[itsnotviktoriaaa]

@itsnotviktoriaaa, in the case you do not have a circular reference. Kindly provide a minimal reproduction that we can take a look at.

I can provide you all my project, because it is test project. It's link on archive and on that archive I provide you my branches (alias branch), where I am trying to use alias. Login and signIn works fine (I can see and dont have error in console), but when I sign in with help of google (it's important, go to with help of that to route home), i see only white screen without elements or smth like that and in console i see error. Problem not in google auth, i just said about to order to be on home page you should use button sign in with google. In that link i provide you my app and credentials (https://disk.yandex.by/d/8XEnUCA7wDRgFA). Problem is if my component load with help of lazy loading I get error below
also i provide develop branch where i dont use alias and all works well. Of course on develop branch more logic in comparison with alias branch, but, again, problem only start when i am trying to switch my project for using alias. Thank you for help!

app.routes.ts:22 ERROR TypeError: Cannot read properties of undefined (reading 'ɵcmp')
at getComponentDef (core.mjs:2529:12)
at extractDirectiveDef (core.mjs:2418:12)
at core.mjs:2592:21
at Array.map ()
at core.mjs:2592:10
at createTView (core.mjs:11394:63)
at getOrCreateComponentTView (core.mjs:11343:28)
at createRootComponentView (core.mjs:15966:49)
at ComponentFactory.create (core.mjs:15845:39)
at ViewContainerRef2.createComponent (core.mjs:16265:47)