Open Closed

Angular new app not build #6487


User avatar
0
mmarjeh created

I created a new project, but the angular app didn't work. I got the following error:

./src/app/app.module.ts:17:0-37 - Error: Module not found: Error: Empty dependency (no request)

./src/app/app.module.ts:25:0-78 - Error: Module not found: Error: Can't resolve '@volosoft/abp.ng.theme.lepton-x/account' in 'D:\Projects\ExpenseOrder\angular\src\app'

Error: src/app/app.component.ts:6: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.

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

Error: src/app/app.component.ts:7: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.

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

Error: src/app/app.component.ts:8: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.

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

Error: src/app/app.module.ts:17:35 - error TS2307: Cannot find module '' or its corresponding type declarations.

17 import { ThemeLeptonModule } from ''; ~~

Error: src/app/app.module.ts:25:37 - error TS2307: Cannot find module '@volosoft/abp.ng.theme.lepton-x/account' or its corresponding type declarations.

25 import { AccountLayoutModule } from '@volosoft/abp.ng.theme.lepton-x/account'; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: src/app/app.module.ts:29:12 - error NG1010: Value

Error: Can't resolve 'node_modules/bootstrap-icons/font/bootstrap-icons.css' in 'D:\Projects\ExpenseOrder\angular'

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

ABP Framework version: v7.3.3

UI Type: Angular

Database System: EF Core (SQL Server)


6 Answer(s)
  • User Avatar
    0
    Anjali_Musmade created
    Support Team Member

    Hi,

    please check your app.module.ts - check whether the dependencies are included or not like

    import { AccountLayoutModule } from '@volosoft/abp.ng.theme.lepton-x/account';

    or try to delete yarn.lock file and execute yarn again it will reinstall all the packages at angular side.

    regards,

  • User Avatar
    0
    mmarjeh created

    Hi,

    Thanks for your reply, the mentioned dependency is included in app.module.ts but it sounds missing, I already executed yarn install code but the same error. I also tried this command yarn add @abp/ng.theme.lepton-x but in gain:

    Cannot find module '@volosoft/abp.ng.theme.lepton-x/account' or its corresponding type declarations.ts(2307)

    Could you please check and advise.

  • User Avatar
    0
    Anjali_Musmade created
    Support Team Member

    Hello,

    please check this discussion https://github.com/abpframework/abp/issues/17157

    Please let me know if it helps you.

    thanks

  • User Avatar
    0
    mahmut.gundogdu created

    Could you share your package.json and app.module.ts (removed from business related sensitive things).

    row 17 is not placed in there. it seems erorr. import { ThemeLeptonModule } from '';

  • User Avatar
    0
    mmarjeh created

    app.module.ts

    import { CoreModule } from '@abp/ng.core'; import { GdprConfigModule } from '@volo/abp.ng.gdpr/config'; import { SettingManagementConfigModule } from '@abp/ng.setting-management/config'; import { ThemeSharedModule } from '@abp/ng.theme.shared'; import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { CommercialUiConfigModule } from '@volo/abp.commercial.ng.ui/config'; import { AccountAdminConfigModule } from '@volo/abp.ng.account/admin/config'; import { AccountPublicConfigModule } from '@volo/abp.ng.account/public/config'; import { AuditLoggingConfigModule } from '@volo/abp.ng.audit-logging/config'; import { IdentityConfigModule } from '@volo/abp.ng.identity/config'; import { LanguageManagementConfigModule } from '@volo/abp.ng.language-management/config'; import { registerLocale } from '@volo/abp.ng.language-management/locale'; import { SaasConfigModule } from '@volo/abp.ng.saas/config'; import { TextTemplateManagementConfigModule } from '@volo/abp.ng.text-template-management/config'; //import { ThemeLeptonModule } from ''; import { environment } from '../environments/environment'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { APP_ROUTE_PROVIDER } from './route.provider'; import { OpeniddictproConfigModule } from '@volo/abp.ng.openiddictpro/config'; import { FeatureManagementModule } from '@abp/ng.feature-management'; import { AbpOAuthModule } from '@abp/ng.oauth'; //import { AccountLayoutModule } from '@volosoft/abp.ng.theme.lepton-x/account';

    import { CURRENCIES_CURRENCY_ROUTE_PROVIDER } from './currencies/currency/providers/currency-route.provider'; import { ThemeLeptonModule } from '@volo/abp.ng.theme.lepton'; @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, BrowserAnimationsModule, AppRoutingModule, CoreModule.forRoot({ environment, registerLocaleFn: registerLocale(), }), AbpOAuthModule.forRoot(), ThemeSharedModule.forRoot(), AccountPublicConfigModule.forRoot(), //AccountLayoutModule.forRoot(), IdentityConfigModule.forRoot(), LanguageManagementConfigModule.forRoot(), SaasConfigModule.forRoot(), AuditLoggingConfigModule.forRoot(), OpeniddictproConfigModule.forRoot(), TextTemplateManagementConfigModule.forRoot(), SettingManagementConfigModule.forRoot(), ThemeLeptonModule.forRoot(), CommercialUiConfigModule.forRoot(), FeatureManagementModule.forRoot(), GdprConfigModule.forRoot({ cookieConsent: { privacyPolicyUrl: 'gdpr-cookie-consent/privacy', cookiePolicyUrl: 'gdpr-cookie-consent/cookie', }, }), ], providers: [APP_ROUTE_PROVIDER, CURRENCIES_CURRENCY_ROUTE_PROVIDER], bootstrap: [AppComponent], }) export class AppModule {}

    package.json

    { "name": "ExpenseOrder", "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": "~7.3.3", "@abp/ng.core": "~7.3.3", "@abp/ng.oauth": "~7.3.3", "@abp/ng.setting-management": "~7.3.3", "@abp/ng.theme.lepton-x": "^3.0.1", "@abp/ng.theme.shared": "~7.3.3", "@angular/animations": "~16.0.0", "@angular/common": "~16.0.0", "@angular/compiler": "~16.0.0", "@angular/core": "~16.0.0", "@angular/forms": "~16.0.0", "@angular/localize": "~16.0.0", "@angular/platform-browser": "~16.0.0", "@angular/platform-browser-dynamic": "~16.0.0", "@angular/router": "~16.0.0", "@volo/abp.commercial.ng.ui": "~7.3.3", "@volo/abp.ng.account": "~7.3.3", "@volo/abp.ng.audit-logging": "~7.3.3", "@volo/abp.ng.gdpr": "~7.3.3", "@volo/abp.ng.identity": "~7.3.3", "@volo/abp.ng.language-management": "~7.3.3", "@volo/abp.ng.openiddictpro": "~7.3.3", "@volo/abp.ng.saas": "~7.3.3", "@volo/abp.ng.text-template-management": "~7.3.3", "@volo/abp.ng.theme.lepton": "^7.3.3", "rxjs": "7.5.6", "tslib": "^2.1.0", "zone.js": "~0.13.0" }, "devDependencies": { "@abp/ng.schematics": "~7.3.3", "@angular-devkit/build-angular": "~16.0.0", "@angular-eslint/builder": "~16.0.0", "@angular-eslint/eslint-plugin": "~16.0.0", "@angular-eslint/eslint-plugin-template": "~16.0.0", "@angular-eslint/schematics": "~16.0.0", "@angular-eslint/template-parser": "~16.0.0", "@angular/cli": "~16.0.0", "@angular/compiler-cli": "~16.0.0", "@angular/language-service": "~16.0.0", "@types/jasmine": "~3.6.0", "@types/node": "^12.11.1", "@typescript-eslint/eslint-plugin": "^5.36.2", "@typescript-eslint/parser": "^5.36.2", "eslint": "^8.23.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.7.0", "ng-packagr": "^16.0.1", "typescript": "~5.0.4" } }

  • User Avatar
    0
    masum.ulu created
    Support Team Angular Expert

    Hi please remove @abp/ng.theme.lepton-x package in your package.json and re-install node_modules. lepon-x package is diff. theme package package also version matrix goes like

    | ABP | Leptonx | | --- | --- | | 7.2.x | 2.2.x | | 7.3.x | 2.3.x | | 8.0.x | 3.0.x |

    but in ur case u want to use ThemeLepton not LeptonX

Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v10.0.0-preview. Updated on July 09, 2025, 06:20