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.
-
0
@ismcagdas Thanks for your assessment! Wish me luck ;)
-
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
-
0
good luck @alexanderpilhar ;) and pls share your experiences back here
-
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 :)
-
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.
-
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!!!!
-
0
@alexanderpilhar did you ever figure out a good approach on this? Are you able to share?
-
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!
-
0
this will help out many folks. thanks ;)
-
0
BTW: Should you ever want to visualize your Angular project dependencies, here's a sweet tool called NGD: [https://github.com/compodoc/ngd]).
-
0
@alexanderpilhar thanks, this seems cool :)
-
0
UPDATE [A minimalist ASPNETZERO Angular client #11164](https://support.aspnetzero.com/QA/Questions/11164/A-minimalist-ASPNETZERO-Angular-client)
