I've recently upgraded my Angular and I've had some problems with server-side rendering. I've had some issues which I've managed to fix but I've gotten stuck on the following error:
Error: ENOENT: no such file or directory, open 'app.component.html'
I wasn't able to find somebody else facing the exact same issue, most of the problems similar to this one I came across were caused by a badly written path. I believe that there might be a problem with my configuration as I don't see app.component.hmtl appear in my compiled dist/app-admin-browsr folder, nor do I see it in the universal example project that I have downloaded.
Has anyone face this issue before?
server.ts
// generated by @ng-toolkit/serverless
import 'zone.js/node';
import 'reflect-metadata';
import {enableProdMode, ValueProvider} from '@angular/core';
import {ngExpressEngine} from '@nguniversal/express-engine';
import { APP_BASE_HREF } from '@angular/common';
import * as express from 'express';
import * as bodyParser from 'body-parser';
import * as cors from 'cors';
import * as compression from 'compression';
import {join} from 'path';
enableProdMode();
export const app = express();
const DIST_FOLDER = join(process.cwd(), 'dist');
app.use(compression());
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
const appServer = process.env.APP === 'admin' ? 'app-admin-server' : 'app-server';
const appBrowser = process.env.APP === 'admin' ? 'app-admin-browser' : 'app-browser';
/*const fs = require("fs");
const path = require("path");
const template = join(appBrowser, 'index.html');
const domino = require("domino");
const templateA = fs
.readFileSync(path.join(DIST_FOLDER, appBrowser, 'index.html'))
.toString();
const win = domino.createWindow(templateA);
global["window"] = win;
global["document"] = win.document;
global["branch"] = null;
global["object"] = win.object;
global['UIEvent'] = win.UIEvent;
global['HTMLElement'] = win.HTMLElement;
global['navigator'] = win.navigator;*/
const {ServerAppModuleNgFactory, LAZY_MODULE_MAP} =.
require('./dist/'+appServer+'/main');
// const server = require('./dist/app-server/main');
// console.log(server);
import {ServerAppModule} from './src/app-admin/app/server.app.module';
app.engine('html', (_, options, callback) => {
console.log(appBrowser);
console.log(join(DIST_FOLDER, appBrowser, 'index.html'));
const engine = ngExpressEngine({
bootstrap: ServerAppModule,
});
engine(_, options, callback);
});
app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, appBrowser));
app.get('*.*', express.static(join(DIST_FOLDER, appBrowser)));
app.get('*', (req, res) => {
res.render(join(DIST_FOLDER, appBrowser, 'index.html'), {req, res});
});
// app.get('/api.*', (req, res) => {
// res.status(404).send('data requests are not supported');
// });