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

This commit is contained in:
Konstantinos Triantafyllou 2023-10-23 16:46:00 +03:00
parent 6b81e070e6
commit d49020d15c
20 changed files with 5512 additions and 915 deletions

9
.gitmodules vendored Normal file
View File

@ -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

View File

@ -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",
"maximumError": "1mb"
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
"maximumWarning": "6kb"
}
]
},
"beta": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.beta.ts"
}
],
"outputHashing": "all"
"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"
}
]
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
"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"
}
}
}

5847
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -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"
}
}

59
server.ts Normal file
View File

@ -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';

View File

@ -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 style="text-align:center" class="content">
<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>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<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>
<div *ngIf="loading">
<loading [full]="true"></loading>
</div>
<div *ngIf="!loading">
<div>
<div id="modal-container"></div>
<navbar *ngIf="hasHeader" portal="irish_monitor"></navbar>
<div>
<main>
<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});
}
}

View File

@ -1,18 +1,50 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {APP_ID, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {AppRoutingModule} from './app-routing.module';
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 {
}

View File

@ -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 {}

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

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

View File

@ -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;
}

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

View File

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

View File

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

View File

@ -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"
};

2
src/main.server.ts Normal file
View File

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

4
src/robots.txt Normal file
View File

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

View File

@ -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";

View File

@ -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,
"experimentalDecorators": true,
"module": "es2020",
"moduleResolution": "node",
"experimentalDecorators": true,
"importHelpers": true,
"target": "ES2022",
"module": "ES2022",
"useDefineForClassFields": false,
"typeRoots": [
"node_modules/@types"
],
"lib": [
"ES2022",
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
],
"useDefineForClassFields": false
}
}

14
tsconfig.server.json Normal file
View File

@ -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"
]
}