help-guide page with sample pdf

angular.json

@@ -22,7 +22,10 @@
               "path": "./webpack/webpack.browser.ts",
               "mergeStrategies": {
                 "loaders": "prepend"
-              }
+              },
+              "allowedCommonJsDependencies": [
+                "@grapecity/gcpdfviewer"
+              ]
             },
             "allowedCommonJsDependencies": [
               "angular2-text-mask",
@@ -96,8 +99,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "3mb",
-                  "maximumError": "5mb"
+                  "maximumWarning": "8mb",
+                  "maximumError": "10mb"
                 },
                 {
                   "type": "anyComponentStyle",

package.json

@@ -49,6 +49,7 @@
   },
   "private": true,
   "resolutions": {
+    "@types/react": "^18.0.20",
     "minimist": "^1.2.5",
     "webdriver-manager": "^12.1.8",
     "ts-node": "10.2.1"
@@ -112,10 +113,12 @@
     "ng-mocks": "^13.1.1",
     "ng2-file-upload": "1.4.0",
     "ng2-nouislider": "^1.8.3",
+    "ng2-pdf-viewer": "^9.1.2",
     "ngx-infinite-scroll": "^10.0.1",
     "ngx-moment": "^5.0.0",
     "ngx-pagination": "5.0.0",
     "ngx-sortablejs": "^11.1.0",
+    "ngx-ui-switch": "^11.0.1",
     "nouislider": "^14.6.3",
     "pem": "1.14.4",
     "postcss-cli": "^9.1.0",
@@ -128,8 +131,7 @@
     "url-parse": "^1.5.6",
     "uuid": "^8.3.2",
     "webfontloader": "1.6.28",
-    "zone.js": "~0.11.5",
-    "ngx-ui-switch": "^11.0.1"
+    "zone.js": "~0.11.5"
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "~13.1.0",
@@ -139,7 +141,7 @@
     "@angular-eslint/eslint-plugin-template": "13.1.0",
     "@angular-eslint/schematics": "13.1.0",
     "@angular-eslint/template-parser": "13.1.0",
-    "@angular/cli": "~13.2.6",
+    "@angular/cli": "^14.2.3",
     "@angular/compiler-cli": "~13.2.6",
     "@angular/language-service": "~13.2.6",
     "@cypress/schematic": "^1.5.0",

src/app/about-page/themed-about-page.component.ts

@@ -2,9 +2,6 @@ import { Component } from '@angular/core';
 import { ThemedComponent } from '../shared/theme-support/themed.component';
 import { AboutPageComponent } from './about-page.component';
 
-/**
- * Themed wrapper for CommunityListPageComponent
- */
 @Component({
   selector: 'ds-themed-about-page',
   styleUrls: [],
@@ -22,5 +19,4 @@ export class ThemedAboutPageComponent extends ThemedComponent<AboutPageComponent
   protected importUnthemedComponent(): Promise<any> {
     return import(`./about-page.component`);
   }
-
 }

src/app/app-routing.module.ts

@@ -80,8 +80,8 @@ import { ThemedPageErrorComponent } from './page-error/themed-page-error.compone
           },
           {
             path: 'help',
-            loadChildren: () => import('./about-page/about-page.module')
-              .then((m) => m.AboutPageModule),
+            loadChildren: () => import('./help-guide/help-guide.module')
+              .then((m) => m.HelpPageModule),
             canActivate: [EndUserAgreementCurrentUserGuard]
           },
           {

src/app/help-guide/help-guide.component.html

@@ -0,0 +1,4 @@
+<div >
+    <iframe src="assets/pdf/helpGuide.pdf" type="application/pdf" width="100%" height="100%" style="overflow: auto;">
+    </iframe>
+</div>

src/app/help-guide/help-guide.component.scss

@@ -0,0 +1,3 @@
+body, iframe {
+  height:100vh;
+}

src/app/help-guide/help-guide.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'viewer',
+  styleUrls: ['help-guide.component.scss'],
+  templateUrl: './help-guide.component.html',
+})
+export class HelpPageComponent {
+}

src/app/help-guide/help-guide.module.ts

@@ -0,0 +1,28 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../shared/shared.module';
+import { HelpPageComponent } from './help-guide.component';
+import { HelpPageRoutingModule } from './help-guide.routing.module';
+import { PdfViewerModule } from 'ng2-pdf-viewer'
+
+const DECLARATIONS = [
+  HelpPageComponent,
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SharedModule,
+    HelpPageRoutingModule,
+    PdfViewerModule
+  ],
+  declarations: [
+    ...DECLARATIONS
+  ],
+  exports: [
+    ...DECLARATIONS,
+  ],
+})
+export class HelpPageModule {
+
+}

src/app/help-guide/help-guide.routing.module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { CdkTreeModule } from '@angular/cdk/tree';
+
+import { ThemedHelpPageComponent } from './themed-help-guide.component';
+import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
+
+/**
+ * RouterModule to help navigate to the page with the community list tree
+ */
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: '',
+        component: ThemedHelpPageComponent,
+        pathMatch: 'full',
+        resolve: {
+          breadcrumb: I18nBreadcrumbResolver
+        },
+        data: { title: 'help.tabTitle', breadcrumbKey: 'help' }
+      }
+    ]),
+    CdkTreeModule,
+  ],
+})
+export class HelpPageRoutingModule {
+}

src/app/help-guide/themed-help-guide.component.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { HelpPageComponent } from './help-guide.component';
+
+@Component({
+  selector: 'ds-themed-help-page',
+  styleUrls: [],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+export class ThemedHelpPageComponent extends ThemedComponent<HelpPageComponent> {
+  protected getComponentName(): string {
+    return 'HelpPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/help-guide/help-guide.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./help-guide.component`);
+  }
+}

src/app/menu.resolver.ts

@@ -121,7 +121,7 @@ export class MenuResolver implements Resolve<boolean> {
         model: {
           type: MenuItemType.LINK,
           text: `menu.section.browse_global_help`,
-          link: `/about`
+          link: `/help`
         } as LinkMenuItemModel
       }
     ];