Angular 'abp-loader-bar' is not a known element: #9529

464199480 created 14 days ago

Create a new project and run angular ui. You will encounter the following error.

Error: src/app/app.component.ts:7:5 - error NG8001: 'abp-loader-bar' is not a known element:
1. If 'abp-loader-bar' is an Angular component, then verify that it is part of this module.
2. If 'abp-loader-bar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

7     <abp-loader-bar />
      ~~~~~~~~~~~~~~~~~~


Error: src/app/app.component.ts:8:5 - error NG8001: 'abp-dynamic-layout' is not a known element:
1. If 'abp-dynamic-layout' is an Angular component, then verify that it is part of this module.
2. If 'abp-dynamic-layout' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

8     <abp-dynamic-layout />
      ~~~~~~~~~~~~~~~~~~~~~~


Error: src/app/app.component.ts:9:5 - error NG8001: 'abp-gdpr-cookie-consent' is not a known element:
1. If 'abp-gdpr-cookie-consent' is an Angular component, then verify that it is part of this module.
2. If 'abp-gdpr-cookie-consent' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

9     <abp-gdpr-cookie-consent />
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: src/app/app.component.ts:10:5 - error NG8001: 'abp-internet-status' is not a known element:
1. If 'abp-internet-status' is an Angular component, then verify that it is part of this module.
2. If 'abp-internet-status' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

10     <abp-internet-status />
       ~~~~~~~~~~~~~~~~~~~~~~~


Error: src/app/app.module.ts:28:14 - error NG1010: Value

Error: src/app/app.module.ts:52:5 - error TS2304: Cannot find name 'InternetConnectionStatusComponent'.

52     InternetConnectionStatusComponent,
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

AI-Bot created 14 days ago

Support Team ABP Agent

To resolve the "'abp-loader-bar' is not a known element" and similar errors in your ABP Angular project, you need to ensure that the required ABP Angular modules are imported into your AppModule (or the relevant feature module). These components are provided by the ABP Angular UI libraries and must be registered in your module imports.

Follow these steps:

Install Required ABP Angular Packages

Make sure you have the following packages installed (use the version matching your ABP version, e.g., ~9.2.1):

yarn add @abp/ng.components @abp/ng.core @abp/ng.theme.shared

Import ABP Modules in AppModule

In your app.module.ts, import the necessary ABP modules:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CoreModule } from '@abp/ng.core';
import { ThemeSharedModule } from '@abp/ng.theme.shared';
import { AppComponent } from './app.component';
import { ComponentsModule } from '@abp/ng.components';

@NgModule({
  declarations: [
    AppComponent,
    // ...other components
  ],
  imports: [
    BrowserModule,
    CoreModule.forRoot({}),
    ThemeSharedModule.forRoot(),
    ComponentsModule, // <-- This is required for abp-loader-bar, abp-dynamic-layout, etc.
    // ...other modules
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Remove Manual Declarations of ABP Components

Do not manually declare ABP components like InternetConnectionStatusComponent in your declarations array. They are already declared in the ABP modules.

Restart Your Angular Application

After making these changes, stop and restart your Angular development server:

yarn start

This will register the ABP components and resolve the "not a known element" errors.

Sources:

https://docs.abp.io/en/abp/latest/UI/Angular/Component-Replacement
https://abp.io/docs/latest/framework/ui/angular/overview
https://abp.io/support/questions/8935

This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

464199480 created 14 days ago

The reply does not solve the problem.

464199480 created 13 days ago

This issue has been present since version 9.2.0.

erdem.caygor created 13 days ago

Support Team

Hello,

Could you please delete your yarn.lock file and node_modules folder and then reinstall dependencies to ensure everything is up-to-date and consistent.

You can do this by running the following commands:

rm -rf node_modules yarn.lock
yarn install

Also, could you share your package.json file with me? That way, we can check if there are any version mismatches or missing dependencies that might be causing the issue.

Thanks

464199480 created 12 days ago

package.json

{
  "name": "BookStore",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --open",
    "build": "ng build",
    "build:prod": "ng build --configuration production",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@abp/ng.components": "~9.2.1",
    "@abp/ng.core": "~9.2.1",
    "@abp/ng.oauth": "~9.2.1",
    "@abp/ng.setting-management": "~9.2.1",
    "@abp/ng.theme.shared": "~9.2.1",
    "@volo/abp.commercial.ng.ui": "~9.2.1",
    "@volo/abp.ng.account": "~9.2.1",
    "@volo/abp.ng.audit-logging": "~9.2.1",
    "@volo/abp.ng.gdpr": "~9.2.1",
    "@volo/abp.ng.identity": "~9.2.1",
    "@volo/abp.ng.openiddictpro": "~9.2.1",
    "@volo/abp.ng.language-management": "~9.2.1",
    "@volo/abp.ng.saas": "~9.2.1",
    "@volo/abp.ng.text-template-management": "~9.2.1",
    "@volosoft/abp.ng.theme.lepton-x": "~4.2.1",
    "@angular/animations": "~19.1.0",
    "@angular/common": "~19.1.0",
    "@angular/compiler": "~19.1.0",
    "@angular/core": "~19.1.0",
    "@angular/forms": "~19.1.0",
    "@angular/localize": "~19.1.0",
    "@angular/platform-browser-dynamic": "~19.1.0",
    "@angular/platform-browser": "~19.1.0",
    "@angular/router": "~19.1.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.15.0"
  },
  "devDependencies": {
    "@abp/ng.schematics": "~9.2.1",
    "@angular-devkit/build-angular": "~19.1.0",
    "@angular-eslint/builder": "~19.0.0",
    "@angular-eslint/eslint-plugin": "~19.0.0",
    "@angular-eslint/eslint-plugin-template": "~19.0.0",
    "@angular-eslint/schematics": "~19.0.0",
    "@angular-eslint/template-parser": "~19.0.0",
    "@angular/cli": "~19.1.0",
    "@angular/compiler-cli": "~19.1.0",
    "@angular/language-service": "~19.1.0",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^20.0.0",
    "@typescript-eslint/eslint-plugin": "7.16.0",
    "@typescript-eslint/parser": "7.16.0",
    "eslint": "^8.0.0",
    "jasmine-core": "~4.0.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.0.0",
    "typescript": "~5.6.0"
  }
}

464199480 created 12 days ago

The above was generated by abp studio cli.

sumeyye.kurtulus created 10 days ago

Support Team Angular Expert

Hello, and thank you for providing all these details. Unfortunately, I’m unable to reproduce the issue on my end. Could you please share a minimal, reproducible example so we can assist you further?

Update: Here is my e-mail address sumeyye.kurtulus@volosoft.com

464199480 created 9 days ago

Execute the command abp new Acme.BookStore -u angular

Then the issue can be reproduced

sumeyye.kurtulus created 9 days ago

Support Team Angular Expert

Hello again,

I have been unable to reproduce the issue on my end. To help investigate further, I have created a simple application using the command:

abp new Acme.BookStore -u angular

Here is the project link: https://drive.google.com/file/d/1b6ykAO-yoFci-v8zQgBpZ0X4uEEkVKk0

To better understand the cause of the issue, it would be helpful if you could share a sample project where the problem occurs. Additionally, please let me know if there were any custom changes you made that might contribute to the issue. It is also possible that the problem is related to a version mismatch between Node.js and Angular.

If you could provide these details, we’ll be better equipped to assist you further.

Thank you for your cooperation.

464199480 created 6 days ago

Due to permission issues, I am unable to view your link.

I have sent the Angular project to your email.

sumeyye.kurtulus created 6 days ago

Support Team Angular Expert

I have granted you the permission. I will also be checking your sample and get back to you as soon as possible. Thank you for your cooperation.

sumeyye.kurtulus created 6 days ago

Support Team Angular Expert

I see that this import is missing for InternetConnectionStatusComponent, you will need to add this import to your app.module.ts

import {
  InternetConnectionStatusComponent,
} from '@abp/ng.theme.shared';

464199480 created 13 hours ago

I think you and I are not using the same template.

Cli: abp new Acme.BookStore -u angular -t app-pro

Try this and you can reproduce it.

464199480 created 13 hours ago

I see that this import is missing for InternetConnectionStatusComponent, you will need to add this import to your app.module.ts

According to your method, I encountered a new problem.

./node_modules/@abp/ng.core/fesm2022/abp-ng.core-locale.mjs:1:0-155 - Error: Module not found: Error: Can't resolve 'F:/abp-demo/angular/node_modules/@angular-devkit/build-angular/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js' in 'F:\abp-demo\angular\node_modules\@abp\ng.core\fesm2022'

./node_modules/@abp/ng.core/fesm2022/abp-ng.core.mjs:1:0-155 - Error: Module not found: Error: Can't resolve 'F:/abp-demo/angular/node_modules/@angular-devkit/build-angular/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js' in 'F:\abp-demo\angular\node_modules\@abp\ng.core\fesm2022'

./node_modules/@abp/ng.oauth/fesm2022/abp-ng.oauth.mjs:1:0-155 - Error: Module not found: Error: Can't resolve 'F:/abp-demo/angular/node_modules/@angular-devkit/build-angular/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js' in 'F:\abp-demo\angular\node_modules\@abp\ng.oauth\fesm2022'

./node_modules/@angular/common/fesm2022/common.mjs:1:0-155 - Error: Module not found: Error: Can't resolve 'F:/abp-demo/angular/node_modules/@angular-devkit/build-angular/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js' in 'F:\abp-demo\angular\node_modules\@angular\common\fesm2022'

./node_modules/@angular/common/fesm2022/http.mjs:1:0-155 - Error: Module not found: Error: Can't resolve 'F:/abp-demo/angular/node_modules/@angular-devkit/build-angular/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js' in 'F:\abp-demo\angular\node_modules\@angular\common\fesm2022'

./node_modules/@angular/core/fesm2022/core.mjs:1:0-155 - Error: Module not found: Error: Can't resolve 'F:/abp-demo/angular/node_modules/@angular-devkit/build-angular/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js' in 'F:\abp-demo\angular\node_modules\@angular\core\fesm2022'

./node_modules/@floating-ui/core/dist/floating-ui.core.mjs:1:0-155 - Error: Module not found: Error: Can't resolve 'F:/abp-demo/angular/node_modules/@angular-devkit/build-angular/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js' in 'F:\abp-demo\angular\node_modules\@floating-ui\core\dist'

./node_modules/@floating-ui/dom/dist/floating-ui.dom.browser.mjs:1:0-155 - Error: Module not found: Error: Can't resolve 'F:/abp-demo/angular/node_modules/@angular-devkit/build-angular/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js' in 'F:\abp-demo\angular\node_modules\@floating-ui\dom\dist'

./node_modules/@volo/abp.ng.account/fesm2022/volo-abp.ng.account-admin-config.mjs:1:0-155 - Error: Module not found: Error: Can't resolve 'F:/abp-demo/angular/node_modules/@angular-devkit/build-angular/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js' in 'F:\abp-demo\angular\node_modules\@volo\abp.ng.account\fesm2022'

./node_modules/@volo/abp.ng.account/fesm2022/volo-abp.ng.account-admin.mjs:1:0-155 - Error: Module not found: Error: Can't resolve 'F:/abp-demo/angular/node_modules/@angular-devkit/build-angular/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js' in 'F:\abp-demo\angular\node_modules\@volo\abp.ng.account\fesm2022'

./node_modules/@volo/abp.ng.account/fesm2022/volo-abp.ng.account-public.mjs:1:0-155 - Error: Module not found: Error: Can't resolve 'F:/abp-demo/angular/node_modules/@angular-devkit/build-angular/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js' in 'F:\abp-demo\angular\node_modules\@volo\abp.ng.account\fesm2022'

./node_modules/@volo/abp.ng.identity/fesm2022/volo-abp.ng.identity-config.mjs:1:0-155 - Error: Module not found: Error: Can't resolve 'F:/abp-demo/angular/node_modules/@angular-devkit/build-angular/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js' in 'F:\abp-demo\angular\node_modules\@volo\abp.ng.identity\fesm2022'

./node_modules/@volo/abp.ng.identity/fesm2022/volo-abp.ng.identity.mjs:1:0-155 - Error: Module not found: Error: Can't resolve 'F:/abp-demo/angular/node_modules/@angular-devkit/build-angular/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js' in 'F:\abp-demo\angular\node_modules\@volo\abp.ng.identity\fesm2022'

./node_modules/@volo/abp.ng.saas/fesm2022/volo-abp.ng.saas.mjs:1:0-155 - Error: Module not found: Error: Can't resolve 'F:/abp-demo/angular/node_modules/@angular-devkit/build-angular/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js' in 'F:\abp-demo\angular\node_modules\@volo\abp.ng.saas\fesm2022'

./node_modules/@volo/ngx-lepton-x.core/fesm2022/volo-ngx-lepton-x.core.mjs:1:0-155 - Error: Module not found: Error: Can't resolve 'F:/abp-demo/angular/node_modules/@angular-devkit/build-angular/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js' in 'F:\abp-demo\angular\node_modules\@volo\ngx-lepton-x.core\fesm2022'

./node_modules/@volosoft/ngx-lepton-x/fesm2022/volosoft-ngx-lepton-x.mjs:1:0-155 - Error: Module not found: Error: Can't resolve 'F:/abp-demo/angular/node_modules/@angular-devkit/build-angular/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js' in 'F:\abp-demo\angular\node_modules\@volosoft\ngx-lepton-x\fesm2022'

./node_modules/angular-oauth2-oidc/fesm2022/angular-oauth2-oidc.mjs:1:0-155 - Error: Module not found: Error: Can't resolve 'F:/abp-demo/angular/node_modules/@angular-devkit/build-angular/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js' in 'F:\abp-demo\angular\node_modules\angular-oauth2-oidc\fesm2022'

./node_modules/angularx-qrcode/fesm2022/angularx-qrcode.mjs:1:0-155 - Error: Module not found: Error: Can't resolve 'F:/abp-demo/angular/node_modules/@angular-devkit/build-angular/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js' in 'F:\abp-demo\angular\node_modules\angularx-qrcode\fesm2022'



** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


× Failed to compile.

sumeyye.kurtulus created 7 hours ago

Support Team Angular Expert

Hello,

Adding the missing import should resolve the issue. Could you please try deleting all temporary files and folders—such as .nx, .angular, node_modules, tmp, dist, yarn.lock, etc.—and then reinstall dependencies by running yarn again?

Other than that, I did not notice any issues in the project you shared—it appears to be working as expected.

In the meantime, could you also share the versions of Node and Yarn you are using?

464199480 created 6 hours ago

Node version: 22.17.0 Yarn version: 4.9.2 Npm version 10.9.2

464199480 created 6 hours ago

Why did you create the template with references?

import {
  InternetConnectionStatusComponent,
} from '@abp/ng.theme.shared';

Assignee

sumeyye.kurtulus

Question details

ABP Version (vX.X.X)

Database Management System

Tiered (MVC) or Auth Server Separated (Angular)

Boost Your Development

ABP Live Training
Packages

See Trainings

The Official Guide

Mastering
ABP Framework

Learn More

17 Answer(s)

ABP Live TrainingPackages

MasteringABP Framework

ABP Live Training
Packages

Mastering
ABP Framework