experimental: standalone About component (#3228)

app/src/app/extensions.module.ts

@@ -24,12 +24,16 @@
 
 import { NgModule } from '@angular/core';
 import { AosExtensionModule } from '@alfresco/aca-content/ms-office';
-import { AcaAboutModule } from '@alfresco/aca-content/about';
+import { AcaAboutModule, DEV_MODE_TOKEN, PACKAGE_JSON } from '@alfresco/aca-content/about';
 import { AcaFolderRulesModule } from '@alfresco/aca-folder-rules';
 import { environment } from '../environments/environment';
 import packageJson from 'package.json';
 
 @NgModule({
-  imports: [AosExtensionModule, AcaAboutModule.forRoot(environment.production, packageJson), AcaFolderRulesModule]
+  imports: [AosExtensionModule, AcaAboutModule, AcaFolderRulesModule],
+  providers: [
+    { provide: PACKAGE_JSON, useValue: packageJson },
+    { provide: DEV_MODE_TOKEN, useValue: !environment.production }
+  ]
 })
 export class AppExtensionsModule {}

projects/aca-content/about/src/about.component.ts

@@ -22,46 +22,37 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, Inject, OnInit, Optional } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { DEV_MODE_TOKEN } from './dev-mode.tokens';
-import { Observable } from 'rxjs';
+import { AppExtensionService } from '@alfresco/adf-extensions';
-import { AppExtensionService, ExtensionRef } from '@alfresco/adf-extensions';
+import { AboutModule, AppConfigService, AuthenticationService, RepositoryInfo } from '@alfresco/adf-core';
-import { AppConfigService, AuthenticationService, RepositoryInfo } from '@alfresco/adf-core';
 import { DiscoveryApiService } from '@alfresco/adf-content-services';
 import { PACKAGE_JSON } from './package-json.token';
+import { TranslateModule } from '@ngx-translate/core';
+import { PageLayoutModule } from '@alfresco/aca-shared';
+import { RouterModule } from '@angular/router';
+import { MatIconModule } from '@angular/material/icon';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
 
 @Component({
+  standalone: true,
+  imports: [CommonModule, TranslateModule, AboutModule, PageLayoutModule, RouterModule, MatIconModule, MatButtonModule],
   selector: 'app-about-page',
   templateUrl: './about.component.html',
-  styles: [
+  styleUrls: ['./about.component.scss']
-    `
-      adf-about {
-        width: 100%;
-      }
-    `
-  ]
 })
 export class AboutComponent implements OnInit {
-  pkg: any;
+  private authService = inject(AuthenticationService);
-  dev = false;
+  private appExtensions = inject(AppExtensionService);
-  extensions$: Observable<ExtensionRef[]>;
+  private discovery = inject(DiscoveryApiService);
-  repository: RepositoryInfo = null;
+  private appConfigService = inject(AppConfigService);
-  landingPage: string;
+  public packageJson? = inject(PACKAGE_JSON, { optional: true });
+  public dev = inject(DEV_MODE_TOKEN);
 
-  constructor(
+  extensions$ = this.appExtensions.references$;
-    @Inject(DEV_MODE_TOKEN) devMode,
+  repository: RepositoryInfo = null;
-    @Optional()
+  landingPage = this.appConfigService.get('landingPage', '/personal-files');
-    @Inject(PACKAGE_JSON)
-    public packageJson,
-    private authService: AuthenticationService,
-    private appExtensions: AppExtensionService,
-    private discovery: DiscoveryApiService,
-    appConfigService: AppConfigService
-  ) {
-    this.dev = !devMode;
-    this.extensions$ = this.appExtensions.references$;
-    this.landingPage = appConfigService.get('landingPage', '/personal-files');
-  }
 
   ngOnInit(): void {
     if (this.authService.isEcmLoggedIn()) {

projects/aca-content/about/src/aca-about.module.ts

@@ -22,21 +22,12 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { ModuleWithProviders, NgModule, Provider } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { AboutComponent } from './about.component';
-import { CommonModule } from '@angular/common';
-import { SharedModule, PageLayoutModule } from '@alfresco/aca-shared';
-
 import { ExtensionService, provideExtensionConfig } from '@alfresco/adf-extensions';
-import { DEV_MODE_TOKEN } from './dev-mode.tokens';
-import { PACKAGE_JSON } from './package-json.token';
-import { AboutModule } from '@alfresco/adf-core';
-import { TranslateModule } from '@ngx-translate/core';
-import { RouterModule } from '@angular/router';
 
 @NgModule({
-  imports: [CommonModule, RouterModule, TranslateModule, SharedModule, PageLayoutModule, AboutModule],
+  imports: [AboutComponent],
-  declarations: [AboutComponent],
   providers: [provideExtensionConfig(['about.plugin.json'])]
 })
 export class AcaAboutModule {
@@ -45,20 +36,4 @@ export class AcaAboutModule {
       'app.about.component': AboutComponent
     });
   }
-
-  public static forRoot(devMode: any, packageJson?: any): ModuleWithProviders<AcaAboutModule> {
-    const providers: Provider[] = [{ provide: DEV_MODE_TOKEN, useValue: devMode }];
-
-    if (packageJson) {
-      providers.push({
-        provide: PACKAGE_JSON,
-        useValue: packageJson
-      });
-    }
-
-    return {
-      ngModule: AcaAboutModule,
-      providers
-    };
-  }
 }

projects/aca-content/about/src/dev-mode.tokens.ts

@@ -24,4 +24,4 @@
 
 import { InjectionToken } from '@angular/core';
 
-export const DEV_MODE_TOKEN = new InjectionToken<any>('devMode');
+export const DEV_MODE_TOKEN = new InjectionToken<boolean>('devMode');