我有一个简单的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
}
}
知道nodeJ(或angular universal)为什么找不到环境模块吗?
谢啦,谢啦
9条答案
按热度按时间bvuwiixz1#
在项目Angular 6中,将“环境/环境”更改为“src/环境/环境"
lyr7nygr2#
没关系,看起来问题是,虽然对于客户端呈现行:
第一个月
运行良好,则对于服务器端渲染,该行必须为:
import { environment } from '../environments/environment';
顺便说一句,我不知道为什么,但默认情况下,对于服务器端渲染,它将选择PROD环境文件。
在控制台上:
AuthService instantiated in environment prod
bejyjqdl3#
我试着执行这个命令
npm run env
,然后再执行ng serve
。它对我有用am46iovg4#
应用程序模块.ts
添加此行:
zlhcx6iw5#
对我来说,一些构建变体
dev
和prod
有一些不同的常量名称export const AppConfig {
代替
export const environment {
muk1a3rh6#
您只需要找到环境. ts文件的位置。
Angular 为14:
如果您的ts文件位于以下位置:
src\应用程序\授权\简化程序\索引. ts
答案是:
lndjwyie7#
你能在src文件夹中看到environments文件夹吗?
然后,你能看到environment.ts和environment.prod.ts吗?
如果是这样的话,根据您对文件系统的描述,您需要再回到上一级。
uidvcgyl8#
检查是否未在.gitignore中忽略它
ki0zmccv9#
在
environment.ts
中添加以下内容: