alexanderpilhar created 2 years ago

Minimalist ASPNETZERO Angular client

This project was generated with Angular CLI version 14.0.4.

This project is a minimalist ASPNETZERO Angular client. It implements the very minimal requirements to make use of the ASPNETZERO Core Services (ASPNETZERO 11.2.1).

Features

Access to ASPNETZERO Core Service (public/non-authorized API only)
NgxSpinner (package ngx-spinner)
Localization
SignalR (public/non-authorized endpoint only)

Access to ASPNETZERO Core Services

This documentation shows how to create a minimalist ASPNETZERO Angular client that can consume ASPNETZERO Core Services (public/non-authorized API only).

Add package 'nswag'

Add package:

npm install --save-dev nswag

Copy ./nswag/* from original ASPNETZERO Angular client.

In ./nswag/service.config.nswag update typeScriptVersion and rxJsVersion according to ./project.json.

Go to ./nswag and run ./resfresh.bat (ASPNETZERO Core Services must be up and running).

This creates ./src/shared/service-proxies/service-proxies.ts.

Copy ./src/shared/service-proxies/service-proxy.module.ts from original ASPNETZERO Angular client.
Remove everything irrelevant:

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { AbpHttpInterceptor } from 'abp-ng2-module';
import * as ApiServiceProxies from './service-proxies';

@NgModule({
    providers: [
        
        { provide: HTTP_INTERCEPTORS, useClass: AbpHttpInterceptor, multi: true },

        ApiServiceProxies.MyServiceProxy,
    ],
})
export class ServiceProxyModule {}

As we can see ServiceProxyModule requires package abp-ng2-module.

Add package 'abp-ng2-module'

Add packages:

npm install --save luxon
npm install --save-dev @types/luxon
npm install --save --legacy-peer-deps abp-web-resources
npm install --save --legacy-peer-deps abp-ng2-module

Adding @types to ./tsconfig.*.json:
see: angular.io / guide / typescript-configuration / installable-typings-files

In ./tsconfig.app.json add "luxon" to compilerOptions.types:

"compilerOptions": {
    // ...,
    "types": [
        "luxon"
    ]
}

In ./tsconfig.spec.json add "luxon" to compilerOptions.types:

"compilerOptions": {
    // ...,
    "types": [
        // ...,
        "luxon"
    ]
}

Adding "skipLibCheck": true to ./tsconfig.compilerOptions:
This is necessary to prevent build errors caused by abp-ng2-module not being able to find references to abp-web-resources.

{
    "compilerOptions": {
        // ...,
        "skipLibCheck": true
    }
}

Add ./src/typings.d.ts with the following content:
see: typescriptlang.org / docs / handbook / declaration-files / publishing / red-flags

///<reference path="../node_modules/abp-web-resources/Abp/Framework/scripts/abp.d.ts"/>

Adding abp-web-resources to ./src/assets/:
Copy ./src/assets/abp-web-resources/abp.js from original ASPNETZERO Angular client.

Adding "src/assets/abp-web-resources/abp.js" to ./angular.json to build.options and test.options:

"scripts": [
    "src/assets/abp-web-resources/abp.js"
]

Additional Resources and AppModule

Copy the following files from original ASPNETZERO Angular client:

./src/app-pre-bootstrap.ts
./src/assets/appconfig.json
./src/assets/appconfig.production.json
./src/shared/app-consts.ts (original name: AppConsts.ts)
./src/shared/helpers/xml-http-request-helper.ts (original name: XmlHttpRequestHelper.ts)

The content of ./src/app-pre-bootstrap.ts is the following:

import { environment } from './environments/environment';
import { AppConsts } from './shared/app-consts';
import { XmlHttpRequestHelper } from './shared/helpers/xml-http-request-helper';

export class AppPreBootstrap {

    static run(appRootUrl: string, callback: () => void, resolve: any, reject: any): void {

        AppPreBootstrap.getApplicationConfig(appRootUrl, () => {

            callback();
        });
    }
    
    private static getApplicationConfig(appRootUrl: string, callback: () => void) {

        let type = 'GET';
        let url = appRootUrl + 'assets/' + environment.appConfig;
        let customHeaders = [{
            name: 'Abp.TenantId',
            value: abp.multiTenancy.getTenantIdCookie() + ''
        }];

        XmlHttpRequestHelper.ajax(type, url, customHeaders, null, (result: any) => {

            AppConsts.localeMappings = result.localeMappings;

            AppConsts.appBaseUrlFormat = result.appBaseUrl;
            AppConsts.remoteServiceBaseUrlFormat = result.remoteServiceBaseUrl;

            AppConsts.appBaseUrl = result.appBaseUrl.replace(AppConsts.tenancyNamePlaceHolderInUrl + '.', '');
            AppConsts.remoteServiceBaseUrl = result.remoteServiceBaseUrl.replace(AppConsts.tenancyNamePlaceHolderInUrl + '.', '');

            callback();
        });
    }
}

Modify the following files:

./src/environments/environment.prod.ts

export const environment = {
  production: true,
  appConfig: 'appconfig.production.json'
};

./src/environments/environment.ts

export const environment = {
  production: false,
  appConfig: 'appconfig.json'
};

Modify ./src/app/app.module.ts:

import { PlatformLocation } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppPreBootstrap } from 'src/app-pre-bootstrap';
import { AppConsts } from 'src/shared/app-consts';
import { API_BASE_URL } from 'src/shared/service-proxies/service-proxies';
import { ServiceProxyModule } from 'src/shared/service-proxies/service-proxy.module';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

export function appInitializerFactory(platformLocation: PlatformLocation) {

  return () => {

    return new Promise<boolean>((resolve, reject) => {

      AppConsts.appBaseHref = getBaseHref(platformLocation);
      let appBaseUrl = `${getDocumentOrigin()}${AppConsts.appBaseHref}`;

      AppPreBootstrap.run(
        appBaseUrl,
        () => { resolve(true); },
        resolve,
        reject
      );

    });

  };

}

function getDocumentOrigin() {

  const docloc = document.location;

  return docloc.origin ?? `${docloc.protocol}//${docloc.hostname}${docloc.port ? ':' + docloc.port : ''}`
}

export function getRemoteServiceBaseUrl(): string {

  return AppConsts.remoteServiceBaseUrl;
}

export function getBaseHref(platformLocation: PlatformLocation) {

  return platformLocation.getBaseHrefFromDOM() ?? '/';
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ServiceProxyModule,
    HttpClientModule,
  ],
  providers: [
    { provide: API_BASE_URL, useFactory: getRemoteServiceBaseUrl },
    {
      provide: APP_INITIALIZER,
      useFactory: appInitializerFactory,
      deps: [PlatformLocation],
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

0

alexanderpilhar created 2 years ago

NgxSpinner

This documentation shows how to make use of package ngx-spinner.

Add package:

npm install --save --legacy-peer-deps ngx-spinner

Adapt @NgModule decorator in ./src/app/app.module.ts as follows:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    ServiceProxyModule,
    HttpClientModule,
    NgxSpinnerModule
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  providers: [
    { provide: API_BASE_URL, useFactory: getRemoteServiceBaseUrl },
    {
      provide: APP_INITIALIZER,
      useFactory: appInitializerFactory,
      deps: [Injector, PlatformLocation],
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Adapt appInitializerFactory() in ./src/app/app.module.ts as follows:

export function appInitializerFactory(injector: Injector, platformLocation: PlatformLocation) {

  return () => {

    const spinnerService = injector.get(NgxSpinnerService);

    spinnerService.show();

    return new Promise<boolean>((resolve, reject) => {

      AppConsts.appBaseHref = getBaseHref(platformLocation);
      let appBaseUrl = `${getDocumentOrigin()}${AppConsts.appBaseHref}`;

      AppPreBootstrap.run(
        appBaseUrl,
        () => {
          spinnerService.hide();
          resolve(true);
        },
        resolve,
        reject
      );

    });

  };

}

Add stylings to ./angular.json:
Note: Which css file to import depends on the type of animation you want to use.

"styles": [
  "node_modules/ngx-spinner/animations/ball-clip-rotate.css"
],

DONE

That's it! Now we can make use of NgxSpinner in our minimalist ASPNETZERO Angular client!

0

alexanderpilhar created 2 years ago

Localization

This documentation shows how to make use of ASPNETZERO's localization capabilities.

Add packages:

npm install --save --legacy-peer-deps lodash-es
npm install --save-dev --legacy-peer-deps @types/lodash-es

Edit ./tsconfig.json to contain the following compilerOptions:

    "strict": false,
    "paths": {
      "@shared/*": ["./src/shared/*"]
    }

Copy ./src/shared/services/locale-mappings.services.ts from original ASPNETZERO Angular client (original location is ./src/shared/).

Copy ./src/shared/pipes/localize.pipe.ts from original ASPNETZERO Angular client (original location is ./src/shared/common/pipes/).

Add ./src/shared/pipes/pipes.module.ts with the following content:

import { NgModule } from '@angular/core';
import { LocalizePipe } from "./localize.pipe";

@NgModule({
    declarations: [
        LocalizePipe,
    ],
    exports: [
        LocalizePipe,
    ]
})
export class PipesModule {}

AbpModule

Add the following functions to ./src/app/app.module.ts:

export function convertAbpLocaleToAngularLocale(locale: string): string {

  return new LocaleMappingService().map('angular', locale);
}

export function getCurrentLanguage(): string {

  return convertAbpLocaleToAngularLocale(abp.localization.currentLanguage.name);
}

function registerLocales(
  resolve: (value?: boolean | Promise<boolean>) => void,
  reject: any,
  spinnerService: NgxSpinnerService
) {

  if (abp.localization.currentLanguage.name && abp.localization.currentLanguage.name !== 'en-US') {

    let angularLocale = convertAbpLocaleToAngularLocale(abp.localization.currentLanguage.name);

    import(`/node_modules/@angular/common/locales/${angularLocale}.mjs`).then((module) => {

      registerLocaleData(module.default);

      spinnerService.hide();
      resolve(true);

    }, reject);
  }
  else {

    spinnerService.hide();
    resolve(true);
  }
}

Adapt appInitializerFactory() in ./src/app/app.module.ts as follows:

export function appInitializerFactory(injector: Injector, platformLocation: PlatformLocation) {

  return () => {

    const spinnerService = injector.get(NgxSpinnerService);

    spinnerService.show();

    return new Promise<boolean>((resolve, reject) => {

      AppConsts.appBaseHref = getBaseHref(platformLocation);
      let appBaseUrl = `${getDocumentOrigin()}${AppConsts.appBaseHref}`;

      AppPreBootstrap.run(
        appBaseUrl,
        () => {
          registerLocales(resolve, reject, spinnerService);
          resolve(true);
        },
        resolve,
        reject
      );

    });

  };

}

Adapt @NgModule decorator in ./src/app/app.module.ts as follows:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    ServiceProxyModule,
    HttpClientModule,
    NgxSpinnerModule,
    PipesModule,
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  providers: [
    { provide: API_BASE_URL, useFactory: getRemoteServiceBaseUrl },
    {
      provide: APP_INITIALIZER,
      useFactory: appInitializerFactory,
      deps: [Injector, PlatformLocation],
      multi: true
    },
    {
      provide: LOCALE_ID,
      useFactory: getCurrentLanguage
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Adapt ./src/app-pre-bootstrap.ts as follows:

import { environment } from './environments/environment';
import { AppConsts } from './shared/app-consts';
import { XmlHttpRequestHelper } from './shared/helpers/xml-http-request-helper';
import { merge as _merge } from 'lodash-es';
import { LocaleMappingService } from '@shared/services/locale-mapping.service';
import { DateTime, Settings } from 'luxon';

export class AppPreBootstrap {

    static run(appRootUrl: string, callback: () => void, resolve: any, reject: any): void {

        AppPreBootstrap.getApplicationConfig(appRootUrl, () => {

            AppPreBootstrap.getUserConfiguration(callback);
        });
    }
    
    private static getApplicationConfig(appRootUrl: string, callback: () => void) {

        let type = 'GET';
        let url = appRootUrl + 'assets/' + environment.appConfig;
        let customHeaders = [{
            name: 'Abp.TenantId',
            value: abp.multiTenancy.getTenantIdCookie() + ''
        }];

        XmlHttpRequestHelper.ajax(type, url, customHeaders, null, (result: any) => {

            AppConsts.localeMappings = result.localeMappings;

            AppConsts.appBaseUrlFormat = result.appBaseUrl;
            AppConsts.remoteServiceBaseUrlFormat = result.remoteServiceBaseUrl;

            AppConsts.appBaseUrl = result.appBaseUrl.replace(AppConsts.tenancyNamePlaceHolderInUrl + '.', '');
            AppConsts.remoteServiceBaseUrl = result.remoteServiceBaseUrl.replace(AppConsts.tenancyNamePlaceHolderInUrl + '.', '');

            callback();
        });
    }
    
    private static getCurrentClockProvider(currentProviderName: string): abp.timing.IClockProvider {

        if (currentProviderName === 'unspecifiedClockProvider') {
            return abp.timing.unspecifiedClockProvider;
        }

        if (currentProviderName === 'utcClockProvider') {
            return abp.timing.utcClockProvider;
        }

        return abp.timing.localClockProvider;
    }

    private static getRequestHeadersWithDefaultValues() {

        const cookieLangValue = abp.utils.getCookieValue('Abp.Localization.CultureName');

        let requestHeaders = {
            '.AspNetCore.Culture': 'c=' + cookieLangValue + '|uic=' + cookieLangValue,
            [abp.multiTenancy.tenantIdCookieName]: abp.multiTenancy.getTenantIdCookie(),
        };

        if (!cookieLangValue) {
            delete requestHeaders['.AspNetCore.Culture'];
        }

        return requestHeaders;
    }

    private static getUserConfiguration(callback: () => void): any {

        const token = abp.auth.getToken();

        let requestHeaders = AppPreBootstrap.getRequestHeadersWithDefaultValues();

        if (token) {
            requestHeaders['Authorization'] = 'Bearer ' + token;
        }

        return XmlHttpRequestHelper.ajax(
            'GET',
            AppConsts.remoteServiceBaseUrl + '/AbpUserConfiguration/GetAll',
            requestHeaders,
            null,
            (response) => {
                
                let result = response.result;

                _merge(abp, result);

                abp.clock.provider = this.getCurrentClockProvider(result.clock.provider);

                AppPreBootstrap.configureLuxon();

                abp.event.trigger('abp.dynamicScriptsInitialized');

                AppConsts.recaptchaSiteKey = abp.setting.get('Recaptcha.SiteKey');
                AppConsts.subscriptionExpireNootifyDayCount = parseInt(
                    abp.setting.get('App.TenantManagement.SubscriptionExpireNotifyDayCount')
                );

                callback();
            }
        );
    }

    private static configureLuxon() {

        let luxonLocale = new LocaleMappingService().map('luxon', abp.localization.currentLanguage.name);

        DateTime.local().setLocale(luxonLocale);
        DateTime.utc().setLocale(luxonLocale);
        Settings.defaultLocale = luxonLocale;

        if (abp.clock.provider.supportsMultipleTimezone) {
            Settings.defaultZone = abp.timing.timeZoneInfo.iana.timeZoneId;
        }

        Date.prototype.toISOString = function () {
            return DateTime.fromJSDate(this)
                .setLocale('en')
                .setZone(abp.timing.timeZoneInfo.iana.timeZoneId)
                .toString();
        };

        Date.prototype.toString = function () {
            return DateTime.fromJSDate(this)
                .setLocale('en')
                .setZone(abp.timing.timeZoneInfo.iana.timeZoneId)
                .toString();
        };

        DateTime.prototype.toString = function () {
            let date = this.setLocale('en').setZone(abp.timing.timeZoneInfo.iana.timeZoneId) as DateTime;
            return date.toISO();
        };
    }
}

DONE

That's it! Now we can make use of ASPNETZERO's localization capabilities in our minimalist ASPNETZERO Angular client!

0

alexanderpilhar created 2 years ago

SignalR

This documentation shows how to make use of ASPNETZERO's SignalR capabilities (public/non-authorized endpoint only).

Add package:

npm install --save --legacy-peer-deps @microsoft/signalr

Add assets and scripts to ./angular.json:

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "abp.signalr-client.js",
    "input": "node_modules/abp-web-resources/Abp/Framework/scripts/libs",
    "output": "/assets/abp"
  }
],
"scripts": [
  "src/assets/abp-web-resources/abp.js",
  "node_modules/@microsoft/signalr/dist/browser/signalr.min.js"
]

Adapt ./src/typings.d.ts as follows:

///<reference path="../node_modules/abp-web-resources/Abp/Framework/scripts/abp.d.ts"/>
///<reference path="../node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.signalr.d.ts"/>

Copy ./src/shared/helpers/signalr-helper.ts from original ASPNETZERO Angular client (original name is SignalRHelper.ts).
Adapt the file as follows:

import { AppConsts } from '@shared/app-consts';

export class SignalRHelper {

    static initSignalR(callback: () => void): void {

        abp.signalr = {
            autoConnect: false,
            connect: undefined,
            hubs: undefined,
            qs: undefined,
            remoteServiceBaseUrl: AppConsts.remoteServiceBaseUrl,
            startConnection: undefined,
            url: '/signalr-public',
        };

        let script = document.createElement('script');
        script.src = `${AppConsts.appBaseUrl}/assets/abp/abp.signalr-client.js`;
        script.onload = () => {
            callback();
        };

        document.head.appendChild(script);
    }
}

DONE

That's it! Now we can make use of ASPNETZERO's SignalR capabilities in our minimalist ASPNETZERO Angular client!

0

alexanderpilhar created 2 years ago

That's it for now ; )

0

ismcagdas created 2 years ago

Support Team

Hi @alexanderpilhar

Thank you very much for sharing this :), it is really appriciated. If you have time in the future and if you can create a single markdown file with the content above, we can also publish it on https://blog.aspnetzero.com/

A minimalist ASPNETZERO Angular client #11164

6 Answer(s)

Minimalist ASPNETZERO Angular client

Features

Access to ASPNETZERO Core Services

Add package 'nswag'

Add package 'abp-ng2-module'

Additional Resources and AppModule

NgxSpinner

DONE

Localization

AbpModule

DONE

SignalR

DONE