1

i did setup the angular universal in asp net zero angular version. Here I'm using angular 9. Everything works fine and under dist folder browser and server is also created. But after the successful compilation below error is showing

UrlHelper.initialUrl = location.href;
                       ^

ReferenceError: location is not defined

my server.ts file -

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

// 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/abp-zero-template/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,
  })as any);

  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() {
  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 '@angular/localize/init';

import { enableProdMode } from '@angular/core';

import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

export { AppServerModule } from './app/app.server.module';
export { renderModule, renderModuleFactory } from '@angular/platform-server';

tsconfig.server.json

    {
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app-server",
    "target": "es2019",
    "types": [
      "node"
    ]
  },
  "files": [
    "main.server.ts",
    "../server.ts"
  ],
  "angularCompilerOptions": {
    "entryModule": "./app/app.server.module#AppServerModule"
  }
}

can anyone please help me regarding this issue? Thanks in advance.

Jishan
  • 169
  • 1
  • 6
  • 18
  • I think the `location` api is not available in NodeJS, just like the `window` api. Have you tried the following: `constructor( @Inject(Location) private loc: Location ) {}`? – Pieterjan Feb 02 '22 at 19:11
  • @Pieterjan I gave condition in this line `UrlHelper.initialUrl =location!=undefined?location.href:"";` now this line is not showing error. but showing document error in main.js which is generated automatically with ssr build- `var elem = document.createElement('div'); ^ ReferenceError: document is not defined` I know document, window, location is not known in server-side that's why giving error. But I didn't find any solution to globally replace it. I updated my server.ts with domino global window, document also with mock. but it's same not working – Jishan Feb 03 '22 at 08:13
  • Strange. `document` should be defined in NodeJS. But I've experienced that `if (typeof window !== 'undefined') {}` is a more certain way of checking if the window object is available – Pieterjan Feb 03 '22 at 08:55
  • the problem was some of the browser side keywords like `window, document` is not known to server when its rendering. I added the below codes in `server.ts` file but still now showing document is undefined. – Jishan Mar 01 '22 at 06:06

0 Answers0