Angular SSR localhost: 4000 does not open

问题

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.

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.

However, it does not work in my current project.

My files like this;

// server.ts

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) => { });
// Serve static files from /browser
app.get('*.*', express.static(DIST_FOLDER, {
  maxAge: '1y'
}));

// All regular routes use the Universal engine
app.get('*', (req, res) => {
  res.render('index', { req });
});

// Start up the Node server
app.listen(PORT, () => {
  console.log(`Node Express server listening on http://localhost:${PORT}`);
});

// webpack.server.config.js

// 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'),
      {}
    )
  ]
};

// tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

// tsconfig.server.json

{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app-server",
    "baseUrl": "./"
  },
  "angularCompilerOptions": {
    "entryModule": "app/app.server.module#AppServerModule"
  }
}

// package.json

{
  "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 && npm run compile:server",
    "serve:ssr": "node dist/server",
    "build:client-and-server-bundles": "ng build --prod && 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"
  }
}

I tried mode: "production" and mode: "development" in module.exports in webpack.server.config.js. Did not happen.

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.

Thanks.

回答1:

I tried to find the package that caused the problem by removing all the 3rd party packages one by one. I didn't get a result from any of them.

I had setInterval on my homepage. I don't get a result.

I was sure that my server.ts and other configuration files were correct because they were working fine when I created a new project from scratch. That's why I didn't call the problem.

Although I deleted all the codes on my homepage, it still didn't open.

I solved my problem after 4 days. token = localStorage.getItem('token'); in my Auth.Interceptor file; I have experienced these problems because of localStorage.

import { Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';
constructor(@Inject(PLATFORM_ID) private _platformId: Object) { }


if (isPlatformBrowser(this._platformId)) {
   token = localStorage.getItem('token');
}

After doing this, I was able to access localhost: 4000. Of course, all the files in the localstorage, window, setTimeout, document, such as commands gave errors. I've solved my entire problem by taking all the lines with these commands in 'if' above.

Thanks.

来源：https://stackoverflow.com/questions/54924369/angular-ssr-localhost-4000-does-not-open