Deprecated the ConfigState

npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.ts

@@ -1,6 +1,6 @@
 import { ChangePassword, ProfileState } from '@abp/ng.core';
 import { getPasswordValidators, ToasterService } from '@abp/ng.theme.shared';
-import { Component, OnInit } from '@angular/core';
+import { Component, Injector, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { comparePasswords, Validation } from '@ngx-validate/core';
 import { Store } from '@ngxs/store';
@@ -32,6 +32,7 @@ export class ChangePasswordComponent
   };
 
   constructor(
+    private injector: Injector,
     private fb: FormBuilder,
     private store: Store,
     private toasterService: ToasterService,
@@ -40,7 +41,7 @@ export class ChangePasswordComponent
   ngOnInit(): void {
     this.hideCurrentPassword = !this.store.selectSnapshot(ProfileState.getProfile).hasPassword;
 
-    const passwordValidations = getPasswordValidators(this.store);
+    const passwordValidations = getPasswordValidators(this.injector);
 
     this.form = this.fb.group(
       {

npm/ng-packs/packages/account/src/lib/components/register/register.component.ts

@@ -1,6 +1,6 @@
 import { AuthService, ConfigState } from '@abp/ng.core';
 import { getPasswordValidators, ToasterService } from '@abp/ng.theme.shared';
-import { Component, OnInit } from '@angular/core';
+import { Component, Injector, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Store } from '@ngxs/store';
 import { OAuthService } from 'angular-oauth2-oidc';
@@ -26,6 +26,7 @@ export class RegisterComponent implements OnInit {
   authWrapperKey = eAccountComponents.AuthWrapper;
 
   constructor(
+    private injector: Injector,
     private fb: FormBuilder,
     private accountService: AccountService,
     private oauthService: OAuthService,
@@ -55,7 +56,7 @@ export class RegisterComponent implements OnInit {
 
     this.form = this.fb.group({
       username: ['', [required, maxLength(255)]],
-      password: ['', [required, ...getPasswordValidators(this.store)]],
+      password: ['', [required, ...getPasswordValidators(this.injector)]],
       email: ['', [required, email]],
     });
   }

npm/ng-packs/packages/account/src/lib/guards/manage-profile.guard.ts

@@ -1,13 +1,13 @@
+import { EnvironmentService } from '@abp/ng.core';
 import { Injectable } from '@angular/core';
-import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
-import { ConfigStateService } from '@abp/ng.core';
+import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from '@angular/router';
 
 @Injectable()
 export class ManageProfileGuard implements CanActivate {
-  constructor(private configState: ConfigStateService) {}
+  constructor(private environment: EnvironmentService) {}
 
   canActivate(_: ActivatedRouteSnapshot, __: RouterStateSnapshot) {
-    const env = this.configState.getEnvironment();
+    const env = this.environment.getEnvironment();
     if (env.oAuthConfig.responseType === 'code') {
       window.location.href = `${env.oAuthConfig.issuer}/Account/Manage?returnUrl=${window.location.href}`;
       return false;

npm/ng-packs/packages/core/src/lib/actions/config.actions.ts

@@ -1,10 +1,24 @@
 import { Config } from '../models/config';
 
+/**
+ * @deprecated Use ConfigStateService. To be deleted in v5.0.
+ */
 export class GetAppConfiguration {
   static readonly type = '[Config] Get App Configuration';
 }
 
+/**
+ * @deprecated Use EnvironmentService instead. To be deleted in v5.0.
+ */
 export class SetEnvironment {
   static readonly type = '[Config] Set Environment';
   constructor(public environment: Config.Environment) {}
 }
+
+/**
+ * @deprecated Use EnvironmentService instead. To be deleted in v5.0.
+ */
+export class PatchConfigState {
+  static readonly type = '[Config] Set State';
+  constructor(public state: Config.State) {}
+}

npm/ng-packs/packages/core/src/lib/actions/index.ts

@@ -1,4 +1,4 @@
-export * from './config.actions';
+export { SetEnvironment, GetAppConfiguration } from './config.actions';
 export * from './loader.actions';
 export * from './profile.actions';
 export * from './replaceable-components.actions';

npm/ng-packs/packages/core/src/lib/core.module.ts

@@ -1,10 +1,10 @@
 import { APP_BASE_HREF, CommonModule } from '@angular/common';
-import { HttpClientModule, HTTP_INTERCEPTORS, HttpClientXsrfModule } from '@angular/common/http';
+import { HttpClientModule, HttpClientXsrfModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { APP_INITIALIZER, Injector, ModuleWithProviders, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { NgxsRouterPluginModule } from '@ngxs/router-plugin';
-import { NgxsModule, NGXS_PLUGINS } from '@ngxs/store';
+import { NgxsModule } from '@ngxs/store';
 import { OAuthModule, OAuthStorage } from 'angular-oauth2-oidc';
 import { AbstractNgModelComponent } from './abstracts/ng-model.component';
 import { DynamicLayoutComponent } from './components/dynamic-layout.component';
@@ -27,17 +27,15 @@ import { LocalizationModule } from './localization.module';
 import { ABP } from './models/common';
 import { LocalizationPipe, MockLocalizationPipe } from './pipes/localization.pipe';
 import { SortPipe } from './pipes/sort.pipe';
-import { ConfigPlugin, NGXS_CONFIG_PLUGIN_OPTIONS } from './plugins/config.plugin';
 import { LocaleProvider } from './providers/locale.provider';
 import { LocalizationService } from './services/localization.service';
-import { ConfigState } from './states/config.state';
 import { ProfileState } from './states/profile.state';
 import { ReplaceableComponentsState } from './states/replaceable-components.state';
+import { oAuthStorage } from './strategies/auth-flow.strategy';
 import { coreOptionsFactory, CORE_OPTIONS } from './tokens/options.token';
 import { noop } from './utils/common-utils';
 import './utils/date-extensions';
 import { getInitialData, localeInitializer } from './utils/initial-utils';
-import { oAuthStorage } from './strategies/auth-flow.strategy';
 
 export function storageFactory(): OAuthStorage {
   return oAuthStorage;
@@ -115,7 +113,7 @@ export class BaseCoreModule {}
   imports: [
     BaseCoreModule,
     LocalizationModule,
-    NgxsModule.forFeature([ReplaceableComponentsState, ProfileState, ConfigState]),
+    NgxsModule.forFeature([ReplaceableComponentsState, ProfileState]),
     NgxsRouterPluginModule.forRoot(),
     OAuthModule.forRoot(),
     HttpClientXsrfModule.withOptions({
@@ -164,15 +162,6 @@ export class CoreModule {
       ngModule: RootCoreModule,
       providers: [
         LocaleProvider,
-        {
-          provide: NGXS_PLUGINS,
-          useClass: ConfigPlugin,
-          multi: true,
-        },
-        {
-          provide: NGXS_CONFIG_PLUGIN_OPTIONS,
-          useValue: { environment: options.environment },
-        },
         {
           provide: 'CORE_OPTIONS',
           useValue: options,

npm/ng-packs/packages/core/src/lib/handlers/oauth-configuration.handler.ts

@@ -1,29 +1,28 @@
 import { Inject, Injectable } from '@angular/core';
-import { Actions, ofActionSuccessful } from '@ngxs/store';
 import { OAuthService } from 'angular-oauth2-oidc';
 import compare from 'just-compare';
 import { filter, map } from 'rxjs/operators';
-import { SetEnvironment } from '../actions/config.actions';
 import { ABP } from '../models/common';
+import { EnvironmentService } from '../services/environment.service';
 import { CORE_OPTIONS } from '../tokens/options.token';
 
 @Injectable({
   providedIn: 'root',
 })
 export class OAuthConfigurationHandler {
   constructor(
-    private actions: Actions,
     private oAuthService: OAuthService,
+    private environmentService: EnvironmentService,
     @Inject(CORE_OPTIONS) private options: ABP.Root,
   ) {
     this.listenToSetEnvironment();
   }
 
   private listenToSetEnvironment() {
-    this.actions
-      .pipe(ofActionSuccessful(SetEnvironment))
+    this.environmentService
+      .createOnUpdateStream(state => state)
       .pipe(
-        map(({ environment }: SetEnvironment) => environment.oAuthConfig),
+        map(environment => environment.oAuthConfig),
         filter(config => !compare(config, this.options.environment.oAuthConfig)),
       )
       .subscribe(config => {

npm/ng-packs/packages/core/src/lib/models/common.ts

@@ -2,11 +2,11 @@ import { EventEmitter, Type } from '@angular/core';
 import { Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { eLayoutType } from '../enums/common';
-import { Config } from './config';
+import { Environment } from './environment';
 
 export namespace ABP {
   export interface Root {
-    environment: Partial<Config.Environment>;
+    environment: Partial<Environment>;
     registerLocaleFn: (locale: string) => Promise<any>;
     skipGetAppConfiguration?: boolean;
     sendNullsAsQueryParam?: boolean;

npm/ng-packs/packages/core/src/lib/models/config.ts

@@ -3,6 +3,9 @@ import { AuthConfig } from 'angular-oauth2-oidc';
 import { ApplicationConfiguration } from './application-configuration';
 import { ABP } from './common';
 
+/**
+ * @deprecated Use ApplicationConfiguration.Response instead. To be deleted in v5.0.
+ */
 export namespace Config {
   export type State = ApplicationConfiguration.Response & ABP.Root & { environment: Environment };
 

npm/ng-packs/packages/core/src/lib/models/environment.ts

@@ -0,0 +1,40 @@
+import { AuthConfig } from 'angular-oauth2-oidc';
+import { ABP } from './common';
+
+export interface Environment {
+  apis: Apis;
+  application: ApplicationInfo;
+  hmr?: boolean;
+  test?: boolean;
+  localization?: { defaultResourceName?: string };
+  oAuthConfig: AuthConfig;
+  production: boolean;
+  remoteEnv?: RemoteEnv;
+}
+
+export interface ApplicationInfo {
+  name: string;
+  baseUrl?: string;
+  logoUrl?: string;
+}
+
+export type ApiConfig = {
+  [key: string]: string;
+  url: string;
+} & Partial<{
+  rootNamespace: string;
+}>;
+
+export interface Apis {
+  [key: string]: ApiConfig;
+  default: ApiConfig;
+}
+
+export type customMergeFn = (localEnv: Partial<Environment>, remoteEnv: any) => Environment;
+
+export interface RemoteEnv {
+  url: string;
+  mergeStrategy: 'deepmerge' | 'overwrite' | customMergeFn;
+  method?: string;
+  headers?: ABP.Dictionary<string>;
+}

npm/ng-packs/packages/core/src/lib/models/index.ts

@@ -2,7 +2,9 @@ export * from './application-configuration';
 export * from './common';
 export * from './config';
 export * from './dtos';
+export * from './environment';
 export * from './find-tenant-result-dto';
+export * from './localization';
 export * from './profile';
 export * from './replaceable-components';
 export * from './rest';

npm/ng-packs/packages/core/src/lib/models/localization.ts

@@ -0,0 +1,6 @@
+export interface LocalizationWithDefault {
+  key: string;
+  defaultValue: string;
+}
+
+export type LocalizationParam = string | LocalizationWithDefault;

npm/ng-packs/packages/core/src/lib/pipes/localization.pipe.ts

@@ -1,26 +1,23 @@
 import { Injectable, Pipe, PipeTransform } from '@angular/core';
-import { Store } from '@ngxs/store';
 import { Config } from '../models';
-import { ConfigState } from '../states';
+import { LocalizationService } from '../services/localization.service';
 
 @Injectable()
 @Pipe({
   name: 'abpLocalization',
 })
 export class LocalizationPipe implements PipeTransform {
-  constructor(private store: Store) {}
+  constructor(private localization: LocalizationService) {}
 
   transform(
     value: string | Config.LocalizationWithDefault = '',
     ...interpolateParams: string[]
   ): string {
-    return this.store.selectSnapshot(
-      ConfigState.getLocalization(
-        value,
-        ...interpolateParams.reduce(
-          (acc, val) => (Array.isArray(val) ? [...acc, ...val] : [...acc, val]),
-          [],
-        ),
+    return this.localization.instant(
+      value,
+      ...interpolateParams.reduce(
+        (acc, val) => (Array.isArray(val) ? [...acc, ...val] : [...acc, val]),
+        [],
       ),
     );
   }

npm/ng-packs/packages/core/src/lib/services/application-configuration.service.ts

@@ -1,20 +1,19 @@
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
-import { Rest } from '../models/rest';
 import { ApplicationConfiguration } from '../models/application-configuration';
+import { Rest } from '../models/rest';
+import { EnvironmentService } from './environment.service';
 import { RestService } from './rest.service';
-import { Store } from '@ngxs/store';
-import { ConfigState } from '../states/config.state';
 
 @Injectable({
   providedIn: 'root',
 })
 export class ApplicationConfigurationService {
   get apiName(): string {
-    return this.store.selectSnapshot(ConfigState.getDeep('environment.application.name'));
+    return this.environment.getEnvironment().application?.name;
   }
 
-  constructor(private rest: RestService, private store: Store) {}
+  constructor(private rest: RestService, private environment: EnvironmentService) {}
 
   getConfiguration(): Observable<ApplicationConfiguration.Response> {
     const request: Rest.Request<null> = {