diff --git a/templates/module/angular/package.json b/templates/module/angular/package.json
index cc5072c0c7..12e0d1802b 100644
--- a/templates/module/angular/package.json
+++ b/templates/module/angular/package.json
@@ -13,10 +13,10 @@
   "private": true,
   "dependencies": {
     "@abp/ng.account": "^1.0.2",
-    "@abp/ng.theme.basic": "^1.0.2",
     "@abp/ng.identity": "^1.0.2",
-    "@abp/ng.tenant-management": "^1.0.2",
     "@abp/ng.setting-management": "^1.0.2",
+    "@abp/ng.tenant-management": "^1.0.2",
+    "@abp/ng.theme.basic": "^1.0.2",
     "@angular/animations": "~8.2.8",
     "@angular/common": "~8.2.8",
     "@angular/compiler": "~8.2.8",
@@ -37,18 +37,18 @@
     "@angular/language-service": "~8.2.8",
     "@angularclass/hmr": "^2.1.3",
     "@ngxs/hmr-plugin": "^3.5.0",
+    "@ngxs/logger-plugin": "^3.5.1",
     "@types/jasmine": "~3.3.8",
-    "@ngxs/devtools-plugin": "^3.5.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~8.9.4",
     "codelyzer": "^5.0.0",
     "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~4.1.0",
     "karma-chrome-launcher": "~2.2.0",
     "karma-coverage-istanbul-reporter": "~2.0.1",
-    "karma-jasmine-html-reporter": "^1.4.0",
     "karma-jasmine": "~2.0.1",
-    "karma": "~4.1.0",
+    "karma-jasmine-html-reporter": "^1.4.0",
     "ng-packagr": "^5.4.0",
     "ngxs-schematic": "^1.1.9",
     "protractor": "~5.4.0",
diff --git a/templates/module/angular/src/app/app.module.ts b/templates/module/angular/src/app/app.module.ts
index b670735c59..c0fef36c9a 100644
--- a/templates/module/angular/src/app/app.module.ts
+++ b/templates/module/angular/src/app/app.module.ts
@@ -1,22 +1,24 @@
+import { AccountConfigModule } from '@abp/ng.account.config';
 import { CoreModule } from '@abp/ng.core';
+import { IdentityConfigModule } from '@abp/ng.identity.config';
+import { SettingManagementConfigModule } from '@abp/ng.setting-management.config';
+import { TenantManagementConfigModule } from '@abp/ng.tenant-management.config';
 import { LAYOUTS } from '@abp/ng.theme.basic';
+import { ThemeSharedModule } from '@abp/ng.theme.shared';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
+import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
 import { NgxsModule } from '@ngxs/store';
 import { OAuthModule } from 'angular-oauth2-oidc';
 import { environment } from '../environments/environment';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { SharedModule } from './shared/shared.module';
-import { ThemeSharedModule } from '@abp/ng.theme.shared';
-import { AccountConfigModule } from '@abp/ng.account.config';
-import { IdentityConfigModule } from '@abp/ng.identity.config';
-import { TenantManagementConfigModule } from '@abp/ng.tenant-management.config';
-import { SettingManagementConfigModule } from '@abp/ng.setting-management.config';
 import { MyProjectNameConfigModule } from '../../projects/my-project-name-config/src/public-api';
 
+const LOGGERS = [NgxsLoggerPluginModule.forRoot({ disabled: false })];
+
 @NgModule({
   declarations: [AppComponent],
   imports: [
@@ -39,7 +41,7 @@ import { MyProjectNameConfigModule } from '../../projects/my-project-name-config
     AppRoutingModule,
     SharedModule,
 
-    NgxsReduxDevtoolsPluginModule.forRoot({ disabled: environment.production }),
+    ...(environment.production ? [] : LOGGERS),
   ],
   bootstrap: [AppComponent],
 })