title: Angular SSR localhost: 4000 does not open
body: <p>I have an Angular project and I want to make it seo compatible. I did this with Angular Universal, but localhost: 4000 doesn't open. When I enter localhost: 4000 / index.html, it opens and redirects to localhost: 4000. However, the page source code appears as  . So it's not happening.</p>
  
  <p>I wondered, "Did I do something wrong?" I asked. And another new Angular project created the same operations I've created on it worked without a problem.</p>
  
  <p>However, it does not work in my current project.</p>
  
  <p>My files like this;</p>
  
  <p>// server.ts</p>
  
  <pre><code>import 'zone.js/dist/zone-node';
  import {enableProdMode} from '@angular/core';
  // Express Engine
  import {ngExpressEngine} from '@nguniversal/express-engine';
  // Import module map for lazy loading
  import {provideModuleMap} from '@nguniversal/module-map-ngfactory-loader';
  
  import * as express from 'express';
  import {join} from 'path';
  
  // Faster server renders w/ Prod mode (dev mode never needed)
  enableProdMode();
  
  // Express server
  const app = express();
  
  const PORT = process.env.PORT || 4000;
  const DIST_FOLDER = join(process.cwd(), 'dist/browser');
  
  // * NOTE :: leave this as require() since this file is built Dynamically from webpack
  const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main');
  
  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
  app.engine('html', ngExpressEngine({
    bootstrap: AppServerModuleNgFactory,
    providers: [
      provideModuleMap(LAZY_MODULE_MAP)
    ]
  }));
  
  app.set('view engine', 'html');
  app.set('views', DIST_FOLDER);
  
  // Example Express Rest API endpoints
  // app.get('/api/**', (req, res) =&gt; { });
  // Serve static files from /browser
  app.get('*.*', express.static(DIST_FOLDER, {
    maxAge: '1y'
  }));
  
  // All regular routes use the Universal engine
  app.get('*', (req, res) =&gt; {
    res.render('index', { req });
  });
  
  // Start up the Node server
  app.listen(PORT, () =&gt; {
    console.log(`Node Express server listening on http://localhost:${PORT}`);
  });
  </code></pre>
  
  <p>// webpack.server.config.js</p>
  
  <pre><code>// Work around for https://github.com/angular/angular-cli/issues/7200
  
  const path = require('path');
  const webpack = require('webpack');
  
  module.exports = {
    mode: 'none',
    entry: {
      // This is our Express server for Dynamic universal
      server: './server.ts'
    },
    target: 'node',
    resolve: { extensions: ['.ts', '.js'] },
    optimization: {
      minimize: false
    },
    output: {
      // Puts the output at the root of the dist folder
      path: path.join(__dirname, 'dist'),
      filename: '[name].js'
    },
    module: {
      rules: [
        { test: /\.ts$/, loader: 'ts-loader' },
        {
          // Mark files inside `@angular/core` as using SystemJS style dynamic imports.
          // Removing this will cause deprecation warnings to appear.
          test: /(\\|\/)@angular(\\|\/)core(\\|\/).+\.js$/,
          parser: { system: true },
        },
      ]
    },
    plugins: [
      new webpack.ContextReplacementPlugin(
        // fixes WARNING Critical dependency: the request of a dependency is an expression
        /(.+)?angular(\\|\/)core(.+)?/,
        path.join(__dirname, 'src'), // location of your src
        {} // a map of your routes
      ),
      new webpack.ContextReplacementPlugin(
        // fixes WARNING Critical dependency: the request of a dependency is an expression
        /(.+)?express(\\|\/)(.+)?/,
        path.join(__dirname, 'src'),
        {}
      )
    ]
  };
  </code></pre>
  
  <p>// tsconfig.app.json</p>
  
  <pre><code>{
    "extends": "../tsconfig.json",
    "compilerOptions": {
      "outDir": "../out-tsc/app",
      "types": []
    },
    "exclude": [
      "test.ts",
      "**/*.spec.ts"
    ]
  }
  </code></pre>
  
  <p>// tsconfig.server.json</p>
  
  <pre><code>{
    "extends": "./tsconfig.app.json",
    "compilerOptions": {
      "outDir": "../out-tsc/app-server",
      "baseUrl": "./"
    },
    "angularCompilerOptions": {
      "entryModule": "app/app.server.module#AppServerModule"
    }
  }
  </code></pre>
  
  <p>// package.json</p>
  
  <pre><code>{
    "name": "my-project",
    "version": "0.0.0",
    "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e",
      "build:ssr": "npm run build:client-and-server-bundles &amp;&amp; npm run compile:server",
      "serve:ssr": "node dist/server",
      "build:client-and-server-bundles": "ng build --prod &amp;&amp; ng run my-project:server:production",
      "webpack:server": "webpack --config webpack.server.config.js --progress --colors",
      "compile:server": "webpack --config webpack.server.config.js --progress --colors"
    },
    "private": true,
    "dependencies": {
      "@agm/core": "^1.0.0-beta.5",
      "@angular/animations": "^7.2.7",
      "@angular/cdk": "^7.0.0",
      "@angular/common": "^7.2.7",
      "@angular/compiler": "^7.2.7",
      "@angular/core": "^7.2.7",
      "@angular/forms": "^7.2.7",
      "@angular/http": "^7.2.7",
      "@angular/material": "^7.0.0",
      "@angular/platform-browser": "^7.2.7",
      "@angular/platform-browser-dynamic": "^7.2.7",
      "@angular/platform-server": "^7.2.7",
      "@angular/router": "^7.2.7",
      "@ng-bootstrap/ng-bootstrap": "^3.3.1",
      "@ng-select/ng-select": "^2.10.5",
      "@nguniversal/express-engine": "^7.1.0",
      "@nguniversal/module-map-ngfactory-loader": "^7.1.0",
      "@progress/kendo-angular-treeview": "^2.5.0",
      "angular-tree-component": "^8.0.1",
      "angular2-text-mask": "^9.0.0",
      "bootstrap": "^4.1.3",
      "core-js": "^2.5.4",
      "express": "^4.15.2",
      "jquery": "^3.3.1",
      "ng2-ckeditor": "^1.2.1",
      "ng2-image-viewer": "^2.0.1",
      "ng2-pdf-viewer": "^5.2.3",
      "ngx-card": "^0.2.4",
      "ngx-owl-carousel": "^2.0.7",
      "ngx-toastr": "^9.1.0",
      "primeicons": "^1.0.0",
      "primeng": "^7.0.3",
      "rxjs": "^6.4.0",
      "ts-loader": "^5.3.3",
      "tslib": "^1.9.0",
      "webpack-cli": "^3.2.3",
      "zone.js": "^0.8.29"
    },
    "devDependencies": {
      "@angular-devkit/build-angular": "~0.13.0",
      "@angular/cli": "~7.3.3",
      "@angular/compiler-cli": "^7.2.7",
      "@angular/language-service": "^7.2.7",
      "@types/jasmine": "~2.8.6",
      "@types/jasminewd2": "~2.0.3",
      "@types/node": "~8.9.4",
      "codelyzer": "~4.2.1",
      "jasmine-core": "~2.99.1",
      "jasmine-spec-reporter": "~4.2.1",
      "karma": "~1.7.1",
      "karma-chrome-launcher": "~2.2.0",
      "karma-coverage-istanbul-reporter": "~1.4.2",
      "karma-jasmine": "~1.1.1",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "^5.4.1",
      "ts-loader": "^5.2.0",
      "ts-node": "~5.0.1",
      "tslint": "~5.9.1",
      "typescript": "~3.2.4",
      "webpack-cli": "^3.1.0"
    }
  }
  </code></pre>
  
  <p>I tried mode: "production" and mode: "development" in module.exports in webpack.server.config.js.
  Did not happen.</p>
  
  <p>What could be the problem? I'm doing the same operations in a new project is running smoothly, but it does not work on my current project.</p>
  
  <p>Thanks.</p>