ganatan / angular-app Goto Github PK
View Code? Open in Web Editor NEWAngular 17 ,Bootstrap 5, Node.js, Express.js, CRUD, PWA, SSR, SEO, Lazy Loading, Examples Angular & React nrwl
Angular 17 ,Bootstrap 5, Node.js, Express.js, CRUD, PWA, SSR, SEO, Lazy Loading, Examples Angular & React nrwl
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.
Bjr l'operateur json fonctionne chez toi en angular12 ?
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.
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?
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"
}
}
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 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
Is TransferState and NgRx the same thing? if I'm using NgRx they don't need TransferState?
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.
Dear gentle ,
i deployed your app on heroku but i see css delayed on load
kindly find deployed URL
https://tyolk.herokuapp.com/
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 .
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.