title: Location is not defined asp net zero angular universal
body: <p>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</p>
  <pre><code>UrlHelper.initialUrl = location.href;
                         ^
  
  ReferenceError: location is not defined
  </code></pre>
  <p>my <strong>server.ts</strong> file -</p>
  <pre><code>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) =&gt; { });
    // Serve static files from /browser
    server.get('*.*', express.static(distFolder, {
      maxAge: '1y'
    }));
  
    // All regular routes use the Universal engine
    server.get('*', (req, res) =&gt; {
      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, () =&gt; {
      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 &amp;&amp; mainModule.filename || '';
  if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
    run();
  }
  
  export * from './src/main.server';
  </code></pre>
  <p><strong>main.server.ts</strong></p>
  <pre><code>    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';
  </code></pre>
  <p><strong>tsconfig.server.json</strong></p>
  <pre><code>    {
    &quot;extends&quot;: &quot;./tsconfig.app.json&quot;,
    &quot;compilerOptions&quot;: {
      &quot;outDir&quot;: &quot;./out-tsc/app-server&quot;,
      &quot;target&quot;: &quot;es2019&quot;,
      &quot;types&quot;: [
        &quot;node&quot;
      ]
    },
    &quot;files&quot;: [
      &quot;main.server.ts&quot;,
      &quot;../server.ts&quot;
    ],
    &quot;angularCompilerOptions&quot;: {
      &quot;entryModule&quot;: &quot;./app/app.server.module#AppServerModule&quot;
    }
  }
  </code></pre>
  <p>can anyone please help me regarding this issue? Thanks in advance.</p>