Angular SSR构建在不同的路线上

问题描述

我在ssr（通用expressjs）上运行了angular 9应用程序。 该应用程序应使用特定的路径：example.com/app

我正在使用APP_BASE_HREF作为'/ app'来正确地进行所有角度布线，但是构建文件仍位于根目录下。 如果我在构建选项和服务器选项中添加“ deployUrl”：“ / app /”，则会看到构建文件的请求包括/ app-> /app/main-es2015.js，但文件本身仍在根。

该如何解决？

这是server.ts的样子：

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';
import { enableProdMode } from '@angular/core';

enableProdMode()

// 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/browser');
  const indexHtml = existsSync(join(distFolder,'index.original.html')) ? 'index.original.html' : 'index';

  server.engine('html',ngExpressEngine({
    bootstrap: AppServerModule,}));

  server.set('view engine','html');
  server.set('views',distFolder);

  // Serve static files from /browser
  server.get('*.*',express.static(distFolder,{
    maxAge: '1y'
  }));

  // All regular routes use the Universal engine
  server.get('*',(req,res) => {
    res.render(indexHtml,{ req,providers: [{ provide: APP_BASE_HREF,useValue: req.baseUrl }] });
  });

  return server;
}

function run() {
  const port = process.env.PORT || 4200;

  // Start up the Node server
  const server = app();

  var helmet = require('helmet')
  server.use(helmet());

  server.listen(port,() => {
    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 && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
  run();
}

export * from './src/main.server';

这也是angular.json文件：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json","version": 1,"newProjectRoot": "projects","projects": {
    "project1": {
      "projectType": "application","schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },"root": "","sourceRoot": "src","prefix": "app","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": "tsconfig.app.json","aot": true,"assets": [
              "src/favicon.ico","src/assets"
            ],"styles": [
              "src/styles.scss","./node_modules/bootstrap/dist/css/bootstrap.css","./node_modules/ngx-toastr/toastr.css","./node_modules/@fortawesome/fontawesome-free/css/all.css"
            ],"scripts": [
              "./node_modules/jquery/dist/jquery.js","./node_modules/bootstrap/dist/js/bootstrap.js"
            ]
          },"configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts","with": "src/environments/environment.prod.ts"
                }
              ],"optimization": true,"outputHashing": "all","sourceMap": false,"extractCss": true,"namedChunks": false,"extractLicenses": true,"vendorChunk": false,"buildOptimizer": true,"budgets": [
                {
                  "type": "initial","maximumWarning": "2mb","maximumError": "5mb"
                },{
                  "type": "anyComponentStyle","maximumWarning": "6kb","maximumError": "10kb"
                }
              ]
            },"staging": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts","with": "src/environments/environment.staging.ts"
                }
              ],"maximumError": "5mb"
                }
              ]
            }
          }
        },"serve": {
          "builder": "@angular-devkit/build-angular:dev-server","options": {
            "browserTarget": "project1:build"
          },"configurations": {
            "production": {
              
              "browserTarget": "project1:build:production"
            },"staging": {
              "browserTarget": "project1:build:staging"
            },}
        },"extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n","options": {
            "browserTarget": "project1:build"
          }
        },"test": {
          "builder": "@angular-devkit/build-angular:karma","options": {
            "main": "src/test.ts","tsConfig": "tsconfig.spec.json","karmaConfig": "karma.conf.js","styles": [
              "src/styles.scss"
            ],"scripts": []
          }
        },"lint": {
          "builder": "@angular-devkit/build-angular:tslint","options": {
            "tsConfig": [
              "tsconfig.app.json","tsconfig.spec.json","e2e/tsconfig.json"
            ],"exclude": [
              "**/node_modules/**"
            ]
          }
        },"e2e": {
          "builder": "@angular-devkit/build-angular:protractor","options": {
            "protractorConfig": "e2e/protractor.conf.js","devServerTarget": "project1:serve"
          },"configurations": {
            "production": {
              "devServerTarget": "project1:serve:production"
            },"staging": {
              "devServerTarget": "project1:serve:staging"
            }
          }
        },"server": {
          "builder": "@angular-devkit/build-angular:server","options": {
            "outputPath": "dist/server","main": "server.ts","tsConfig": "tsconfig.server.json"
          },"configurations": {
            "production": {
              "outputHashing": "media","fileReplacements": [
                {
                  "replace": "src/environments/environment.ts","optimization": true
            },"staging": {
              "outputHashing": "media","optimization": true
            }
          }
        },"serve-ssr": {
          "builder": "@nguniversal/builders:ssr-dev-server","options": {
            "browserTarget": "project1:build","serverTarget": "project1:server"
          },"configurations": {
            "production": {
              "browserTarget": "project1:build:production","serverTarget": "project1:server:production"
            },"staging": {
              "browserTarget": "project1:build:staging","serverTarget": "project1:server:staging"
            }
          }
        },"prerender": {
          "builder": "@nguniversal/builders:prerender","options": {
            "browserTarget": "project1:build:production","serverTarget": "project1:server:production","routes": [
              "/"
            ]
          },"configurations": {
            "production": {}
          }
        }
      }
    }},"defaultProject": "project1"
}

我的运行方式是：

ng build && ng run project1:server:staging && node dist/server/main.js

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）