Initialize project with server side, environment properties and an app component. Also, add submodules with branch angular-16

.gitmodules

@@ -0,0 +1,9 @@
+[submodule "src/app/openaireLibrary"]
+	path = src/app/openaireLibrary
+	url = gitea@code-repo.d4science.org:MaDgIK/openaire-library.git
+[submodule "src/assets/common-assets"]
+	path = src/assets/common-assets
+	url = gitea@code-repo.d4science.org:MaDgIK/openaire-assets.git
+[submodule "src/assets/openaire-theme"]
+	path = src/assets/openaire-theme
+	url = gitea@code-repo.d4science.org:MaDgIK/openaire-theme.git

angular.json

@@ -41,7 +41,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist/irish-monitor",
+            "outputPath": "dist/irish-monitor/browser",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": [
@@ -51,39 +51,123 @@
             "inlineStyleLanguage": "less",
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/robots.txt"
             ],
             "styles": [
-              "src/styles.less"
+              "src/styles.less",
+              "src/assets/common-assets/library-css/material.scss"
             ],
             "scripts": []
           },
           "configurations": {
-            "production": {
+            "development": {
+              "optimization": {
+                "scripts": true,
+                "styles": {
+                  "minify": true,
+                  "inlineCritical": false
+                },
+                "fonts": true
+              },
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kb",
+                  "maximumWarning": "2mb",
-                  "maximumError": "1mb"
+                  "maximumError": "5mb"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
+                  "maximumWarning": "6kb"
-                  "maximumError": "4kb"
+                }
+              ]
+            },
+            "beta": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.beta.ts"
                 }
               ],
-              "outputHashing": "all"
+              "optimization": {
+                "scripts": true,
+                "styles": {
+                  "minify": true,
+                  "inlineCritical": false
                 },
-            "development": {
+                "fonts": true
-              "buildOptimizer": false,
+              },
-              "optimization": false,
+              "outputHashing": "all",
-              "vendorChunk": true,
+              "sourceMap": false,
-              "extractLicenses": false,
+              "namedChunks": false,
-              "sourceMap": true,
+              "extractLicenses": true,
-              "namedChunks": true
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ]
+            },
+            "production": {
+              "assets": [
+                "src/assets",
+                {
+                  "input": "src/prod/",
+                  "output": "/",
+                  "glob": "*.txt"
+                }
+              ],
+              "index": {
+                "input": "src/prod/index.html",
+                "output": "index.html"
+              },
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": {
+                "scripts": true,
+                "styles": {
+                  "minify": true,
+                  "inlineCritical": false
+                },
+                "fonts": true
+              },
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ]
             }
           },
-          "defaultConfiguration": "production"
+          "defaultConfiguration": ""
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
@@ -102,6 +186,82 @@
           "options": {
             "browserTarget": "irish-monitor:build"
           }
+        },
+        "server": {
+          "builder": "@angular-devkit/build-angular:server",
+          "options": {
+            "outputPath": "dist/irish-monitor/server",
+            "main": "server.ts",
+            "tsConfig": "tsconfig.server.json",
+            "inlineStyleLanguage": "less"
+          },
+          "configurations": {
+            "development": {
+              "outputHashing": "media",
+              "sourceMap": false,
+              "optimization": true,
+              "vendorChunk": true,
+              "buildOptimizer": true
+            },
+            "beta": {
+              "outputHashing": "media",
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.beta.ts"
+                }
+              ],
+              "sourceMap": false,
+              "optimization": true,
+              "buildOptimizer": true
+            },
+            "production": {
+              "outputHashing": "media",
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "sourceMap": false,
+              "optimization": true,
+              "buildOptimizer": true
+            }
+          },
+          "defaultConfiguration": ""
+        },
+        "serve-ssr": {
+          "builder": "@nguniversal/builders:ssr-dev-server",
+          "configurations": {
+            "development": {
+              "browserTarget": "irish-monitor:build:development",
+              "serverTarget": "irish-monitor:server:development"
+            },
+            "production": {
+              "browserTarget": "irish-monitor:build:production",
+              "serverTarget": "irish-monitor:server:production"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "prerender": {
+          "builder": "@nguniversal/builders:prerender",
+          "options": {
+            "routes": [
+              "/"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "irish-monitor:build:production",
+              "serverTarget": "irish-monitor:server:production"
+            },
+            "development": {
+              "browserTarget": "irish-monitor:build:development",
+              "serverTarget": "irish-monitor:server:development"
+            }
+          },
+          "defaultConfiguration": "production"
         }
       }
     }

package.json

@@ -3,9 +3,19 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --port 5500 --disable-host-check --host 0.0.0.0",
     "build": "ng build",
-    "watch": "ng build --watch --configuration development"
+    "build-dev": "ng build --configuration=development --source-map",
+    "build-beta": "ng build --configuration=beta --source-map",
+    "build-prod": "ng build --configuration production --source-map",
+    "watch": "ng build --watch --configuration development",
+    "dev:ssr": "ng run irish-monitor:serve-ssr",
+    "serve:ssr": "node dist/irish-monitor/server/main.js",
+    "build:ssr-dev": "npm run build-dev && ng run irish-monitor:server:development",
+    "build:ssr-beta": "npm run build-beta && ng run irish-monitor:server:beta",
+    "build:ssr-prod": "npm run build-prod && ng run irish-monitor:server:production",
+    "prerender": "ng run irish-monitor:prerender",
+    "after-build-clean": "rm -rf dist/irish-monitor/browser/assets/common-assets/.git src/app/openaireLibrary/.git node_modules .angular src/assets/common-assets/.git .git"
   },
   "private": true,
   "dependencies": {
@@ -14,17 +24,29 @@
     "@angular/compiler": "^16.2.0",
     "@angular/core": "^16.2.0",
     "@angular/forms": "^16.2.0",
+    "@angular/localize": "^16.2.0",
+    "@angular/material": "^16.2.0",
     "@angular/platform-browser": "^16.2.0",
     "@angular/platform-browser-dynamic": "^16.2.0",
+    "@angular/platform-server": "^16.2.0",
     "@angular/router": "^16.2.0",
-    "rxjs": "~7.8.0",
+    "@nguniversal/express-engine": "^16.2.0",
+    "express": "^4.15.2",
+    "jquery": "^3.4.1",
+    "ng-recaptcha": "^12.0.2",
+    "ng2-ckeditor": "1.3.7",
+    "rxjs": "^6.5.1",
     "tslib": "^2.3.0",
+    "uikit": "3.16.24",
     "zone.js": "~0.13.0"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^16.2.0",
     "@angular/cli": "~16.2.0",
     "@angular/compiler-cli": "^16.2.0",
+    "@nguniversal/builders": "^16.2.0",
+    "@types/express": "^4.17.0",
+    "@types/node": "^16.11.7",
     "typescript": "~5.1.3"
   }
 }

server.ts

@@ -0,0 +1,59 @@
+import 'zone.js/node';
+
+import { APP_BASE_HREF } from '@angular/common';
+import { ngExpressEngine } from '@nguniversal/express-engine';
+import * as express from 'express';
+import { existsSync } from 'node:fs';
+import { join } from 'node:path';
+import { AppServerModule } from './src/main.server';
+
+// The Express app is exported so that it can be used by serverless Functions.
+export function app(): express.Express {
+  const server = express();
+  const distFolder = join(process.cwd(), 'dist/irish-monitor/browser');
+  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
+
+  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/main/modules/express-engine)
+  server.engine('html', ngExpressEngine({
+    bootstrap: AppServerModule
+  }));
+
+  server.set('view engine', 'html');
+  server.set('views', distFolder);
+
+  // Example Express Rest API endpoints
+  // server.get('/api/**', (req, res) => { });
+  // Serve static files from /browser
+  server.get('*.*', express.static(distFolder, {
+    maxAge: '1y'
+  }));
+
+  // All regular routes use the Universal engine
+  server.get('*', (req, res) => {
+    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
+  });
+
+  return server;
+}
+
+function run(): void {
+  const port = process.env['PORT'] || 4000;
+
+  // Start up the Node server
+  const server = app();
+  server.listen(port, () => {
+    console.log(`Node Express server listening on http://localhost:${port}`);
+  });
+}
+
+// Webpack will replace 'require' with '__webpack_require__'
+// '__non_webpack_require__' is a proxy to Node 'require'
+// The below code is to ensure that the server is run only when not requiring the bundle.
+declare const __non_webpack_require__: NodeRequire;
+const mainModule = __non_webpack_require__.main;
+const moduleFilename = mainModule && mainModule.filename || '';
+if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
+  run();
+}
+
+export * from './src/main.server';

src/app/app.component.ts

@@ -1,32 +1,44 @@
 import { Component } from '@angular/core';
+import {properties} from "../environments/environment";
+import {ActivatedRoute, Router} from "@angular/router";
 
 @Component({
   selector: 'app-root',
   template: `
-    <!--The content below is only a placeholder and can be replaced.-->
+      <div *ngIf="loading">
-    <div style="text-align:center" class="content">
+          <loading [full]="true"></loading>
-      <h1>
-        Welcome to {{title}}!
-      </h1>
-      <span style="display: block">{{ title }} app is running!</span>
-      <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
       </div>
-    <h2>Here are some links to help you start: </h2>
+      <div *ngIf="!loading">
-    <ul>
+          <div>
-      <li>
+              <div id="modal-container"></div>
-        <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
+                  <navbar *ngIf="hasHeader" portal="irish_monitor"></navbar>
-      </li>
+                  <div>
-      <li>
+                      <main>
-        <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
-      </li>
-      <li>
-        <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-      </li>
-    </ul>
                           <router-outlet></router-outlet>
+                      </main>
+                      <bottom id="bottom" [centered]="true" [properties]="properties" [showMenuItems]="true"></bottom>
+                  </div>
+                  <div *ngIf="view" class="preview uk-text-small uk-flex uk-flex-middle">
+                      <span>You are currently in a <span class="uk-text-bold">"Preview"</span> mode. <span class="uk-visible@m"><a (click)="removeView()">The current view</a> of this dashboard may differ.</span></span>
+                  </div>
+          </div>
+      </div>
   `,
   styles: []
 })
 export class AppComponent {
   title = 'irish-monitor';
+  loading: boolean = false;
+  isFrontPage: boolean = false;
+  view: boolean = false;
+  hasHeader: boolean = false;
+  properties = properties;
+
+  constructor(private route: ActivatedRoute,
+              private router: Router,) {
+  }
+
+  public removeView() {
+    this.router.navigate([], {relativeTo: this.route});
+  }
 }

src/app/app.module.ts

@@ -1,18 +1,50 @@
-import { NgModule } from '@angular/core';
+import {APP_ID, NgModule} from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import {BrowserModule} from '@angular/platform-browser';
 
-import { AppRoutingModule } from './app-routing.module';
+import {AppRoutingModule} from './app-routing.module';
-import { AppComponent } from './app.component';
+import {AppComponent} from './app.component';
+import {LoadingModule} from "./openaireLibrary/utils/loading/loading.module";
+import {NavigationBarModule} from "./openaireLibrary/sharedComponents/navigationBar.module";
+import {BottomModule} from "./openaireLibrary/sharedComponents/bottom.module";
+import {HTTP_INTERCEPTORS, HttpClientModule} from "@angular/common/http";
+import {HttpInterceptorService} from "./openaireLibrary/http-interceptor.service";
+import {ErrorInterceptorService} from "./openaireLibrary/error-interceptor.service";
+import {DEFAULT_TIMEOUT, TimeoutInterceptor} from "./openaireLibrary/timeout-interceptor.service";
+import {SharedModule} from "./openaireLibrary/shared/shared.module";
+import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
+import {ErrorModule} from "./openaireLibrary/error/error.module";
 
 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
+    SharedModule,
     BrowserModule,
+    BrowserAnimationsModule,
+    ErrorModule,
+    HttpClientModule,
+    LoadingModule,
+    NavigationBarModule,
+    BottomModule,
     AppRoutingModule
   ],
-  providers: [],
+  providers: [
+    {provide: APP_ID, useValue: 'irish-monitor'},
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: HttpInterceptorService,
+      multi: true
+    },
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: ErrorInterceptorService,
+      multi: true
+    },
+    [{provide: HTTP_INTERCEPTORS, useClass: TimeoutInterceptor, multi: true}],
+    [{provide: DEFAULT_TIMEOUT, useValue: 30000}]
+  ],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+}

src/app/app.server.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { ServerModule } from '@angular/platform-server';
+
+import { AppModule } from './app.module';
+import { AppComponent } from './app.component';
+
+@NgModule({
+  imports: [
+    AppModule,
+    ServerModule,
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppServerModule {}

src/app/openaireLibrary

@@ -0,0 +1 @@
+Subproject commit b69e19fa17a9684d51c68f34c40f632ddd86d94d

src/assets/common-assets

@@ -0,0 +1 @@
+Subproject commit 9e58421a1adf3fbeb361e21616feaea8c7f867af

src/assets/irish-monitor.less

@@ -0,0 +1,100 @@
+.irish-monitor {
+  /* Import OpenAIRE theme*/
+  @import (multiple) "~src/assets/openaire-theme/less/_import";
+  @import (multiple) "~src/assets/common-assets/less/general";
+  @import (multiple) "~src/assets/common-assets/less/user";
+  @import (multiple) "~src/assets/common-assets/less/dashboard";
+  @import (multiple) "~src/assets/common-assets/less/landing";
+
+  @monitor-dashboard-background: #F3F3F3;
+
+  /** Global */
+  @global-primary-gradient: linear-gradient(110deg, @monitor-light-color 0%, @monitor-dark-color 100%);
+
+  /** Background */
+  @background-primary-background: @monitor-color;
+  @background-primary-background-gradient: none;
+
+  /** Button */
+  @button-primary-background: @monitor-color;
+  @button-secondary-border: @monitor-color;
+  @button-secondary-color: @monitor-color;
+  @button-secondary-hover-background: @global-secondary-background;
+  @button-secondary-hover-background-gradient: none;
+  @button-secondary-active-background: @global-secondary-background;
+  @button-secondary-active-background-gradient: none;
+
+  /** Label */
+  @label-secondary-color: @monitor-color;
+  @label-secondary-border: @monitor-color;
+
+  /** List */
+  @list-primary-color: @monitor-color;
+
+  /* Navbar */
+  @inverse-navbar-background: @monitor-color;
+
+  /** Text */
+  @text-primary-color: @monitor-color;
+  @text-background-color: @monitor-color;
+  @inverse-text-primary-color: @monitor-color;
+
+  /* Slider  */
+  @dotnav-item-background: fade(@monitor-color, 50%);
+  @dotnav-item-hover-background: @monitor-color;
+  @dotnav-item-onclick-background: @monitor-color;
+  @dotnav-item-active-background: @monitor-color;
+
+  /* General */
+  @general-search-form-background: @monitor-dashboard-background;
+  @general-tab-featured-tab: @monitor-color;
+
+  /* Landing */
+  @landing-portal-color: @monitor-color;
+
+  /* Dashboard */
+  @dashboard-page-content-background: @monitor-dashboard-background;
+  @dashboard-primary-background: @monitor-color;
+  @dashboard-menu-section-sublist-border: fade(@monitor-color, 30%);
+
+  & #filters_icon .start {
+    stop-color: @monitor-light-color;
+  }
+
+  & #filters_icon .end {
+    stop-color: @monitor-dark-color;
+  }
+
+  .preview {
+    position: fixed;
+    bottom: 40px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: @global-inverse-color;
+    border: 2px solid @background-primary-background;
+    border-radius: @global-border-radius;
+    box-shadow: @global-large-box-shadow;
+    padding: 20px 25px;
+    z-index: @global-z-index;
+  }
+}
+
+#print_toggle {
+  top: 320px !important;
+}
+
+#filters_switcher_toggle {
+  top: 400px !important;
+}
+
+@media (max-width: @breakpoint-small-max) {
+  #filters_switcher_toggle {
+    top: unset !important;
+    bottom: 10vh;
+  }
+}
+
+/* Quick fix for svgs with a class that makes their opacity: 0.5*/
+svg .a {
+  opacity: 1 !important;
+}

src/assets/openaire-theme

@@ -0,0 +1 @@
+Subproject commit 2dadcf85926bc0f11fff22ed94dc197ddd8587c6

src/environments/environment.beta.ts

@@ -0,0 +1,5 @@
+import {EnvProperties} from "../app/openaireLibrary/utils/properties/env-properties";
+
+export let properties: EnvProperties = {
+  environment: "beta",
+};

src/environments/environment.prod.ts

@@ -0,0 +1,5 @@
+import {EnvProperties} from "../app/openaireLibrary/utils/properties/env-properties";
+
+export let properties: EnvProperties = {
+  environment: "production"
+};

src/environments/environment.ts

@@ -0,0 +1,10 @@
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `.angular-cli.json`.
+
+import {EnvProperties} from "../app/openaireLibrary/utils/properties/env-properties";
+
+export let properties: EnvProperties = {
+  environment: "development"
+};

src/main.server.ts

@@ -0,0 +1,2 @@
+
+export { AppServerModule } from './app/app.server.module';

src/robots.txt

@@ -0,0 +1,4 @@
+User-Agent: *
+Disallow: /cache
+Disallow: /upload
+Disallow: /

src/styles.less

@@ -1 +1,8 @@
 /* You can add global styles to this file, and also import other style files */
+/* Import OpenAIRE theme*/
+@import "~src/assets/openaire-theme/less/_import";
+@import "~src/assets/common-assets/less/general";
+@import "~src/assets/common-assets/less/user";
+@import "~src/assets/common-assets/less/dashboard";
+@import "~src/assets/common-assets/less/ckeditor";
+@import "~src/assets/irish-monitor";

tsconfig.json

@@ -1,33 +1,23 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "compileOnSave": false,
   "compilerOptions": {
     "baseUrl": "./",
+    "downlevelIteration": true,
     "outDir": "./dist/out-tsc",
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
     "declaration": false,
-    "downlevelIteration": true,
+    "module": "es2020",
-    "experimentalDecorators": true,
     "moduleResolution": "node",
+    "experimentalDecorators": true,
     "importHelpers": true,
     "target": "ES2022",
-    "module": "ES2022",
+    "typeRoots": [
-    "useDefineForClassFields": false,
+      "node_modules/@types"
+    ],
     "lib": [
-      "ES2022",
+      "es2018",
       "dom"
-    ]
+    ],
-  },
+    "useDefineForClassFields": false
-  "angularCompilerOptions": {
-    "enableI18nLegacyMessageIdFormat": false,
-    "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": true
   }
 }

tsconfig.server.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.app.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/server",
+    "types": [
+      "node"
+    ]
+  },
+  "files": [
+    "src/main.server.ts",
+    "server.ts"
+  ]
+}