Angular 根路径渲染不正确

当我尝试访问“”或“localhost:7070”时，通用应用程序应提供Angular Router定义的页面，而不是原始index.html空页面

如果我尝试直接访问所有其他路由，例如“”，即使是延迟加载的模块和深度嵌套的子路由，通用应用程序也会正确呈现所有其他路由，但当我尝试访问最简单的路由（我网站的根url）时，通用应用程序似乎无法构建由我的角路由器定义的初始页面

这是我的服务器路由模块的配置：

const routes: Routes = [
  {
    path: '',
    component: OutletComponent,
    children: [
      {
        path: '',
        component: HomeComponent
      },
      {
        path: 'contact',
        component: ContactComponent
      },
       {
        path: 'inexistent-page',
        component: InexistentPageComponent
      },
      {
        path: '**',
        redirectTo: 'inexistent-page'
      }
    ]
  }
]

@NgModule({
  declarations: [
    HomeComponent,
    ContactComponent,
    InexistentPageComponent
  ],
  imports: [
    RouterModule.forRoot(routes, {
      paramsInheritanceStrategy: 'always',
      initialNavigation: 'enabled'
    })
  ],
  exports: [
    RouterModule
  ]
})

My node express服务器的配置如下：

const http = require('http')
const express = require('express')
const app = express()
const expressStaticGzip = require('express-static-gzip')
const server = new http.Server(app)

app.use('/', expressStaticGzip(__dirname + '/dist', {
  enableBrotli: true
}))
app.use('/', express.static(__dirname + '/dist'))

require('zone.js/dist/zone-node')
require('reflect-metadata')

const ngExpressEngine = require('@nguniversal/express-engine').ngExpressEngine
const { enableProdMode } = require('@angular/core')

enableProdMode()

const {
  ServerAppModuleNgFactory,
  LAZY_MODULE_MAP
} = require('./dist-server/main.bundle')

const {
  provideModuleMap
} = require('@nguniversal/module-map-ngfactory-loader')

const provider = provideModuleMap(LAZY_MODULE_MAP)

app.engine(
  'html',
  ngExpressEngine({
    bootstrap: ServerAppModuleNgFactory,
    providers: [provider]
  })
)

app.set('view engine', 'html')
app.set('views', 'dist')

app.get('*', (req, res) => {
    res.render('index', {req, res})
})

server.listen(process.env.PORT || 7070, function () {
  console.log('listening on', server.address().port)
})

当我第一次访问“”时，我的通用应用程序应以呈现的主页响应，但它始终返回我的原始index.html文件。但如果我尝试访问“”，则会收到预呈现的联系人页面

我不明白为什么会这样。根url不应该是预呈现的最简单/琐碎的url吗

如果我的根url（谷歌和其他爬虫已知的唯一url）提供的内容是我的原始Angular app index.html，没有任何内容，谷歌和其他网络爬虫将无法为我的网站编制索引

这是我的package.json依赖项：

"dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@angular/platform-server": "^5.2.11",
    "@angular/router": "5.2.11",
    "@fortawesome/angular-fontawesome": "0.1.0-9",
    "@fortawesome/fontawesome-svg-core": "^1.2.0-11",
    "@fortawesome/free-solid-svg-icons": "^5.1.0-8",
    "@ngrx/effects": "^5.2.0",
    "@ngrx/store": "^5.2.0",
    "@ngrx/store-devtools": "^5.2.0",
    "@nguniversal/express-engine": "^5.0.0",
    "@nguniversal/module-map-ngfactory-loader": "^5.0.0",
    "@types/socket.io-client": "^1.4.32",
    "aws-sdk": "^2.250.1",
    "bcrypt": "^1.0.3",
    "body-parser": "^1.15.2",
    "compression": "^1.7.2",
    "cookie-parser": "*",
    "core-js": "^2.4.1",
    "cors": "^2.7.1",
    "express": "^4.14.0",
    "express-joi-validation": "^0.2.1",
    "express-rate-limit": "^2.11.0",
    "express-static-gzip": "^0.3.2",
    "helmet": "3.11.0",
    "heroku-ssl-redirect": "0.0.4",
    "http2": "^3.3.7",
    "image-compressor.js": "^1.1.3",
    "joi": "^13.1.2",
    "jsonwebtoken": "^7.1.9",
    "lodash": "^4.17.10",
    "mongodb": "^2.2.31",
    "mongoose": "^4.12.0",
    "morgan": "^1.7.0",
    "ngrx-store-localstorage": "^5.0.0",
    "openssl": "^1.1.0",
    "reflect-metadata": "^0.1.12",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "^1.7.2",
    "@angular/compiler-cli": "5.2.11",
    "@angular/language-service": "5.2.11",
    "@ngui/map": "^0.20.2",
    "@types/googlemaps": "^3.30.7",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "autoprefixer": "^7.2.3",
    "brotli": "^1.3.2",
    "circular-dependency-plugin": "^4.2.1",
    "codelyzer": "^4.0.1",
    "compression-webpack-plugin": "^1.1.7",
    "copy-webpack-plugin": "~4.4.1",
    "cssnano": "^3.10.0",
    "file-loader": "^1.1.5",
    "html-webpack-plugin": "^2.29.0",
    "intersection-observer": "^0.5.0",
    "istanbul-instrumenter-loader": "^3.0.0",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "less-loader": "^4.0.5",
    "nodemon": "^1.17.5",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.10",
    "postcss-url": "^7.1.2",
    "protractor": "~5.1.2",
    "raw-loader": "^0.5.1",
    "sass-loader": "^6.0.6",
    "source-map-loader": "^0.2.0",
    "style-loader": "^0.19.1",
    "stylus-loader": "^3.0.1",
    "ts-node": "~3.2.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3",
    "uglifyjs-webpack-plugin": "^1.1.8",
    "url-loader": "^0.6.2"
  },
  "engines": {
    "node": "8.9.4"
  }

这是我的angular-cli.json：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "ng-test",
    "ejected": false
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.browser.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": ["styles.scss"],
      "stylePreprocessorOptions": {
        "includePaths": [
          "./themes"
        ]
      },
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    },
    {
      "platform": "server",
      "root": "src",
      "outDir": "dist-server",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "server.main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.server.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.scss"
      ],
      "stylePreprocessorOptions": {
        "includePaths": [
          "./themes"
        ]
      },
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "component": {
    }
  }
}

---

昨晚我遇到的问题是，我在做了更改之后没有运行build:ssr

从你们所发生的一切来看，我怀疑这也是你们的问题，但尽管如此，我想我会和你们分享

---

祝你好运。

更新你的outDir和baseHref，如：

 "apps": [
        {
          "root": "src",
          "outDir": "dist/browser",                
          "baseHref": "/",
          "assets": [
            "assets",
            "favicon.ico"
          ],

          ...
        },
        {
          "platform": "server",
          "root": "src",      
          "outDir": "dist/server",      
          "baseHref": "/",
          "assets": [
            "assets",
            "favicon.ico"
          ],
          "index": "index.html",      
          "main": "main.server.ts",     

          ...
        }
      ],

还需要对server.ts进行一些更改

// These are important and needed before anything else
import 'zone.js/dist/zone-node';
import 'reflect-metadata';

import { renderModuleFactory } from '@angular/platform-server';
import { enableProdMode } from '@angular/core';

import * as express from 'express';
import { join } from 'path';
import { readFileSync } from 'fs';

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

// Our index.html we'll use as our template
const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.bundle');

const { provideModuleMap } = require('@nguniversal/module-map-ngfactory-loader');

app.engine('html', (_, options, callback) => {
  renderModuleFactory(AppServerModuleNgFactory, {
    // Our index.html
    document: template,
    url: options.req.url,
    // DI so that we can get lazy-loading to work differently (since we need it to just instantly render it)
    extraProviders: [
      provideModuleMap(LAZY_MODULE_MAP)
    ]
  }).then(html => {
    callback(null, html);
  });
});

app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));

// Server static files from /browser
app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));

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

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

---

首先，非常感谢你的回答

我的问题是此express配置：

app.use('/', expressStaticGzip(__dirname + '/dist/browser', {
  enableBrotli: true
}))
app.use('/', express.static(__dirname + '/dist/browser'))

与以下内容相冲突：

app.get('*', (req, res) => {
    res.render(join(DIST_FOLDER, 'browser', 'index.html'), {req, res})
})

因此，我已从我的应用程序中删除了“app.use（“/”）命令，并且，正如@eduPeeth所建议的，我已将以下配置添加到我的服务器：

app.get('*.*', expressStaticGzip(join(DIST_FOLDER, 'browser'), {
  enableBrotli: true
}))
app.get('*.*', express.static(join(DIST_FOLDER, 'browser')))
app.get('*', (req, res) => {
    res.render(join(DIST_FOLDER, 'browser', 'index.html'), {req, res})
})

我的.angular-cli.json文件没有问题，只是我的路径与建议的路径不同

现在SSR到处都在工作，我可以提供gziped文件

---

感谢大家！

在使用Angular 9和Angular Universal解决同一问题几天后，我终于找到了一个适合我的解决方案。试试吧

替换

  server.get('*', (req, res) => {
    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
  });

与

---

感谢您的反馈！事实上，这不是问题所在，我正在运行build:ssr，每一条路径都呈现得非常完美，只是根路径不完美，我不知道为什么。请分享您的angular.jsonI。我刚刚用我的.angular-cli.json配置更新了我的问题。谢谢！我接受这个答案，但也有必要看看我自己的答案回答，因为必须从服务器上删除“app.use（“/”，”配置。谢谢！这对angular 8.x仍然有效吗？通过上述更改，您将通过交付index.html文件而不是其呈现版本，从angular Universal SSR移动到CSR（客户端呈现）。

  //Replace PROJECT_NAME with the name or your project
  var path = require('path');
  server.get('/', function(req, res) {
      res.sendFile( path.resolve('dist/PROJECT_NAME/browser/index.html') );
  });