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 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 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 Developer

    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

Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11