Angular Universal trying to open app.component.html

Viewed 365

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');
// });
1 Answers

I was facing the same issue while upgrading to Angular 9. I got my issue resolved by using command node server/main.js instead of node server.js.
You can modify script in your package.json file.

Related