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 (problem iwas solved so i deleted this link). 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)

[jprincon]

Yo tenia el mismo error y tenia un problema de referencia circular.

[itsnotviktoriaaa]

No circular dependency found with help of madge(((

[kolkov]

In my case this error appears whea i add some directives into standalone component.

like this:

I had already broken all my eyes before I could find in the my app. 2 days of searching, in the end I turned off all modules, stay only the central layout component and got to the bottom of the directives.
17.3, NX, exbuild.

[kolkov]

@itsnotviktoriaaa Do you have any directives in the project?

[itsnotviktoriaaa]

Oh, Jesus Christ😧 Thank you for your answer, it’s really interesting decision. I will have checked this as well, if it will be not a decision, just to do the same thing, I mean, to clear all and to start add parts of my code again. And yes, I have some directives, maybe two for forms, but, they are used on Login page and Sign up page, and this pages work well. But, I have noticed on your example, that your directive has @HostListener, I have the same on Header Component (and it’s one of components, which exist in my layout, when I get this error). Somehow, I have to check in my code. Of course, I will have commented after my checking in here:) Thank again for your decision

[kolkov]

Thank again for your decision.

Well, this is not a solution yet, but it is a way to find a problem in a large project that has helped out many times...

[kolkov]

@itsnotviktoriaaa I think that in my case this happens because inside the library the IDE substitutes imports as from an external library (shortned link), perhaps it’s the same for you. Chech your index.tx file if exist.

and now:

[itsnotviktoriaaa]

Right now, I have decided to comment my bar and header comp

and I haven't already catch this error, you can see below screen. Thefore, smth happend with Bar or Header Component, I'm going to investigate further

[itsnotviktoriaaa]

Oh my goodness, check, I have found my problem!!!

It was my layout

And I have just change ./ on ./bar/bar.component and the same for header minute ago, i.e. right now I dont use index.ts for layout component and it's really weird for me, ambigious why it happends.

this work well

I have just provided you screen file "index.ts" when i was ./ and it didnt work when I linked on index.ts in layout.component

Thanks a lot, I have found with help of you my problem, but it's really strange, because I can link in other components with help of index.ts in another places:)

P.S WebStorm say to me that i can simplify my import like that (screen below), but when I had done that, I catched a problem as well

so I have decided to stay ./bar/bar.component and the same for header, because only this works well

[kolkov]

@itsnotviktoriaaa I'm very glad that this helped you quickly solve the problem)

[itsnotviktoriaaa]

Maybe someone can explain whi it happens? I want to close this issue

[JeanMeche]

This is the same issue as with circular deps. Circular imports can break class definitions at run time.

[itsnotviktoriaaa]

But why medge didn't show me that if it's like a circular imports? Or it's not the same?