8
का उपयोग कैसे करें मैंने अपने कोणीय 2 घटकों के लिए एक पार्सर विकसित किया है जो उन्हें मेरी HTML फ़ाइल में प्रस्तुत करता है। अब तक मैं के रूप मेंएंगुलर 2 सर्वर साइड प्रतिपादन
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>
<div>
<img src={{record}} class="pull-left image-responsive" style="width:50%;">
<img src={{record}} class="pull-right image-responsive" style="width:30%;">
</div>
<div>
<img src={{record}} class="pull-right image-responsive" style="width:100%;">
</div>
<br/><br/>
<div>
<table class="table-responsive" style="width:100%;border-collapse:separate;border:solid #D8D8D8 2px;border-radius:5px;">
<tr style="background-color: grey;">
<th style="text-align:center;">{{record}}</th>
<th style="border-left:2px solid #f5821f;text-align:center;">{{record}}</th>
</tr>
<tr style="text-align:center;">
<td > </td>
<td style="border-left:2px solid #f5821f;"> </td>
</tr>
</table>
</div>
<br/>
</div>
`
})
export class App{
public record;
constructor() {
this.record="angular2";
}
}
तब मेरे स्थिर HTML सही ढंग से उत्पन्न हो जाता है HTML में उन्हें प्रस्तुत करना करने में सक्षम हूँ, लेकिन मैं इस तरह मेरी घटक का उपयोग कर रहा है:
import {Component} from 'angular2/core';
import {NgSwitch, NgSwitchWhen, NgSwitchDefault,NgFor} from 'angular2/common';
import {Http, Response} from 'angular2/http';
import {Observable} from 'rxjs/Rx';
import {Component1} from './component_1/component_1.component';
import {Component2} from './component_2/component_2.component';
@Component({
selector: 'app',
directives: [Component1,Component2],
template: `
<div class="container">
<div class="row">
<component_1>loading...</component_1>
</div>
<div class="row">
<component_2>loading...</component_2>
</div>
</div>
`
})
export class App{
public record;
constructor() {
this.record="angular2";
}
}
तब मेरे घटकों में लोड किए गए हैं एचटीएमएल सही ढंग से, लेकिन मेरा स्टेटिक एचटीएमएल सही ढंग से उत्पन्न नहीं होता है। नीचे दी गई छवियों देखें: अवयव ब्राउज़र 
में लोड किए गए हैं लेकिन स्थिर HTML स्थिर HTML 
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');
});index_new.ng2.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>मैं पहले से धन्यवाद @alexpods का अद्यतन Git हब भंडार की कोशिश की।
ने कोशिश की ... लेकिन मेरे नोड मॉड्यूल स्थापित नहीं हो रहे हैं @ पीटर –
@ बुशान गडेकर मैं देख सकता हूं कि आप विंडोज पर हैं। मैं मैक पर हूं और node_modules के साथ कोई समस्या नहीं है। शायद अगर आप त्रुटि संदेश पोस्ट करते हैं तो मैं मदद कर सकता हूं। –
'टाइपिंग ईआरआर! संदेश "github: टाइपिंग/टाइप-एएस 6-वादा" को हल करने में असमर्थ \ n टाइपिंग ईआरआर! "https://raw.githubusercontent.com/typings/typed-es6-promise/master/typings.json" से जुड़ने में असमर्थ होने के कारण \ n टाइपिंग ईआरआर! getaddrinfo ENOTFOUND proxy.example.com के कारण –