选择器“app”与任何元素都不匹配
The selector "app" did not match any elements
我正在使用angular2-universal进行服务器端渲染和生成静态HTML。
到目前为止,我的静态HTML已经生成,组件也正在渲染。但是在我的浏览器控制台中它显示此错误。
EXCEPTION: The selector "app" did not match any elements
为此,我使用了以下代码:
1.索引.html
<!doctype html>
<html lang="en">
<head>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<link href="'node_modules'bootstrap'dist'css'bootstrap.min.css" rel="stylesheet" />
<link href="'node_modules'bootstrap'dist'css'style.css" rel="stylesheet" />
<script src="/node_modules/es6-shim/es6-shim.js"></script>
<script src="/node_modules/es6-promise/dist/es6-promise.js"></script>
<script src="/node_modules/reflect-metadata/Reflect.js"></script>
<script src="/node_modules/zone.js/dist/zone-microtask.js"></script>
<script src="/node_modules/zone.js/dist/long-stack-trace-zone.js"></script>
<script src="/dist/client/bundle.js"></script>
</head>
<body>
<app>Loading....</app>
</body>
</html>
2.客户端
import {bootstrap} from 'angular2/platform/browser';
import {HTTP_PROVIDERS} from 'angular2/http';
import 'rxjs/add/operator/map';
import {App} from './app/app.component';
bootstrap(App,[HTTP_PROVIDERS,]);
3.服务器
import * as path from 'path';
import * as express from 'express';
import * as universal from 'angular2-universal-preview';
// Angular 2
import {App} from './app/app.component';
let app = express();
let root = path.join(path.resolve(__dirname, '../'));
// Express View
app.engine('.ng2.html', universal.ng2engine);
app.set('views', __dirname);
app.set('view engine', 'ng2.html');
// Serve static files
app.use(express.static(root));
var i = 0;
// Routes
app.use('/', (req, res) => {
res.render('index_new', {App}, function(err,html){
console.log("------------------My HTML ---------'n"+(i++));
console.log(html);
console.log("------------------My HTML ----------");
res.send(html);
});
});
// Server
app.listen(3000, () => {
console.log('Listen on http://localhost:3000');
});
4.app.组件
import {Component} from 'angular2/core';
import {NgSwitch, NgSwitchWhen, NgSwitchDefault,NgFor} from 'angular2/common';
import {Http, Response} from 'angular2/http';
import {Observable} from 'rxjs/Rx';
@Component({
selector: 'app',
template: `
<div *ngFor="#comp of record">
<div class="col-sm-4 divDynamic">
<table style="width:100%;">
<tr style="background-color:#B8B8B8">
<th>{{comp.data[comp.mappings[0].mapAttr]}}</th>
</tr>
<tr>
<td> </td>
</tr>
</table>
<br/>
</div>
<div class="col-sm-4 divDynamic">
<table style="width:100%;">
<tr style="background-color:#B8B8B8">
<th>{{comp.data[comp.mappings[1].mapAttr]}}</th>
</tr>
<tr>
<td> </td>
</tr>
</table>
<br/>
</div>
<div class="col-sm-4 spec" style="float:right;">
<table style="width:100%;">
<tr style="background-color:#f5821f;color:white;">
<th>{{comp.data[comp.mappings[2].mapAttr]}}</th>
</tr>
<tr>
<td style="border:none;text-align:left;">{{comp.data[comp.mappings[16].mapAttr]}}</td>
</tr>
<tr>
<td style="border:none;text-align:left;">{{comp.data[comp.mappings[15].mapAttr]}}</td>
</tr>
<tr>
<td style="border:none;text-align:left;">{{comp.data[comp.mappings[17].mapAttr]}}</td>
</tr>
</table>
<br/>
</div>
<div class="col-sm-8 spec">
<table style="width:100%;">
<tr>
<td rowspan="2" style="background-color:#f5821f;color:white;" class="col-xs-2 ">{{comp.data[comp.mappings[3].mapAttr]}}</td>
<th>{{comp.data[comp.mappings[7].mapAttr]}}</th>
<th>{{comp.data[comp.mappings[7].mapAttr]}}</th>
<th>{{comp.data[comp.mappings[7].mapAttr]}}</th>
<th>{{comp.data[comp.mappings[7].mapAttr]}}</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<br/>
</div>
<div class="col-sm-8 divDynamic">
<table style="width:100%;">
<tr>
<td rowspan="2" style="background-color:#B8B8B8;" class="col-xs-2 ">{{comp.data[comp.mappings[4].mapAttr]}}</td>
<th>{{comp.data[comp.mappings[11].mapAttr]}}</th>
<th>{{comp.data[comp.mappings[12].mapAttr]}}</th>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<br/>
</div>
<div class="col-sm-12 divDynamic">
<table style="width:100%;">
<tr>
<td rowspan="2" style="background-color:#B8B8B8;" class="col-xs-2 ">{{comp.data[comp.mappings[5].mapAttr]}}</td>
<th>{{comp.data[comp.mappings[13].mapAttr]}}</th>
<th>{{comp.data[comp.mappings[14].mapAttr]}}</th>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<br/>
</div>
<div class="col-sm-12" style="color:#a41c2b;border:solid #a41c2b 2px;">
{{comp.data[comp.mappings[6].mapAttr]}}
</div>
</div>
`
})
export class App{
public record = [{
"styling": {
"overall": {}
},
"data": {
"statementDate": "Statement Date",
"minAmtDue": "Minimum Amount Due",
"totalAmtDue": "Your Total Amount Due",
"stmtSummary": "Statement Summary",
"creditSummary": "Credit Summary",
"rewards": "REWARDS",
"bottomPara": "Convert your Big shopping bills into small, manageable EMI's! If any of the below transaction is highlighted,you may login to Internet Banking and convert into EMI now ! TnC apply.",
"prevBalance": "Previous Balance",
"purchases": "Purchases/ Charges",
"cashAdv": "Cash Advances",
"payments": "Payments/ Credits",
"creditLimit": "Credit Limit",
"creditAvail": "Available Credit",
"pointsEarned": "Points Earned",
"payback": "Points Transferred to PAYBACK(Acc:",
"dueDate": "Due Date:",
"Amt": "Rs.",
"interest": "Interest will be levied if Total Amount Due is not paid"
},
"mappings": [
{
"mapAttr": "statementDate"
},
{
"mapAttr": "minAmtDue"
},
{
"mapAttr": "totalAmtDue"
},
{
"mapAttr": "stmtSummary"
},
{
"mapAttr": "creditSummary"
},
{
"mapAttr": "rewards"
},
{
"mapAttr": "bottomPara"
},
{
"mapAttr": "prevBalance"
},
{
"mapAttr": "purchases"
},
{
"mapAttr": "cashAdv"
},
{
"mapAttr": "payments"
},
{
"mapAttr": "creditLimit"
},
{
"mapAttr": "creditAvail"
},
{
"mapAttr": "pointsEarned"
},
{
"mapAttr": "payback"
},
{
"mapAttr": "dueDate"
},
{
"mapAttr": "Amt"
},
{
"mapAttr": "interest"
}
]
}
];
}
查看此代码后,我意识到它也在客户端引导应用程序。
从client.ts中删除以下行后,它工作正常。
bootstrap(App,[HTTP_PROVIDERS,]);
从 client.ts 中删除此行后,应用程序没有产生任何错误。但我不确定为什么通用初学者首先使用这条线,如果他们使用服务器端渲染。
我从中了解到的是,应用程序尝试加载组件两次,
分别从客户端和服务器端。
所以它渲染了服务器端组件,但找不到客户端组件的选择器。
相关文章:
- 锚点元素不't使用svg时,请打开EDGE上的href
- 高库存时期时间与时区不匹配
- 当带有渲染器的DOM元素不在屏幕顶部时,移动了场景的坐标
- react路由器使用简单的javascript路由器配置来处理不匹配的路径
- Javascript:图像与单选按钮的值不匹配
- JQuery:使用clone()生成的元素不采用原始的事件属性
- 元素不会添加到Javascript数组中
- 文本区域(jQuery)的结果不匹配
- Jquery live()绑定没有'I don’我对某些元素不感兴趣
- 如果状态不匹配,则缩小为丑陋
- 设置名称与 XML 的名称生产不匹配的 DOM 元素的属性
- 选择器“app”与任何元素都不匹配
- Angular2 Selector与bundle和ECM6的任何元素都不匹配
- 当匹配的元素不在'未找到
- 当一组元素不总是在同一个父元素中时,如何找到下一个匹配的元素
- 在angularjs 1.4中,由于类型不匹配,选择元素值没有被绑定
- 如果window.location.href不匹配某个字符串,则为元素添加css类
- 删除集合中不匹配的元素
- 选择器“;我的应用程序测试“;与任何元素都不匹配
- 为什么Capybara不匹配AJAX调用后插入的新DOM元素