个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我一直在尝试拼凑如何预生成现有 Angular 通用应用程序的页面。我陷入了这个异常(exception):
The selector "app-root" did not match any elements.
执行 node dist/pre-render.js / 时出现该异常.
请注意，此应用程序可以与 ng serve 配合使用。和npm run build:universal; npm run serve:universal 。所以这不仅仅是忘记在 app.module 中放入一些东西那么简单的declarations .
重现步骤:
npm run build:universal node dist/pre-render.js / The selector "app-root" did not match any elements 设置如下:
package.json脚本部分我认为这与 the Angular guide 相同.
"build:universal": "npm run build:client-and-server-bundles && npm run webpack:server",
"serve:universal": "node dist/server.js",
"build:client-and-server-bundles": "ng build --prod && ng build --prod --app 1 --output-hashing=false",
"webpack:server": "webpack --config webpack.server.config.js --progress --colors"
webpack.server.config.js 这也是straight out of the guide ，除非你会注意到我还有一个额外的 entry这产生了我的 pre-render.js来自 pre-render.ts 的脚本接下来我将展示它。
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
server: './server.ts',
'pre-render': './pre-render.ts'
},
resolve: { extensions: ['.js', '.ts'] },
target: 'node',
// This makes sure we include node_modules and other third-party libraries.
externals: [/(node_modules|main\..*\.js)/],
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [{
test: /\.ts$/,
loader: 'ts-loader'
}]
},
plugins: [
// Temporary Fix for issue: https://github.com/angular/angular/issues/11580
// for 'WARNING Critical dependency: the request of a dependency is an expression'
new webpack.ContextReplacementPlugin(
/(.+)?angular(\\|\/)core(.+)?/,
path.join(__dirname, 'src'), // location of your src
{} // a map of your routes
),
new webpack.ContextReplacementPlugin(
/(.+)?express(\\|\/)(.+)?/,
path.join(__dirname, 'src'),
{}
)
]
};
pre-render.ts 我从 the guide's server.ts file 得到了提示和来自 a book by Philippe Martin 。该指南尚未解释如何执行此操作，并且 Philippe 书中的示例对我不起作用。
import 'zone.js/dist/zone-node';
import { renderModuleFactory } from '@angular/platform-server';
import { enableProdMode } from '@angular/core';
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
const args = process.argv.slice(2);
if (args.length !== 1) {
process.stdout.write('Usage: node dist/pre-render.js <url>');
process.exit();
}
enableProdMode();
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.bundle');
renderModuleFactory(
AppServerModuleNgFactory,
{
url: args[0],
extraProviders: [
provideModuleMap(LAZY_MODULE_MAP)
]
}
).then(rendered => {
process.stdout.write(rendered);
});
说实话，我不知道extraProviders是什么。属性用于，或者如果 provideModuleMap(...)扔进去是正确的。但如果我不给它任何 extraProviders然后我得到这个错误:
NullInjectorError: No provider for InjectionToken MODULE_MAP
很明显，属性(property)对于某些事物来说一定很重要。
此外，我注意到插入 document旁边的属性(property)url和extraProviders没有任何效果，即使document property 是一个没有任何 <app-root> 的字符串元素。
最佳答案
所缺少的是 document属性包含 <app-root></app-root>字符串中某处的元素。
当我将此对象作为第二个参数传递给 renderModuleFactory 时，它起作用了。请注意添加 document属性:
document: `<!DOCTYPE html>
<html>
<body>
<app-root></app-root>
</body>
</html>`,
url: args[0],
extraProviders: [
provideModuleMap(LAZY_MODULE_MAP)
]
现在，虽然这会导致某些内容被渲染，但它并不完全正确，因为我们从 document 开始。与我们的 index.html 的内容不同的字符串.
要解决这个问题，只需执行 Angular Universal Starter 在 its prerender.ts file 中所做的操作即可。 :
const index = readFileSync(join('browser', 'index.html'), 'utf8');
renderModuleFactory(AppServerModuleNgFactory, {
document: index,
url: route,
extraProviders: [
provideModuleMap(LAZY_MODULE_MAP)
]
})
注意他们如何读取编译后的 browser/index.html 的内容文件并使用 that 字符串作为 document属性。
关于Angular Universal 预生成页面 : The selector "app-root" did not match any elements，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49521894/
25
4
0
我正在尝试使用以下 keytool 命令为我的应用程序生成 keystore : keytool -genkey -alias tomcat -keystore tomcat.keystore -ke
编辑:在西里尔正确解决问题后，我注意到只需将生成轴的函数放在用于生成标签的函数下面就可以解决问题。 我几乎读完了 O'Reilly 书中关于 D3.js 的教程，并在倒数第二页上制作了散点图，但是当添
虽然使用 GraphiQL 效果很好，但我的老板要求我实现一个用户界面，用户可以在其中通过 UI 元素(例如复选框、映射关系)检查呈现给他们的元素并获取数据，这样做将为该人生成 graphql 输入，
我尝试在 Netbean 6.8 中使用 ws-import 生成 Java 类。我想重新生成 jax-ws，因为在 ebay.api.paypalapi 包中发现了一个错误(我认为该错误是由于 Pa
我有一个 perl 脚本，它获取系统日期并将该日期写入文件名。 系统日期被分配给 TRH1 变量，然后它被设置为一个文件名。 $TRH1 =`date + %Y%m%d%H%M`; print "TR
我是 Haskell 的新手，需要帮助。我正在尝试构建一种必须具有某种唯一性的新数据类型，因此我决定使用 UUID 作为唯一标识符: data MyType = MyType { uuid ::
我制作了一个脚本，它可以根据 Mysql 数据库中的一些表生成 XML。 该脚本在 PHP 中运行。 public function getRawMaterials($apiKey, $format
所以这是我的项目中的一个问题。 In this task, we will use OpenSSL to generate digital signatures. Please prepare a f
我在 SAS LIFEREG 中有一个加速故障时间模型，我想绘制它。因为 SAS 在绘图方面非常糟糕，我想实际重新生成 R 中曲线的数据并将它们绘制在那里。 SAS 提出了一个尺度(在指数分布固定为
我正在为 Django 后端制作一个样板，并且我需要能够使它到达下一个下载它的人显然无法访问我的 secret key 的地方，或者拥有不同的 key 。我一直在研究一些选项，并在这个过程中进行了实验
我正在创建一个生成采购订单的应用程序。我可以根据用户输入的详细信息创建文本文件。我想生成一个看起来比普通文本文件好得多的 Excel。有没有可以在我的应用程序中使用的开源库？ 最佳答案 目前还没有任何
我正在尝试使用 ScalaCheck 为 BST 创建一个 Gen，但是当我调用 .sample 方法时，它给了我 java.lang.NullPointerException。我哪里错了？ seal
已关闭。此问题需要 debugging details 。目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and the
我尝试编写一些代码，例如(在verilog中): parameter N = 128; if (encoder_in[0] == 1) begin 23 binary_out = 1;
我正忙于在 Grails 项目中进行从 MySQL 到 Postgres 的相当复杂的数据迁移。 我正在使用 GORM 在 PostGres 中生成模式，然后执行 MySQL -> mysqldump
如何使用纯 XSLT 生成 UUID？基本上是寻找一种使用 XSLT 创建独特序列的方法。该序列可以是任意长度。 我正在使用 XSLT 2.0。 最佳答案 这是一个good example 。基本上，
我尝试安装.app文件，但是当我安装并单击“同步”(在iTunes中)时，我开始在设备上开始安装，然后停止，这是一个问题，我不知道在哪里，但我看到了我无法解决的奇怪的事情: 最佳答案 似乎您没有在Xc
自从我生成 JavaDocs 以来已经有一段时间了，我确信这些选项在过去 10 年左右的时间里已经得到了改进。 我能否得到一些有关生成器的建议，该生成器将输出类似于 .Net 文档结构的 JavaDo
我想学习如何生成 PDF，我不想使用任何第三方工具，我想自己用代码创建它。到目前为止，我所看到的唯一示例是我通过在第 3 方 dll 上打开反射器查看的代码，以查看发生了什么。不幸的是，到目前为止我看
我正在从 Epplus 库生成 excel 条形图。 这是我成功生成的。 我的 table 是这样的 Mumbai Delhi Financial D
我是一名优秀的程序员,十分优秀！