在 Angular-7 项目中，我想使用多个动态参数路由实现动态服务器端渲染以进行搜索和查找

如何解决在 Angular-7 项目中，我想使用多个动态参数路由实现动态服务器端渲染以进行搜索和查找

我在 server.js 中使用 ng add @nguniversal/express-engine --clientProject myproj 和 domino 来在服务器端渲染时访问文档和窗口。这将适用于静态路由组件，并将使用基于浏览器的搜索/查找我得到多个动态参数响应。

但是每当我从 CuRL 或通过浏览器直接访问动态路由“:category/:state”请求时，都没有得到任何 [连续加载]。实际上，我想要一个相同的回应，使搜索/查找设施 SEO 友好。下面我提到了我的项目代码片段。

我参考 https://www.willtaylor.blog/angular-universal-gotchas/ 进行服务器端渲染

Server.js

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


import * as domino from 'domino';
import * as  fs from 'fs';

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();


// Use the browser index.html as template for the mock window
//const distFolder = join(process.cwd(),'dist','YourProjectName','browser');
const template = fs.readFileSync(join(process.cwd(),'browser','index.html')).toString();

// Shim for the global window and document objects.
const window = domino.createWindow(template);
global['window'] = window;
Object.defineProperty(window.document.body.style,'transform',{
  value: () => {
    return {
      enumerable: true,configurable: true
    };
  },});

global['document'] = window.document;
global['CSS'] = null;
global['navigator'] = window.navigator;





// 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('*',res) => {
 // res.render('index',{ req });
  res.render(join(disT_FOLDER,'index.html'),{ req,res });
});

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

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json","version": 1,"newProjectRoot": "projects","projects": {
    "myproj": {
     ...
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser","options": {
            "outputPath": "dist/browser","index": "src/index.html","main": "src/main.ts","polyfills": "src/polyfills.ts","tsConfig": "src/tsconfig.app.json",...
            "es5browserSupport": true
          },"configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts","with": "src/environments/environment.prod.ts"
                }
              ],....
            }
          }
        },"serve": {
          "builder": "@angular-devkit/build-angular:dev-server","options": {
            "browserTarget": "myproj:build"
          },"configurations": {
            "production": {
              "browserTarget": "myproj:build:production"
            }
          }
        },"extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n","options": {
            "browserTarget": "myproj:build"
          }
        },"test": {
          "builder": "@angular-devkit/build-angular:karma","options": {
            "main": "src/test.ts","tsConfig": "src/tsconfig.spec.json","karmaConfig": "src/karma.conf.js","styles": [
              "src/styles.css"
            ],"scripts": [],"assets": [
              "src/favicon.ico","src/assets"
            ]
          }
        },"lint": {
          "builder": "@angular-devkit/build-angular:tslint","options": {
            "tsConfig": [
              "src/tsconfig.app.json","src/tsconfig.spec.json"
            ],"exclude": [
              "**/node_modules/**"
            ]
          }
        },"server": {
          "builder": "@angular-devkit/build-angular:server","options": {
            "outputPath": "dist/server","main": "src/main.server.ts","tsConfig": "src/tsconfig.server.json"
          },"with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        }
      }
    },"myproj-e2e": {
      "root": "e2e/","projectType": "application","prefix": "","architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor","options": {
            "protractorConfig": "e2e/protractor.conf.js","devServerTarget": "myproj:serve"
          },"configurations": {
            "production": {
              "devServerTarget": "myproj:serve:production"
            }
          }
        },"options": {
            "tsConfig": "e2e/tsconfig.e2e.json","exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },}

package.json

{
  "name": "myproj","version": "0.0.0","scripts": {
    "ng": "ng","start": "ng serve -o","build": "ng build --prod","test": "ng test","lint": "ng lint","e2e": "ng e2e","dev": "lite-server","compile:server": "webpack --config webpack.server.config.js --progress --colors","serve:ssr": "node dist/server","build:ssr": "npm run build:client-and-server-bundles && npm run compile:server","build:client-and-server-bundles": "ng build --prod && ng run myproj:server:production"
  },"private": true,"dependencies": {

    "@angular-devkit/build-angular": "^0.13.0","@angular/animations": "^7.2.15","@angular/cdk": "^8.1.2","@angular/common": "~7.2.0","@angular/compiler": "~7.2.0","@angular/core": "~7.2.0","@angular/forms": "^7.2.15","@angular/http": "^7.2.15","@angular/platform-browser": "~7.2.0","@angular/platform-browser-dynamic": "~7.2.0","@angular/platform-server": "~7.2.0","@angular/router": "~7.2.0",...
    
    "@ng-toolkit/universal": "^7.1.2","@nguniversal/express-engine": "0.0.0","@nguniversal/module-map-ngfactory-loader": "0.0.0","webpack-cli": "^3.1.0","zone.js": "^0.11.3"

  },"devDependencies": {
    "@angular/cli": "~7.3.9","@angular/compiler-cli": "~7.2.0","@angular/language-service": "~7.2.0","@types/jasmine": "~2.8.8","@types/jasminewd2": "~2.0.3","@types/node": "~8.9.4","codelyzer": "~4.5.0",...
    "webpack": "^4.46.0","webpack-dev-middleware": "^4.1.0","webpack-dev-server": "^3.11.2","webpack-hot-middleware": "^2.25.0"
  }
}

myproj-routing.module.ts [多个动态参数的路由]

 {
        path: 'find',component: SearchComponent,children: [
          {
            path: ':category/:state/:suburb',component: HomeComponent,pathMatch: 'full',resolve: {
              TradersList: TraderListResolve,serviceCategoryList: ServiceCategoryResolve
            },},{
            path: ':category/:state',{
            path: ':category',}
        ]
      },