- Issue: Angular Universal (SSR) does not work
- Tech: Angular version 14, Angular CLI, Angular Universal 14
I have created a .net core 6 + angular 14 project
I don't know how to solve this for running angular universal.
I want to Apply Angular Universal In my latest Angular 14 Project, the project previously worked in Angular 9 and after Upgrading to Angular 14 now I want to Apply angular Universal to my project.
same code run from two different places occurred different error
- Fist Error :-This is the Screenshot of the local machine terminal Error
- Second Error:- This is the Screenshot of the terminal Error, It's weird. This Screenshot from the server terminal
This is the package.json file code
{
"name": "ezschoolangularapp",
"version": "0.0.0",
"scripts": {
"ng": "node --max-old-space-size=8192 ./node_modules/.bin/ng",
"nx": "node --max-old-space-size=8192 ./node_modules/.bin/nx",
"start:serve": "npm run nx -- run zeta-frontend:serve",
"prestart": "node aspnetcore-https",
"start": "run-script-os",
"start:windows": "ng serve --port 44457 --ssl --ssl-cert %APPDATA%\\ASP.NET\\https\\%npm_package_name%.pem --ssl-key %APPDATA%\\ASP.NET\\https\\%npm_package_name%.key",
"start:default": "ng serve --port 44457 --ssl --ssl-cert $HOME/.aspnet/https/${npm_package_name}.pem --ssl-key $HOME/.aspnet/https/${npm_package_name}.key",
"build": "ng build --prod --aot --build-optimizer",
"build:ssr": "ng build && ng run EzSchoolAngularApp:server",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"dev:ssr": "ng run EzSchoolAngularApp:serve-ssr",
"serve:ssr": "node dist-server/main.js",
"prerender": "ng run EzSchoolAngularApp:prerender"
},
"private": true,
"dependencies": {
"@akveo/ng2-completer": "^9.0.1",
"@angular/animations": "^14.3.0",
"@angular/cdk": "^13.0.0",
"@angular/common": "^14.3.0",
"@angular/compiler": "^14.3.0",
"@angular/core": "^14.3.0",
"@angular/forms": "^14.3.0",
"@angular/localize": "^14.3.0",
"@angular/material": "^13.0.0",
"@angular/platform-browser": "^14.3.0",
"@angular/platform-browser-dynamic": "^14.3.0",
"@angular/platform-server": "^14.3.0",
"@angular/router": "^14.3.0",
"@fortawesome/angular-fontawesome": "^0.11.1",
"@fortawesome/fontawesome-svg-core": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^6.4.0",
"@fullcalendar/angular": "^6.1.8",
"@fullcalendar/bootstrap": "^6.1.8",
"@fullcalendar/core": "^6.1.8",
"@fullcalendar/daygrid": "^6.1.8",
"@fullcalendar/interaction": "^6.1.8",
"@fullcalendar/list": "^6.1.8",
"@fullcalendar/timegrid": "^6.1.8",
"@ng-bootstrap/ng-bootstrap": "^13.1.1",
"@nguniversal/express-engine": "^14.2.3",
"@ngx-loading-bar/core": "^4.2.0",
"@ngx-loading-bar/router": "^4.2.0",
"@types/braintree-web": "^3.62.2",
"angular-dual-listbox": "^5.0.1",
"angular-resize-event": "^3.2.0",
"angular-sweetalert-service": "^2.0.2",
"animate-sass": "^0.8.2",
"bootstrap": "^4.3.1",
"braintree-web": "^3.64.2",
"card-validator": "^8.1.0",
"chart.js": "^2.8.0",
"core-js": "^2.6.10",
"express": "^4.15.2",
"file-saver": "^2.0.5",
"font-awesome": "^4.7.0",
"fullcalendar": "^5.3.2",
"fullcalendar-scheduler": "^5.3.2",
"idle-session-timeout": "^1.0.1",
"jquery": "^3.6.0",
"jwt-decode": "^3.1.2",
"lodash": "^4.17.20",
"moment": "^2.29.4",
"ng-recaptcha": "^10.0.0",
"ng2-charts": "^2.2.2",
"ng2-completer": "^9.0.1",
"ngx-bootstrap": "^5.6.1",
"ngx-cookie-service": "^14.0.1",
"ngx-device-detector": "^4.0.1",
"ngx-fullcalendar": "^5.0.0-alpha.1",
"ngx-material-timepicker": "^5.5.3",
"ngx-owl-carousel": "^2.0.7",
"ngx-perfect-scrollbar": "^8.0.0",
"ngx-plaid-link": "^14.0.0",
"ngx-quill": "^16.2.1",
"ngx-spinner": "^14.0.0",
"oidc-client": "^1.11.5",
"pe7-icon": "^1.0.4",
"popper.js": "^1.16.0",
"protractor": "^7.0.0",
"quill": "^1.3.7",
"redux": "^4.0.0",
"redux-devtools-extension": "^2.13.8",
"run-script-os": "^1.1.6",
"rxjs": "~7.5.5",
"rxjs-compat": "^6.6.7",
"source-map-resolve": "^0.6.0",
"sweetalert2": "^9.17.1",
"tslib": "^2.4.0",
"xlsx": "^0.17.1",
"zone.js": "~0.11.6"
},
"devDependencies": {
"@angular-devkit/build-angular": "^14.2.11",
"@angular/cli": "^14.2.11",
"@angular/compiler-cli": "^14.3.0",
"@angular/language-service": "^14.3.0",
"@nguniversal/builders": "^14.2.3",
"@types/express": "^4.17.0",
"@types/jasmine": "~4.0.3",
"@types/jasminewd2": "~2.0.10",
"@types/node": "^18.0.0",
"@types/quill": "^2.0.10",
"codelyzer": "^6.0.2",
"jasmine-core": "~4.2.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.1.1",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "^2.0.0",
"ts-node": "~7.0.0",
"typescript": "~4.7.4"
},
"overrides": {
"autoprefixer": "10.4.5"
}
}
This is server.ts file code
import 'zone.js/node';
import { APP_BASE_HREF } from '@angular/common';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { AppServerModule } from './src/main.server';
import { existsSync, readFileSync } from 'fs';
import { createWindow } from 'domino';
// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
const scripts = readFileSync('dist/index.html').toString();
const window: any = createWindow(scripts);
(global as any).window = window;
(global as any).document = window.document;
(global as any).Event = window.Event;
(global as any).KeyboardEvent = window.KeyboardEvent;
const server = express();
const distFolder = join(process.cwd(), 'dist');
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';
I want to Apply Angular Universal In my latest Angular 14 Project, the project previously worked in Angular 9 and after Upgrading to Angular 14 now I want to Apply angular Universal to my project
