選擇器“ app”與任何元素均不匹配

Question

我正在使用angular2-universal進行服務器端渲染並生成靜態HTML。

到目前為止，我的靜態HTML已生成，並且組件也正在呈現。 但在我的瀏覽器控制台中，它顯示此錯誤。

EXCEPTION: The selector "app" did not match any elements

為此，我使用了以下代碼：

1.index.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.client.ts

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.server.ts

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.component.ts

 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>&nbsp;</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>&nbsp;</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>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</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>&nbsp;</td> <td>&nbsp;</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>&nbsp;</td> <td>&nbsp;</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" } ] } ]; }

Answer 1

看完這段代碼后，我意識到它也在客戶端引導應用程序。

從client.ts刪除以下行后，它可以正常工作。

bootstrap(App,[HTTP_PROVIDERS,]);

在我從client.ts刪除此行之后，該應用程序未產生任何錯誤。 但是我不確定通用初學者為什么在使用服務器端渲染時首先使用了這一行。

我從中了解到的是，應用程序嘗試兩次加載組件，

分別從客戶端和服務器端。

因此，它呈現了服務器端組件，但未能找到客戶端組件的選擇器。

選擇器“ app”與任何元素均不匹配

問題描述

1 個解決方案

解決方案1
0 已采納 2016-02-26 10:50:09

選擇器“ app”與任何元素均不匹配

問題描述

1 個解決方案

解決方案1 0 已采納 2016-02-26 10:50:09

解決方案1
0 已采納 2016-02-26 10:50:09