使用 Angular Universal 在服务器端运行时找不到模块环境

Posted 2023-03-07

【中文标题】使用 Angular Universal 在服务器端运行时找不到模块环境

【英文标题】：Cannot find module environment when running in server side with Angular Universal

【发布时间】：2017-11-06 05:00:11

【问题描述】：

我有一个简单的 Angular 4 应用程序，我想使用 Angular Universal（nodeJs 服务器端渲染）在服务器端运行。 我跟着these steps 使用 angular-cli 帮助配置了 Angular Universal，在我尝试使用 Angular 环境之前一切都很好。 当我尝试访问环境常量中的属性时，它可以在客户端（使用 ng serve）完美呈现，但在服务器端（ts-node src/server.ts）会引发以下错误：

Error: Cannot find module 'environments/environment'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\Dev\code-carama\src\app\auth.service.ts:3:1)
    at Module._compile (module.js:571:32)
    at Module.m._compile (C:\Dev\code-carama\node_modules\ts-node\src\index.ts:385:23)
    at Module._extensions..js (module.js:580:10)
    at Object.require.extensions.(anonymous function) [as .ts] (C:\Dev\code-carama\node_modules\ts-node\src\index.ts:388:12)
    at Module.load (module.js:488:32)

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
npm ERR! node v7.10.0
npm ERR! npm  v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! code-carama@0.0.0 start: `ts-node src/server.ts`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the code-carama@0.0.0 start script 'ts-node src/server.ts'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the code-carama package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     ts-node src/server.ts
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs code-carama
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls code-carama
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\dima\AppData\Roaming\npm-cache\_logs\2017-06-05T12_00_03_595Z-debug.log

这是我的server.ts：

import 'reflect-metadata';
import 'zone.js/dist/zone-node';
import  platformServer, renderModuleFactory  from '@angular/platform-server';
import  enableProdMode  from '@angular/core';
import  AppServerModuleNgFactory  from '../dist/ngfactory/src/app/app.server.module.ngfactory';
import * as express from 'express';
import  readFileSync  from 'fs';
import  join  from 'path';

const PORT = 4000;

enableProdMode();

const app = express();

let template = readFileSync(join(__dirname, '..', 'dist', 'index.html')).toString();

app.engine('html', (_, options, callback) => 
  const opts =  document: template, url: options.req.url ;

  //it serves html from the compiled angular app from the server
  renderModuleFactory(AppServerModuleNgFactory, opts)
    .then(html => callback(null, html));
);

app.set('view engine', 'html');
app.set('views', 'src')

app.get('*.*', express.static(join(__dirname, '..', 'dist')));

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

app.listen(PORT, () => 
  console.log(`listening on http://localhost:$PORT!`);
);

尝试访问环境变量的简单服务是auth.service.ts：

import  Injectable  from '@angular/core';
import  environment  from 'environments/environment';

@Injectable()
export class AuthService 

  private userManager = null;
  constructor()  
    console.log('AuthService instantiated in environment ' + environment.envName); //this will fail in server-side rendering
  

知道 nodeJs（或 Angular Universal）找不到那个环境模块是怎么回事吗？

谢谢

【参考方案1】：

在 Angular6 项目中，通过 'src/environments/environment' 更改 'environments/environment'

【讨论】：

在 Angular 7 中为我工作（项目从 Angular 6 迁移而来）。我是 Angular 的新手

【参考方案2】：

没关系，似乎问题在于，尽管对于客户端渲染该行：

import environment from 'environments/environment';

效果很好，对于服务器端渲染，该行必须是：

import environment from '../environments/environment';

顺便说一句，我不知道为什么，但默认情况下，对于服务器端渲染，它会选择 PROD 环境文件。

在控制台上：AuthService instantiated in environment prod

【参考方案3】：

尝试执行此命令npm run env，然后执行ng serve。这是我的工作

【参考方案4】：

app.module.ts

添加这一行：

import  environment  from '../environments/environment';

【参考方案5】：

对我来说，一些构建变体 dev 和 prod 有一些不同的 const 名称

export const AppConfig

而不是

export const environment

【参考方案6】：

在您的environment.ts 中添加以下内容：

 export const environment = 
    production: false
 ;

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案7】：

检查您没有在 .gitignore 中忽略它