角万向误差:找不到模块'XXXXXXX/server/main.js‘

Question

我是个很新的有角度的宇宙。我有一个正常运行的项目。现在，我想使用服务器端呈现。我有以下设置：

• app.server.module.ts

    import { NgModule } from '@angular/core';
    import { ServerModule } from '@angular/platform-server';
    import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
    
    import { AppModule } from './app.module';
    import { AppComponent } from './app.component';
    
    @NgModule({
      imports: [
        AppModule,
        ServerModule,
        ModuleMapLoaderModule
      ],
      bootstrap: [AppComponent],
    })
    export class AppServerModule {}

• main.server.ts

    import { enableProdMode } from '@angular/core';
    
    import { environment } from './environments/environment';
    
    if (environment.prod) {
      enableProdMode();
    }
    
    export { AppServerModule } from './app/app.server.module';
    export { renderModule, renderModuleFactory } from '@angular/platform-server';

• server.ts

/***************************************************************************************************
 * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
 */
import '@angular/localize/init';
import 'zone.js/node';

// Refrence Error Event Not Found Solution
global['Event'] = null;

// Refrence Error Window Not found  solution
const domino = require('domino');
const fs = require('fs');
const path = require('path');
const template = fs.readFileSync(path.join(__dirname, '../', '', 'browser/index.html')).toString();
const win = domino.createWindow(template);
global['window'] = win;
global['document'] = win.document;
global['navigator'] = win.navigator;

// Refrence Error localStorage Not found  solution
import 'localstorage-polyfill'
global['localStorage'] = localStorage;

const cors = require('cors');

import { enableProdMode } from '@angular/core';

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 { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';

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

// The Express app is exported so that it can be used by serverless Functions.
export function app() {
  const server = express();
  server.use(cors());
  const distFolder = join(process.cwd(), 'dist/multikart/browser');
  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
  const LAZY_MODULE_MAP = require('./src/main.server');
  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
    providers: [
      provideModuleMap(LAZY_MODULE_MAP)
    ]
  }));

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

  
  // Example Express Rest API endpoints
  // app.get('/api/**', (req, res) => { });
  // 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 || 4000;

  // Start up the Node server
  const server = app();
  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';
export { renderModule, renderModuleFactory } from '@angular/platform-server';

• tsconfig.server.json

{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app-server",
    "types": [
      "node"
    ]
  ,    "target": "es2016"
},
  "files": [
    "src/main.server.ts",
    "server.ts"
  ],
  "angularCompilerOptions": {
    "entryModule": "./src/app/app.server.module#AppServerModule"
  }
}

问题:当我运行命令npm run dev:ssr时，我得到以下输出：

> multikart@0.0.0 dev:ssr
> ng run multikart:serve-ssr

Node.js version v15.14.0 detected.
Odd numbered Node.js versions will not enter LTS status and should not be used for production. For more information, please see https://nodejs.org/en/about/releases/.
****************************************************************************************
This is a simple server for use in testing or debugging Angular applications locally.
It hasn't been reviewed for security issues.

DON'T USE IT FOR PRODUCTION!
****************************************************************************************
Option "extractCss" is deprecated: Deprecated since version 11.0. No longer required to disable CSS extraction for HMR.
"BuilderProgressSchema" schema is using the keyword "id" which its support is deprecated. Use "$id" for schema ID.
Warning: Support was requested for IE 11 in the project's browserslist configuration. IE 11 support is deprecated since Angular v12.
For more information, see https://angular.io/guide/browser-support
✔ Server application bundle generation complete.

Initial Chunk Files | Names         |      Size
main.js             | main          |   9.84 MB

                    | Initial Total |   9.84 MB

Lazy Chunk Files    | Names         |      Size
677.js              | -             |   2.65 MB
838.js              | -             | 819.46 kB
950.js              | -             | 725.99 kB
467.js              | -             | 534.25 kB
715.js              | -             | 498.13 kB
764.js              | -             | 165.63 kB
521.js              | -             |  15.82 kB

Build at: 2021-11-10T22:39:29.892Z - Hash: 8b86380f38b6116880f8 - Time: 23732ms
✔ Browser application bundle generation complete.
✔ Index html generation complete.

Initial Chunk Files                                                                                            | Names         |      Size
vendor-es2015.js                                                                                               | vendor        |   4.65 MB
styles.css                                                                                                     | styles        | 926.86 kB
main-es2015.js                                                                                                 | main          | 850.46 kB
polyfills-es2015.js                                                                                            | polyfills     | 137.16 kB
scripts.js                                                                                                     | scripts       |  34.65 kB
runtime-es2015.js                                                                                              | runtime       |  11.85 kB

                                                                                                               | Initial Total |   6.56 MB

Lazy Chunk Files                                                                                               | Names         |      Size
src_app_shop_shop_module_ts-es2015.js                                                                          | -             |   3.49 MB
src_app_pages_pages_module_ts-es2015.js                                                                        | -             |   1.19 MB
src_app_home_home_module_ts-es2015.js                                                                          | -             | 531.11 kB
src_app_elements_elements_module_ts-es2015.js                                                                  | -             | 165.94 kB
default-node_modules_angular_cdk___ivy_ngcc___fesm2015_platform_js-src_app_services_email_ser-eda7cd-es2015.js | -             |  20.32 kB
common-es2015.js                                                                                               | common        |   3.68 kB

Build at: 2021-11-10T22:39:33.955Z - Hash: b43142d36903af80c9cf - Time: 23524ms

Compiled successfully.
node:internal/modules/cjs/loader:927
  throw err;
  ^

Error: Cannot find module '/XXXXXXXXX/dist/multikart/server/main.js'
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:924:15)
    at Function.Module._load (node:internal/modules/cjs/loader:769:27)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12)
    at node:internal/main/run_main_module:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

A server error has occurred.
node exited with 1 code.
connect ECONNREFUSED 127.0.0.1:54133

你能帮我找出问题并解决吗？从几天以来我一直在为这件事而挣扎。

提前感谢

Answer 1

您需要首先运行npm run build:ssr来生成一个构建，然后再运行npm run serve:ssr