I'm trying to build another client for my project which will be used for read-only purposes only. Therefor I want to reduce the libraries used in the default Angular project. Right now I'm removing libraries from angular-cli.json and see if the project still works. But this approach is quite slow. Also there are a lot of errors and I have to find out which library is missing.
Basically, I want to be able to communicate with the server-side using service-proxies as it's done in the default Angular client. Also, I want to be able to use most of the abp-functionalities like localization, timing and so on.
What would be a good aproach to build my reduced Angular client? Am I on the right path? Or should I rather start from scratch and just include the stuff I want to use? If so, how do I start and what do I have to include?
Cheers!
13 Answer(s)
-
0
@alexanderpilhar it is hard to work with Angular, I think both approaches are almost equal. But I would prefer your current approach.
Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image) -
0
@ismcagdas Thanks for your assessment! Wish me luck ;)
Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image) -
0
@alexanderpilhar I have been very interested in something similar but haven't went down the road yet as there is so much I do not need in the project. WHen you get this done, would you mind sharing what libraries caused you the most issues removing or some kind of guide to how you did this?
Thank you
Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image) -
0
good luck @alexanderpilhar ;) and pls share your experiences back here
Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image) -
0
Okay, so removing libraries I'm not going to use wasn't that hard after all. But of course I also want to remove all of the components that I'm not going to use - and this took me a while, although it turned out to not be too difficult after all. I just played around a bit trying to figure out what would be the best approach for me to reduce the ASP.NETZERO Angular client and keep it all updateable/upgradeable in case a new version of ASP.NETZERO gets published.
I'm confident that I found a good approach for me now! I'm happy to share my experience with you as soon as I'm done and sure everything still works as expected.
By then - have a nice Weekend :)
Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image) -
0
@alexanderpilhar, excellent to hear you found a great approach. I am looking forward to take a look at your approach.
Thank you for sharing.
Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image) -
0
@alexanderpilhar I am also interested in your approach. We are building an app using Ionic and I'm sure this would benefit from a cut down version of the Angular project. Please do share your findings and good luck!!!!
Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image) -
0
@alexanderpilhar did you ever figure out a good approach on this? Are you able to share?
Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image) -
0
Hello everybody!
Okay, here is what I did to get a Reduced Angular Client. I'm still in development process and so far I didn't encounter any problems with the way I edited the original ASPNETZERO Angular Project. But still, I'm not a hundred percent sure whether my approach is clean enough as there are some libraries remaining.
NOTE: My goal was to keep the Angular project updateablbe/upgradeable, so I basically commented out everything I didn't need. Modules and their Components I wanted to get rid of are: Account, App (including Admin and Main). Also I wanted to get rid of Metronic and use Bootstrap-Material-Design [https://fezvrasta.github.io/bootstrap-material-design/]) instead, as well as using flag-icon-css [http://flag-icon-css.lip.is/]) for language selection.
Also NOTE: This is Angular Client Version 5.0.0
.angular-cli.json This file is responsible for importing third party libraries and os on. I started out here, made a copy of the file to keep the original safe and started removing libraries I thought I'm not going to need. This is what I ended up with:
"styles" [list:2io0ubpc] bootstrap-material-design font-awesome leaflet flag-icon-css styles
"scripts"
jquery jquery-validate popper bootstrap-material-design js.cookie jquery.timeago jquery.signalR localforage spin jquery.spin jquery.blockUI moment-with-locales moment-timezone-with-data url abp abp.jquery abp.blockUI abp.spin abp.moment jquery.mousewheel jquery.inputmask.bundle
[/list:u:2io0ubpc]
Next I wanted to get rid of all Modules. Here is what I did to accomplish that goal (by file):
/src/root.module.ts
Added Imports [list:2io0ubpc] import { AppPublicModule } from "./app-public/app-public.module"; // custom module
Commented out Imports
//import { AppModule } from './app/app.module'; //import { UrlHelper } from '@shared/helpers/UrlHelper'; //import { AppAuthService } from '@app/shared/common/auth/app-auth.service'; //import { AppUiCustomizationService } from '@shared/common/ui/app-ui-customization.service';
Comment out all parts of code that have errors caused by the commented out Imports! [/list:u:2io0ubpc]
/src/root-routing.module.ts
Commented out Imports [list:2io0ubpc] //import { AppUiCustomizationService } from '@shared/common/ui/app-ui-customization.service';
Comment out all parts of code that have errors caused by the commented out Imports! routes
Comment out all routes Add custom routes
[/list:u:2io0ubpc]
/src/account/account.module.ts
comment out everything
/src/app/app.module.ts
comment out everything
/src/app/app.component.ts
comment out everything
/src/app/app.component.spec.ts
comment out everything
/src/app/app-routing.module.ts
comment out everything
/src/app/index.ts
comment out everything
/src/shared/common/common.module.ts
Commented out Imports [list:2io0ubpc] //import { AppUiCustomizationService } from './ui/app-ui-customization.service';
Comment out all parts of code that have errors caused by the commented out Imports! [/list:u:2io0ubpc]
/src/shared/common/app-component-base.ts
Commented out Imports [list:2io0ubpc] //import { AppUiCustomizationService } from '@shared/common/ui/app-ui-customization.service';
Comment out all parts of code that have errors caused by the commented out Imports! [/list:u:2io0ubpc]
/src/shared/helpers/LocalizedResourceHelpers.ts (Angular Client Version > 5.0.0)
loadLocalizedStylesForTheme() [list:2io0ubpc] comment out all $('head').append() related to metronic and primeng
[/list:u:2io0ubpc]
/src/shared/service-proxies/service-proxy.module.ts
Providers [list:2io0ubpc] Comment out all of them Exceptions (do not comment them out): [list:2io0ubpc] ApiServiceProxies.LanguageServiceProxy ApiServiceProxies.SessionServiceProxy
Add custom service proxies [/list:u:2io0ubpc] [/list:u:2io0ubpc]
So far, this is what I did to reduce the client. I hope it is replicable enough. I you have any further questions feel free to ask. If you have ideas for improvement, please share!
Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image) -
0
this will help out many folks. thanks ;)
Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image) -
0
BTW: Should you ever want to visualize your Angular project dependencies, here's a sweet tool called NGD: [https://github.com/compodoc/ngd]).
Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image) -
0
@alexanderpilhar thanks, this seems cool :)
Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image) -
0
UPDATE [A minimalist ASPNETZERO Angular client #11164](https://support.aspnetzero.com/QA/Questions/11164/A-minimalist-ASPNETZERO-Angular-client)
Markdown is supportedCopy & paste or drag & drop images (max 30 MB per image)
