Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >Angular universal/Server端渲染丢失的文件

Angular universal/Server端渲染丢失的文件
EN

Stack Overflow用户
提问于 2019-02-15 20:09:29
回答 1查看 2.2K关注 0票数 1

我正在尝试让我的angular应用程序支持ssr,在official documentation中它说我应该运行

webpack --config webpack.server.config.js --progress --colors

但是我不能让它正确编译:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
ERROR in ./server.ts
Module not found: Error: Can't resolve './server/main' in '/home/lucaswxp/reduza/reduza-angular'
 @ ./server.ts 18:9-33

带问题的线路:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./server/main');

这些文件应该是动态创建的,这就是为什么"require“需要它们的原因,但dist文件夹中没有"server/main.js”文件,这是我在dist文件夹中得到的:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
out-tsc/
   e2e/
   src/
   node_modules/
reduza-ui/ <-- my project name
   main.08ht283hg20s3.js
server.js
server.js.map

和我的angular.json配置:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
"server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/reduza-ui",
            "main": "src/server.main.ts",
            "tsConfig": "src/server.tsconfig.app.json"
          },
          "configurations": {
            "stable": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "fileReplacements": [
                { 
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        }

没有“服务器”文件夹。我不知道我错过了什么?我尝试手动包含编译后的文件dist/reduza-ui/main.08ht283hg20s3.js,但在访问localhost:4000时出现以下错误

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
TypeError: Cannot read property 'moduleType' of undefined
    at /home/lucaswxp/reduza/reduza-angular/dist/server.js:151:1457
    at e.invoke (/home/lucaswxp/reduza/reduza-angular/dist/server.js:1809:7001)
    at Object.onInvoke (/home/lucaswxp/reduza/reduza-angular/dist/server.js:137:1986)
    at e.invoke (/home/lucaswxp/reduza/reduza-angular/dist/server.js:1809:6941)
    at t.run (/home/lucaswxp/reduza/reduza-angular/dist/server.js:1809:2171)
    at e.run (/home/lucaswxp/reduza/reduza-angular/dist/server.js:137:2710)
    at e.bootstrapModuleFactory (/home/lucaswxp/reduza/reduza-angular/dist/server.js:151:1388)
    at md (/home/lucaswxp/reduza/reduza-angular/dist/server.js:1673:888)
    at p.engine (/home/lucaswxp/reduza/reduza-angular/dist/server.js:1794:10074)
    at p.render (/home/lucaswxp/reduza/reduza-angular/dist/server.js:1984:1029)
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-03-03 13:04:58

这是文档中的一个错误。

他们的文档代码是

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./server/main');

然而,这是不正确的,或者至少不是很清楚。

要点1:您不应该在生产模式下构建。

尽管您在文档中看到了他们希望您在package.json的脚本部分中包含的一行代码,但如下所示

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
ng run my-project:server:production

您不应该这样做,原因有两个:首先,他们更改angular.json的指令不包括生产构建。其次,生产构建(如果您只是从实际的非服务器应用程序的生产中复制)是以一种在文件名中包含散列的方式进行的,这将导致一个名为main.a220df2.js的文件。这当然不是很理想,因为这意味着你必须一直改变你的server.ts。

因此,要么禁用散列"outputHashing": "none",要么干脆不通过调用ng run my-project:server进行生产构建(简单地删除:production)。

要点2:使用正确的require

实际的require()调用应该指向您构建的main.server.ts,它是angular.jsonprojects:PROJECTNAME:architect:server部分下的引用。文档已经将outputPath定义为"outputPath": "dist/my-project-server",,这意味着我们在dist/my-project-server/main.js中有一个文件(首先处理第1点并禁用outputHashing,或者根本不在生产模式下构建)。在您的server.ts中,这个文件必须是required。

因此,在您的示例中,一旦禁用了outputHasing或在生产模式下停止构建,就应该包含./dist/reduza-ui/main.js文件。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/reduza-ui/main');

额外的提示:在文档的最顶端,您可以看到指向整篇文章的完整代码的链接:https://angular.io/generated/zips/universal/universal.zip。在那里你可以看到真正的代码应该是什么样子的。

让它完全工作的最后两个技巧:

第一

文档用server.ts写着类似这样的内容:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();

browser是你的应用程序的实际默认版本,所以你的常规构建。如果你使用ng build,你最终会在dist/中拥有一个文件夹,这是你实际的默认应用。这个应用是由browser开发的。在您的示例中,您将服务器版本命名为reduza-ui,因此在dist中,您的实际应用程序可能被命名为reduza-ui-default。在server.ts中,有几个地方需要使用'reduza-ui-default'而不是'browser'

第二

此时,当您编译服务器、启动服务器并在浏览器中请求第一个页面时,您将进入控制台:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
StaticInjectorError(Platform: core)[InjectionToken Application Initializer -> InjectionToken DocumentToken]:
  Right-hand side of 'instanceof' is not an object

这是因为webpack最小化了你的server.ts。使用以下命令禁用该功能

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
optimization: {
    minimize: false
},

webpack.server.config.js中。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/54716371

复制
相关文章
mongodb导入json_json格式是什么
刚开始接触mongodb,以下介绍使用mongoVUE来导入和导出json格式的数据
全栈程序员站长
2022/09/25
1.3K0
mongodb导入json_json格式是什么
控制MongoDB中的集合分布
分片标记(Shard tagging)是MongoDB 2.2.0版中的一项新功能。通过对集合进行标记使其被强制写入到本地数据中心,也可以用来将某个集合固定到一个分片或一系列分片中。
Sepmer Fi
2018/01/10
2K0
控制MongoDB中的集合分布
mongodb 集合_mongodb原理
默认情况下,对比事务安全,MongoDB更关注高的插入速度。如果你需要加载大量低价值的业务数据,那么MongoDB将很适合你的用例。但是必须避免在要求高事务安全的情景下使用MongoDB,比如一个1000万美元的交易。
全栈程序员站长
2022/11/15
2K0
mongodb 集合_mongodb原理
JAVA中json转Map,jsonArray转List集合,List集合转json
在写代码时,经常会遇到各转类型之间互相转换,比如json转换为Map,jsonArray转List集合,List集合转json,现在整理一个工具类,方便日后查阅。
全栈程序员站长
2022/09/10
3.7K0
JAVA中json转Map,jsonArray转List集合,List集合转json
MongoDB 中的集合和元数据
集合就是 MongoDB 文档组,类似于 RDBMS (关系数据库管理系统:Relational Database Management System)中的表格。
RiemannHypothesis
2022/11/05
1.9K0
MongoDB固定集合
一般情况下我们创建的集合是没有大小的,可以一直往里边添加文档,这种集合可以动态增长,MongoDB中还有一种集合叫做固定集合,这种集合的大小是固定的,我可以在创建的时候设置该集合中文档的数目,假设为100条,当集合中的文档数目达到100条时,如果再向集合中插入文档,则只会保留最新的100个文档,之前的文档则会被删除。一般像日志信息我们就可以使用固定集合,其他一些需要定期删除的数据也可以使用固定集合,本文我们就来看看这个固定集合的使用。 ---- 创建 固定集合的创建方式也比较简单,如下: db.create
江南一点雨
2018/04/02
1.1K0
MongoDB 系统集合
MongoDB将系统信息存储在使用<database>.system.*命名空间的集合中,这些集合是MongoDB保留供内部使用的。用户请不要创建以system开头的集合。
MongoDB中文社区
2021/09/24
6020
MongoDB 系统集合
MongoDB删除集合
作者: 初生不惑 Java技术QQ群:227270512 / Linux QQ群:479429477
拓荒者
2019/09/12
1.2K0
MongoDB 数组在mongodb 中存在的意义
在MOGNODB 的文档设计和存储中,存在两个部分 1 嵌套 2 数组,所以如果想设计好一个MONGODB 在理解业务,读写比例,查询方式后,就需要介入到更深层次的理解嵌套的查询方式,嵌套多层后的性能问题, 数组其实比嵌套带来更多的问题,所以今天我们的从数组开始。
AustinDatabases
2022/04/05
4.2K0
MongoDB  数组在mongodb 中存在的意义
在Docker中安装MongoDB
1.版本选取 访问mongodb的镜像仓库地址:https://hub.docker.com/_/mongo?tab=tags&page=1 这里选取最新版本进行安装,如果想安装其他的可用版本,可以使
Peyshine
2020/05/19
7.5K0
在Docker中安装MongoDB
MongoDB(三)—-MongoDB的集合操作
MongoDB使用db.createCollection()函数来创建集合。 语法格式:db.createCollection(name, options) name: 要创建的集合名称。 options: 可选参数, 指定有关内存大小及索引的选项。
全栈程序员站长
2021/04/07
9500
Linux中mongodb安装和导出为json
采用官方工具导出mongo数据为json格式 文档:https://docs.mongodb.com/manual/reference/program/mongoexport/ 可以远程导出,只要有host:port即可。 首先需要安装tools: 在redhat中: 文档:https://docs.mongodb.com/manual/tutorial/install-mongodb-on-red-hat/ 1、编写repo文件 Create a /etc/yum.repos.d/mongodb-org
Ryan-Miao
2018/03/13
1.9K0
MongoDB导入Shapefile数据
两种解决方案: 一、将整个shapefile转为GeoJSON然后直接导入mongoDB数据库中 首先,将shapefile数据转为WGS84地理坐标,然后使用GDAL的命令行工具ogr2ogr进行格式的转换,转换命令如下: ogr2ogr -f geoJSON continents.json continents.shp 删除生成JSON文件的前两行{ "type": "FeatureCollection",和最后一行}。 最后,使用mongodb的mongoimport工具进行导入: mongoimport --db world --collection continents < continents.json 这样子整个shapefile文件在mongodb中是以一个document存在的。
卡尔曼和玻尔兹曼谁曼
2019/01/22
1.9K0
mongodb导出和导入
2018-08-12 发表在 服务器 1543 + 导出表: bin/mongoexport -h 10.28.65.152 -d health_shaanxi_pro -c wt.health.item -o health.json --type json 导入表: bin/mongoimport -d mongotest -c users --file /home/mongodump/articles.json --type json 数据库备份: mongodump -h dbho
小贝壳
2020/03/05
1.9K0
mongodb导入导出数据
mongodb数据备份与恢复 备份 mongodump -h <dbhost> -d <dbname> -o <dbdirectory> // 示例 mongodump -h localhost -d test -o /home/data -h 服务器地址 如: 127.0.0.1 也可以指定端口号: 127.0.0.1:27017 -d 需要备份的数据库名 如: test -o 存放的目录 如: /home/data mongodb会自动在/home/data下创建一个test目录,里面存放备份数据 恢复
零式的天空
2022/03/21
1.9K0
【Json】json在SpringBoot中的格式转换
fastjson深入理解 fastJson对于json格式字符串的解析主要用到了一下三个类:
瑞新
2020/12/07
6.4K0
【Json】json在SpringBoot中的格式转换
MongoDB 3.0 导入命令
./mongoimport -h 192.168.77.129 --db test --collection restaurants --drop --file /usr/local/mongodb-linux-x86_64-3.0.6/DW_LABEL_DATAS_1_0.csv
用户3003813
2018/09/06
9940
MongoDB 3.0 导入命令
在MongoDB中模拟Auto Increment
MySQL用户多半都有Auto Increment情结,不过MongoDB缺省并没有实现,所以需要模拟一下,编程语言以PHP为例,代码大致如下所示:
LA0WAN9
2021/12/14
9540
mongodb撤销集合分片
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
拓荒者
2019/09/12
1.8K0
44、MongoDB集合操作
(1)大家首先要知道,MongoDB中集合的概念也就是我们一般在mysql中所说的表,如何创建一个集合呢?如下:
Ewall
2018/12/06
4960
44、MongoDB集合操作

相似问题

导入MongoDB集合中的.Json文件:错误

10

MongoDB导入集合中的json文件段

10

如何将多行json导入mongodb集合?

116

将Json导入MongoDB时出现集合名称错误

115

导入json Mongodb

312
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文