ganatan/angular-app

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

angular-app's Issues

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 ?

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.

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

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

TransferState and NgRx

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

Issue - 404

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 .

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.

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/

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;`

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,

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.

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?