hi
We think that the css files in our project are overwhelmed by abp.
How can I reproduce this with above angular and aspnetcore project, Thanks.
Hi, Do you want to learn how the project was created?
We don't currently overwhelm abp with any CSS. We think that the css files in our project are overwhelmed by abp. We are waiting for your help on this issue. We sent you before and after photos of integrating abp. We encountered such a problem after integrating abp. We couldn't find where the css problem was coming from. Thanks in advance for your help.
Hello, I sent the e-mail yesterday as you requested. I would appreciate it if you could help me. Thank you. Good luck.
Hello, I tried the solution you suggested and added my css file to the styles section, but I could not reach any solution when I ran the project.
I can explain the problem to you in detail as follows:
The front-end part of our project is a custom Angular project and we decided to use some features of ABP here. When we added the login structure offered by ABP to our project and included the ABP libraries, we noticed that it corrupted the CSS files in our project. In our old project where ABP libraries were not included, these CSS files worked properly and our screens looked like the screenshot we sent you.
After integrating ABP's login structure into our project, we started to use ABP's MVC structure with Angular. So, our login page here should come from MVC structure and the other pages should come from Angular structure. However, when we wanted to use the project in this way, we observed that the CSS files did not work properly. We tried removing the ABP CSS files and the lepton-x theme from the project, but this did not give us a solution. The screens continued to look like the second picture we sent you and we couldn't find where the problem was coming from. We are waiting for your suggestions and solutions on the subject.
Regards.
We tried the solution you suggested but could not find a solution. In order to better explain our problem, I am sending you photos of examples that work properly and those that do not. When we ran the project before including ABP in our project, the screen was like this and our CSS was working properly. Link: https://hizliresim.com/ld0zo5d When we include ABP in our project and run it, we encounter this screen. Link: https://hizliresim.com/jmd0pts
Hello, We use an MVC page for the login page and angular structure for other pages in the project. When done this way, abp's css files overwhelm the css files we wrote in angular. How can we avoid this situation? Have a nice day
https://hizliresim.com/1woyd17
Angular.json
Limited Time Offer!
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"cli": {
"analytics": "13f5c4a2-2474-4027-9877-fd9f96d2530c",
"schematicCollections": ["@angular-eslint/schematics"]
},
"version": 1,
"newProjectRoot": "projects",
"projects": {
"Serender": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"baseHref": "/",
"outputPath": "dist/Serender",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"allowedCommonJsDependencies": [
"@ant-design/colors",
"chart.js",
"js-sha256",
"@uppy/xhr-upload",
"@uppy/dashboard",
"@uppy/core"
],
"assets": ["src/favicon.ico", "src/assets" , {
"glob": "**/*",
"input": "./libs/rm-uikit/assets",
"output": "./assets"
}],
"styles": [
"src/styles.scss",
"src/assets/scss/style.scss",
"node_modules/ngx-toastr/toastr.css"
],
"stylePreprocessorOptions": {
"includePaths": [
"./node_modules"
]},
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "2.5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "100kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "Serender:build:production"
},
"development": {
"browserTarget": "Serender:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "Serender:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
"assets": ["src/favicon.ico", "src/assets"],
"styles": ["src/styles.scss"],
"scripts": []
}
},
"storybook": {
"builder": "@storybook/angular:start-storybook",
"options": {
"configDir": ".storybook",
"browserTarget": "rm-admin-ui:build",
"compodoc": true,
"compodocArgs": [
"-e",
"json",
"-d",
"."
],
"port": 6006
}
},
"build-storybook": {
"builder": "@storybook/angular:build-storybook",
"options": {
"configDir": ".storybook",
"browserTarget": "rm-admin-ui:build",
"compodoc": true,
"compodocArgs": [
"-e",
"json",
"-d",
"."
],
"outputDir": "dist/storybook/rm-admin-ui"
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
}
}
}
},
"rm-uikit": {
"projectType": "library",
"root": "libs/rm-uikit",
"sourceRoot": "libs/rm-uikit/src",
"prefix": "lib",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:ng-packagr",
"options": {
"project": "libs/rm-uikit/ng-package.json"
},
"configurations": {
"production": {
"tsConfig": "libs/rm-uikit/tsconfig.lib.prod.json"
},
"development": {
"tsConfig": "libs/rm-uikit/tsconfig.lib.json"
}
},
"defaultConfiguration": "production"
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "libs/rm-uikit/src/test.ts",
"tsConfig": "libs/rm-uikit/tsconfig.spec.json",
"karmaConfig": "libs/rm-uikit/karma.conf.js"
}
}
}
},
"rm-datagrid": {
"projectType": "library",
"root": "libs/rm-datagrid",
"sourceRoot": "libs/rm-datagrid/src",
"prefix": "rm",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:ng-packagr",
"options": {
"project": "libs/rm-datagrid/ng-package.json"
},
"configurations": {
"production": {
"tsConfig": "libs/rm-datagrid/tsconfig.lib.prod.json"
},
"development": {
"tsConfig": "libs/rm-datagrid/tsconfig.lib.json"
}
},
"defaultConfiguration": "production"
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "libs/rm-datagrid/src/test.ts",
"tsConfig": "libs/rm-datagrid/tsconfig.spec.json",
"karmaConfig": "libs/rm-datagrid/karma.conf.js"
}
}
}
}
}
}
package.json
{
"name": "Serender",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"dev": "ng build rm-datagrid --watch & ng build rm-uikit --watch & sleep 9 && ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"watch-rm-uikit": "ng build rm-uikit --watch",
"watch-rm-datagrid": "ng build rm-datagrid --watch",
"build-rm-uikit": "ng build rm-uikit",
"build-rm-datagrid": "ng build rm-datagrid",
"test": "ng test"
},
"private": true,
"dependencies": {
"@abp/ng.components": "~7.3.2",
"@abp/ng.core": "~7.3.2",
"@abp/ng.oauth": "~7.3.2",
"@abp/ng.setting-management": "~7.3.2",
"@abp/ng.theme.shared": "~7.3.2",
"@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",
"@fullcalendar/angular": "^5.11.0",
"@fullcalendar/daygrid": "^5.11.0",
"@fullcalendar/interaction": "^5.11.0",
"@fullcalendar/list": "^5.11.0",
"@fullcalendar/timegrid": "^5.11.0",
"@ng-bootstrap/ng-bootstrap": "^15.1.1",
"@ng-select/ng-select": "^11.1.1",
"@ngx-translate/core": "^15.0.0",
"@ngx-translate/http-loader": "^8.0.0",
"@ngxs/storage-plugin": "^3.8.1",
"@ngxs/store": "^3.8.1",
"@popperjs/core": "^2.11.8",
"@sweetalert2/ngx-sweetalert2": "^12.2.0",
"@types/sortablejs": "^1.15.2",
"@volo/abp.commercial.ng.ui": "~7.3.2",
"@volo/abp.ng.account": "~7.3.2",
"@volo/abp.ng.audit-logging": "~7.3.2",
"@volo/abp.ng.gdpr": "~7.3.2",
"@volo/abp.ng.identity": "~7.3.2",
"@volo/abp.ng.language-management": "~7.3.2",
"@volo/abp.ng.openiddictpro": "~7.3.2",
"@volo/abp.ng.saas": "~7.3.2",
"@volo/abp.ng.text-template-management": "~7.3.2",
"@volosoft/abp.ng.theme.lepton-x": "~2.3.0",
"angular-cropperjs": "^14.0.1",
"apexcharts": "^3.42.0",
"bootstrap": "^5.3.1",
"bootstrap-icons": "^1.10.5",
"concurrently": "^8.2.1",
"cropperjs": "^1.6.0",
"devextreme": "^23.1.5",
"devextreme-angular": "^23.1.5",
"exceljs": "^4.3.0",
"feather-icons": "^4.29.1",
"file-saver": "^2.0.5",
"file-saver-es": "^2.0.5",
"jspdf": "^2.5.1",
"metismenujs": "^1.4.0",
"ng-apexcharts": "^1.8.0",
"ng-bootstrap-icons": "^13.1.2-canary.1",
"ng2-simplemde": "^2.1.0",
"ngx-clipboard": "^16.0.0",
"ngx-highlightjs": "^10.0.0",
"ngx-owl-carousel-o": "^16.0.0",
"ngx-perfect-scrollbar": "^10.1.1",
"ngx-toastr": "^17.0.2",
"rxjs": "7.5.6",
"sortablejs": "^1.15.0",
"sweetalert2": "^11.7.27",
"tslib": "^2.1.0",
"zone.js": "~0.13.0"
},
"devDependencies": {
"@abp/ng.schematics": "~7.3.2",
"@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",
"@compodoc/compodoc": "^1.1.21",
"@storybook/addon-essentials": "^7.4.0",
"@storybook/addon-interactions": "^7.4.0",
"@storybook/addon-links": "^7.4.0",
"@storybook/angular": "^7.4.0",
"@storybook/blocks": "^7.4.0",
"@storybook/testing-library": "^0.2.0",
"@types/feather-icons": "^4.29.1",
"@types/jasmine": "~3.6.0",
"@types/lodash": "^4.14.198",
"@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",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"storybook": "^7.4.0",
"typescript": "~5.0.4"
}
}
Hello, If you are available, I can show you the working logic of the project. I can schedule a meeting with applications such as Zoom, Microsoft Teams. For this project to work, we first met with Mr. Galip and got an idea. We can hold our meeting in Turkish.
Thank you very much . good luck, but when I tried to start the project, I saw that it could not contact some of the abp services and the page does not open. There are results in the following endpoints, we ask for your help.
Screen: https://prnt.sc/CFNzHnkHyZJi https://prnt.sc/4ZBJdqNTVwEf https://prnt.sc/iTe9MD-xrf_e https://prnt.sc/B-pHMgSdbXCA https://prnt.sc/50cag9Ut_XcN
Normally, when we request application-configuration in the api project, currentUser etc. is received without any problems, while the relevant endpoint is triggered in the custom project we created, but it comes empty.
Hi,
requested corrections have been made. But we are getting error as below. By the way, our custom project is abp community, not commercial. We get an error like this in version I don't know what else we can do to solve the problem. The part where we get the error is abp packages for now
https://hizliresim.com/s8dnwv8 https://hizliresim.com/dliy992 https://prnt.sc/UvT7WffUnKTu
package.json
{
"name": "Demo",
"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.account": "~7.3.2",
"@abp/ng.components": "~7.3.2",
"@abp/ng.core": "~7.3.2",
"@abp/ng.identity": "~7.3.2",
"@abp/ng.oauth": "~7.3.2",
"@abp/ng.setting-management": "~7.3.2",
"@abp/ng.tenant-management": "~7.3.2",
"@abp/ng.theme.lepton-x": "~2.3.1",
"@abp/ng.theme.shared": "~7.3.2",
"@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",
"@fullcalendar/angular": "^5.11.0",
"@fullcalendar/daygrid": "^5.11.0",
"@fullcalendar/interaction": "^5.11.0",
"@fullcalendar/list": "^5.11.0",
"@fullcalendar/timegrid": "^5.11.0",
"@ng-bootstrap/ng-bootstrap": "^13.1.0",
"@ng-select/ng-select": "^9.1.0",
"@ngx-translate/core": "^14.0.0",
"@ngx-translate/http-loader": "^7.0.0",
"@ngxs/storage-plugin": "^3.7.6",
"@ngxs/store": "^3.7.6",
"@popperjs/core": "^2.11.6",
"@sweetalert2/ngx-sweetalert2": "^11.0.0",
"@types/sortablejs": "^1.15.0",
"angular-cropperjs": "^1.0.2",
"apexcharts": "^3.36.3",
"bootstrap": "^5.2.2",
"bootstrap-icons": "~1.8.3",
"concurrently": "^8.2.0",
"cropperjs": "^1.5.12",
"devextreme": "22.1.7",
"devextreme-angular": "22.1.7",
"exceljs": "^4.3.0",
"feather-icons": "^4.29.0",
"file-saver": "^2.0.5",
"file-saver-es": "^2.0.5",
"jspdf": "^2.5.1",
"metismenujs": "^1.3.1",
"ng-apexcharts": "^1.7.4",
"ng-bootstrap-icons": "^13.1.2-canary.1",
"ng2-simplemde": "^2.1.0",
"ngx-clipboard": "^15.1.0",
"ngx-highlightjs": "^7.0.1",
"ngx-owl-carousel-o": "^14.0.1",
"ngx-perfect-scrollbar": "^10.1.1",
"ngx-sortablejs": "^11.1.0",
"ngx-toastr": "^15.0.0",
"rm-datagrid": "^0.0.23",
"rm-uikit": "^0.0.5",
"rxjs": "7.8.1",
"sortablejs": "^1.15.0",
"sweetalert2": "^11.6.13",
"tslib": "^2.1.0",
"zone.js": "~0.13.0"
},
"devDependencies": {
"@abp/ng.schematics": "^6.0.3",
"@angular-devkit/build-angular": "^16.2.1",
"@angular-eslint/builder": "^16.1.1",
"@angular-eslint/eslint-plugin": "~16.0.0",
"@angular-eslint/eslint-plugin-template": "~16.0.0",
"@angular-eslint/schematics": "^16.1.1",
"@angular-eslint/template-parser": "~16.0.0",
"@angular/cli": "~16.0.0",
"@angular/compiler-cli": "~16.0.0",
"@angular/language-service": "~16.0.0",
"@compodoc/compodoc": "^1.1.21",
"@storybook/addon-essentials": "^7.4.0",
"@storybook/addon-interactions": "^7.4.0",
"@storybook/addon-links": "^7.4.0",
"@storybook/angular": "^7.4.0",
"@storybook/blocks": "^7.4.0",
"@storybook/testing-library": "^0.0.14-next.2",
"@types/feather-icons": "^4.7.0",
"@types/jasmine": "~3.6.0",
"@types/lodash": "^4.14.197",
"@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.2.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"storybook": "^7.4.0",
"typescript": "~5.0.4"
}
}
Hi, version of our current angular project: 14.2.0