Je suis en train de développer une application qui m'aide pour rendre statiques html y compris les composants angular2.angular2 composant ne pas rendu tout en essayant d'utiliser angular2-universal-starter
J'ai développé peu de composants angulaires2. Maintenant, je dois les insérer dans mon code HTML statique.
Jusqu'à présent, je peux générer du code HTML statique avec succès. mais quand j'utilise des balises de sélection de mes composants angular2 à l'intérieur de mon HTML, il restitue ces balises telles quelles. c'est-à-dire les composants angulaires2 ne sont pas chargés. Auparavant, les composants étaient chargés correctement en utilisant le même code.
Voici les extraits de code que j'ai utilisés.
1.app.component.ts
import {Component, Directive, ElementRef, Renderer} from 'angular2/core';
@Component({
selector: 'app',
templateUrl: 'demo.component.html'
})
export class App {
name: string = 'Angular Server Rendering Test';
}
2.demo.component.html
<div>
{{name}}
</div>
3.client.ts
import {bootstrap} from 'angular2/platform/browser';
//import {HTTP_PROVIDERS} from 'angular2/http';
// import {bootstrap} from 'angular2-universal-preview';
import {App} from './app/app.component';
bootstrap(App);
4.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');
});
6.index.html
<head>
<meta charset="UTF-8">
<title>Angular 2 Universal Starter</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<base href="/">
</head>
<body>
<app>Loading....</app>
<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>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/client')
.then(null, console.error.bind(console));
</script>
</body>
</html>
Désolé pour les snippets de code longs. donc lorsque je lance cette application en utilisant npm start
mon application rend html comme c'est à dire que les composants angular2 ne pénètrent pas dans les balises de sélection. Voici des instantanés de la console & du navigateur.
Cela ne fonctionne toujours pas –