Solved!
Turns out the following line was missing in service-proxy.module.ts:
{ provide: HTTP_INTERCEPTORS, useClass: AbpHttpInterceptor, multi: true },
Seems like it didn't get merged correctly from the upgrade-branch to the development-branch. Or maybe I did it by hand and simply overlooked ...
Anyway, it's working now :)
FYI, I used source-control explorer (Visual Studio Team Services) to simply compare the difference between upgrade-branch and development-branch. This way I was able to find the missing line of code quite fast :)
After upgrading my Project (ASP.NET Core & Angular with .NET Framework 4.6.1) from version 5.0 to 5.5 I experience the very same issue: [https://github.com/aspnetzero/aspnet-zero/issues/597]) - which seems to have been resolved by upgrading the version of abp-ng2-module ([https://github.com/aspnetzero/aspnet-zero-core/commit/1bc5f34f913c8f76980367fa90e9063b3733ec95])).
I'm using abp-ng2-module 3.0.0 - it is the current version at the moment ([https://www.npmjs.com/package/abp-ng2-module])).
Note: I experience this issue in every browser I have installed (Chrome, Edge, Firefox (Current & Dev Edition), Internet Explorer, Opera, Vivaldi). Also, changing tenant does not work (no error message).
I don't quite know where to look for to solve this problem. Could anyone help, please!?
BTW: Should you ever want to visualize your Angular project dependencies, here's a sweet tool called NGD: [https://github.com/compodoc/ngd]).
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!
I encountered some other problems with my original example: the way I declared the callback function that is used for subscribing and unsubscribing just wouldn't let me access any properties of my class. The declaration that now does work looks like this:
onGetUpdate = (data: MyClass) => {
this.item = data;
}
Just to let you know ;)
Oh, how could I just do it wrong :roll: :lol: Thanks a lot, @aaron !
I'm having troubles trying to unsubscribe from some custom event. I use SignalR to trigger an event once an entity gets updated and everything is working fine so far. But when I leave the component and come back to it later, the event will be received for another (although it only gets triggered once, both on erver side as well as on client side - I already checked on that). The more times I leave and come back to the component, the more times the event will be received.
I read the documentation about subscribing and unsubscribing on [https://aspnetboilerplate.com/Pages/Documents/Javascript-API/Event-Bus]) and since unsubscribing isn't demonstrated by example, I came up with this:
private subscribe(): void {
abp.event.on(this.evGetUpdate, (data) => this.onGetUpdate(data));
}
private unsubscribe(): void {
abp.event.off(this.evGetUpdate, (data) => this.onGetUpdate(data));
}
onGetUpdate(data: any): void {
console.log("event received:");
console.log(data);
}
I think this is how it should work, but no luck. Btw: I'm calling subscribe() in ngOnInit() and unsubscribe() in ngOnDestroy() which are also executed as expected.
Please, give me some advice on how to unsubscribe from abp.event correctly!
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 :)
@ismcagdas Thanks for your assessment! Wish me luck ;)
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!