ganatan / angular-app

Angular 17 ,Bootstrap 5, Node.js, Express.js, CRUD, PWA, SSR, SEO, Lazy Loading, Examples Angular & React nrwl

Angular 17 / Bootstrap 5 & CRUD REST API

it's a repo designed to create a Web Application with Angular 17 Frontend - Angular 17.3.5 & Angular CLI 17.3.5 UI prototype - bootstrap 5 Backend - CRUD REST API PostgreSQL See the Live demo, Test the repo with Quick start and for more information Read the step by step Tutorial or read the Getting started

Live Demo

Here is a working live demo : https://angular.ganatan.com/

Lighthouse Audit

Table of contents

• Status
• Quick start
• Front-end
• Back-end
• Author
• Documentation

Front-end : What's included

Dependencies

• Angular : 17.3.5
• Angular CLI : 17.3.5
• Angular SSR : 17.3.5
• Bootstrap : 5.3.3
• Fontawesome : 6.4.2

Features

• Routing
• Lazy Loading
• Server Side Rendering
• Progressive Web App
• Responsive Layout
• Search Engine Optimization (SEO)
• Components
• Services
• Reactive Form
• Template Driven Forms
• Search / Grid / Pagination

Quick start

# select a repo from github or gitlab

# download the example or clone the repo from github
git clone https://github.com/ganatan/angular-app.git

# download the example or clone the repo from gitlab
git clone https://gitlab.com/ganatan/angular-app.git

# change directory
cd angular-app
cd application-angular

# install the repo with npm
npm install

# start the server
npm start

in your browser go to http://localhost:4200

Front-end

Installation

• npm install (installing dependencies)
• npm outdated (verifying dependencies)

Developpement

• npm run start
• in your browser http://localhost:4200

Linter

• npm run lint

Tests

• npm run test
• npm run coverage

Compilation

• npm run build ( with SSR)

Production

• npm run serve:ssr
• in your browser http://localhost:4000

Angular & Docker

• build image

• docker build -t angular-starter:1.0.0 .

• run container

• docker run -d -p 4000:4000 angular-starter:1.0.0

• run container mode bash

• docker run -it angular-starter:1.0.0 /bin/bash

• in your browser http://localhost:4000

Back-end

Back-end : What's included

Tools

• mysql-express-batch (with Node.js)

• mysql-sql (with SQL Scripts)

• postgresql-express-batch (with Node.js)

• postgresql-express-crud (with Node.js and Express)

• postgresql-sql (with SQL Scripts)

Features

• Database Creation
• Domains Creation (only PostgreSQL)
• Tables Creation
• Importing Data
• Exporting Data
• Serving RESTful CRUD API

Database Creation with PostgreSQL

Use the SQL scripts in postgresql-sql

• create-database.sql
• create-domains.sql
• create-tables.sql
• insert-data.sql

Database Creation with MySQL

Use the SQL scripts in mysql-sql

• create-database.sql
• create-tables.sql
• insert-data.sql

Database Creation with Node.js and PostgreSQL

PostgreSQL Password

• Change settings in postgresql-express-batch/app/config
• File config/config.json
• dbUser: "postgres"
• dbPassword: "Trustno1" ! Change the Fox Mulder password by your password

# select the repo
cd application-node
cd postgresql-express-batch

# install the repo with npm
npm install

# create database and import JSON data
npm run create

# For the fun delete All data/export Files
# Export JSON data in data/export
npm run export

# Check the new files (for example movies.json) 

Database Creation with Node.js and MySQL

MySQL Password

• Change settings in mysql-express-batch/app/config
• File config/config.json
• dbUser: "root"
• dbPassword: "Trustno1" ! Change the Fox Mulder password by your password

# select the repo
cd application-node
cd mysql-express-batch

# install the repo with npm
npm install

# create database and import JSON data
npm run create

# For the fun delete All data/export Files
# Export JSON data in data/export
npm run export

# Check the new files (for example movies.json) 

Serving CRUD REST API with Node.js & Express & PostgreSQL

PostgreSQL Password

• Change settings in postgresql-express-crud/app/config
• File config/config.json
• dbUser: "postgres"
• dbPassword: "Trustno1" ! Change the Fox Mulder password by your password

# select the repo
cd application-node
cd postgresql-express-crud

# install the repo with npm
npm install

# Serve CRUD REST API : development mode with nodemon
npm run dev

# Serve CRUD REST API : local mode
npm run start

# Serve CRUD REST API : production mode
npm run prod

# Serve CRUD REST API : production mode with pm2 (process manager)
pm2 start process.config.js --env prod

Examples

• Examples Angular
• Examples Bootstrap
• Examples React
• Examples Node

Tests API & PostgreSQL

• in your browser http://localhost:5004/movies
• in your browser http://localhost:5004/shows
• in your browser http://localhost:5004/continents
• in your browser http://localhost:5004/countries
• in your browser http://localhost:5004/cities

Author

• Author : danny

Documentation

English Tutorials

• Step by Step - https://www.ganatan.com/tutorials/en

Tutoriels en français

• Etapes par étapes - https://www.ganatan.com/tutorials

angular-app's Issues

Mobile Performance

Hello,

Do you think you would be able to increase the performance of this demo for mobile usage ?

Currently lighthouse score is 63 and not 100..

the LCP seems to be the blocking point here:

Regards,

No content for crawlers

I checked the source view of the live demo page and there is no content there.

The crawlers only see what you can get from the source.

Deployed app on heroku delay loaded css

Dear gentle ,

i deployed your app on heroku but i see css delayed on load

kindly find deployed URL
https://tyolk.herokuapp.com/

I can't get the SSR project live

Hello,

I want to start by thanking you for your sharing.
I cannot publish the project after the SSR compilation process. I did not have such a problem in the Angular 8 version. I can't publish after updating to 9.

I can compile the project. My "browser" and "server" folders are created in the "dist" folder. I am loading this to the server from the plesk panel and setting it to read the server / main.js file with node.js. However, the project does not open. Timed out.

Could you help?

server.ts

import 'zone.js/dist/zone-node';

import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';

import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync } from 'fs';

const domino = require('domino'); // kb
const fs = require('fs'); // kb
const template = fs.readFileSync('dist/browser/index.html').toString(); // kb
const win = domino.createWindow(template); // kb
global['window'] = win;
global['document'] = win.document;
global["branch"] = null;
global["object"] = win.object;
global['DOMTokenList'] = win.DOMTokenList;
global['Node'] = win.Node;
global['Text'] = win.Text;
global['HTMLElement'] = win.HTMLElement;
global['navigator'] = win.navigator;

// The Express app is exported so that it can be used by serverless Functions.
export function app() {
  const server = express();
  const distFolder = join(process.cwd(), 'dist/browser');
  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
  }));

  server.set('view engine', 'html');
  server.set('views', distFolder);

  // Example Express Rest API endpoints
  // app.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() {
  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';

main.server.ts

import { enableProdMode } from '@angular/core';

import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

export { AppServerModule } from './app/app.server.module';
export {ngExpressEngine} from '@nguniversal/express-engine';

export { renderModule, renderModuleFactory } from '@angular/platform-server';

tsconfig.app.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

tsconfig.server.json

{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "./out-tsc/app-server",
    "baseUrl": ".",
    "types": [
      "node"
    ]
  },
  "angularCompilerOptions": {
    "entryModule": "./src/app/app.server.module#AppServerModule"
  },
  "files": [
    "src/main.server.ts",
    "server.ts"
  ]
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

package.json

{
  "name": "kodumunblogu",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "compile:server_bak": "webpack --config webpack.server.config.js --progress --colors",
    "build:ssr_bak": "npm run build:client-and-server-bundles && npm run compile:server",
    "serve:ssr_bak": "node dist/server",
    "build:client-and-server-bundles_bak": "ng build --prod --aot && ng run kodumunblogu:server:production --bundleDependencies all",
    "dev:ssr": "ng run kodumunblogu:serve-ssr",
    "serve:ssr": "node dist/server/main.js",
    "build:ssr": "ng build --prod && ng run kodumunblogu:server:production",
    "prerender": "ng run kodumunblogu:prerender",
    "postinstall": "ngcc"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^9.0.0",
    "@angular/cdk": "^9.0.0",
    "@angular/common": "~9.0.0",
    "@angular/compiler": "~9.0.0",
    "@angular/core": "~9.0.0",
    "@angular/forms": "~9.0.0",
    "@angular/material": "^9.0.0",
    "@angular/platform-browser": "~9.0.0",
    "@angular/platform-browser-dynamic": "~9.0.0",
    "@angular/platform-server": "^9.0.0",
    "@angular/router": "~9.0.0",
    "@fortawesome/angular-fontawesome": "^0.6.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.15",
    "@fortawesome/free-brands-svg-icons": "^5.7.2",
    "@fortawesome/free-solid-svg-icons": "^5.7.2",
    "@fullcalendar/core": "^4.3.1",
    "@nguniversal/express-engine": "^9.0.0",
    "@ngx-share/button": "^7.1.2",
    "@ngx-share/buttons": "^7.1.2",
    "@ngx-share/core": "^7.1.2",
    "bootstrap": "^4.3.1",
    "chart.js": "^2.9.3",
    "core-js": "^2.6.5",
    "express": "^4.17.1",
    "jquery": "^3.3.1",
    "primeicons": "^2.0.0",
    "primeng": "^9.0.0-rc.4",
    "quill": "^1.3.6",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "webpack-node-externals": "^1.7.2",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.1",
    "@angular/cli": "~9.0.1",
    "@angular/compiler-cli": "~9.0.0",
    "@angular/language-service": "~9.0.0",
    "@nguniversal/builders": "^9.0.0",
    "@types/express": "^4.17.0",
    "@types/jasmine": "~3.3.10",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.3.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.5",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-loader": "^4.0.0",
    "ts-node": "~8.0.3",
    "tslint": "~5.14.0",
    "typescript": "~3.7.5",
    "webpack-cli": "^3.1.0"
  }
}

SSR rendering not working for https

I am using your project as a starting template for my web app.

One thing I noticed during your source code is that the https is not serving the webpage content from server side. If I access the url as http, I can see the server side rendered content of the page in view source.

But if I try to do the same via https, I can't see the source. The content is being loaded only in client side. This also affects SEO because the title/description are all not there in https.

Do you have any suggestion on how I can rectify this issue? Would be great if you can include that solution option.

Issue - 404

Can't change the Local Json setting to use Crud

What am I missing? I commented out the local json option but it still doesn't allow me to use the database for crud.

` constructor() {

/*const api = false;
const url = './assets/params/json/';*/

const api = true;
const url = 'http://localhost:5004/'; 

this.config.api = api;
this.config.url = url;`

Your live demo file size is so small

Your demo file size is so small. I build with ssr and check with your live demo. It seem like you used some compressions or something to compress that make main style.css file from 221kb to 38kb. Can you tell me how do you do that. Thank you very much

Maybe this is a bug

page-list.component.ts
function： writeQueryParams()

line 113 : this.router.navigate(['crud/' + url], { queryParams: this.params });

//Maybe this is a bug,it will reload page . After deleting it, page worked well .

Could you add i18n with ngx-translate/core ?

I can't make it work with i18n ngx-translate/core. I am getting "common.hello" values in my project. It gets only keys of translations not the actual values.

rien a voir

Bjr l'operateur json fonctionne chez toi en angular12 ?

Specify license

This repository is truly outstanding, and it offers a lot of value. For anyone considering making use of it, having a clear license provided upfront would greatly enhance its usability. This transparency would immediately clarify if it aligns well with their needs and intentions.

TransferState and NgRx

Is TransferState and NgRx the same thing? if I'm using NgRx they don't need TransferState?

ReferenceError: window is not defined for https://angular.ganatan.com/leaflet

I had problems with leaflet module to build correctly in SSR. Apparently, you had too.

ReferenceError: window is not defined

window isn't here in SSR, but leaflet try to implements some functions directly in source.

var requestFn = window.requestAnimationFrame || getPrefixed('RequestAnimationFrame') || timeoutDefer;
var cancelFn = window.cancelAnimationFrame || getPrefixed('CancelAnimationFrame') ||
		getPrefixed('CancelRequestAnimationFrame') || function (id) { window.clearTimeout(id); }; 

I followed https://github.com/Angular-RU/angular-universal-starter/blob/master/server.ts.
They had global variable for mock every missing browser global variables.

I try to add L global from custom leaflet.js where i modify some functions

server.ts

const domino = require('domino');

const template = readFileSync(join('.', 'dist', 'index.html')).toString();

// for mock global window by domino

const win = domino.createWindow(template);

global['window'] = win;

global['L'] = L;

But i had always the same issue window isn't defined because LeafletModule import L from leaflet
import * as L from 'leaflet';

How would you proceed to clean this leaflet?