2016-02-05 2 views
4

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. Browser shows this output

Console Output

Répondre

1

Je pense que vous avez fait une faute de frappe sur la ligne suivante. Vous devez utiliser App au lieu de app. Vous devez spécifier ici le composant d'application que vous souhaitez utiliser et non l'application Express:

res.render('index_new', { App }, function(err,html){ 
+0

Cela ne fonctionne toujours pas –

0

Vous devez également ajouter <router-outlet></router-outlet> à vos directives

-2

Essayez de donner l'URL complète du modèle.

Au lieu de

templateUrl: 'demo.component.html' 

utilisation

templateUrl: 'http://localhost:8000/src/app/template/demo.component.html' 

Remplacer src/app/modèle/demo.component.html avec votre chemin de modèle.