4

我正在开发一个应用程序，它可以帮助我呈现包含 angular2 组件的静态 html。

我开发了一些 angular2 组件。现在我需要将它们插入到我的静态 html 中。

到目前为止，我可以成功生成静态 html。但是当我在 html 中使用 angular2 组件的选择器标签时，它会按原样呈现这些标签。即未加载angular2 组件。 以前组件是使用相同的代码正确加载的。

以下是我使用的代码片段。

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>

抱歉，代码片段很长。所以当我使用npm start我的应用程序运行这个应用程序时，它会呈现 html，即 angular2 组件没有进入选择器标签。以下是浏览器和控制台的快照。 浏览器显示此输出

控制台输出

4

3 回答 3

1

我认为您在以下行中打错了字。您应该使用App而不是app. 您需要在此处指定要使用的应用程序组件，而不是 Express 应用程序：

res.render('index_new', { App }, function(err,html){
于 2016-02-05T11:39:52.393 回答
0

您还应该添加<router-outlet></router-outlet>到您的指令中

于 2016-04-02T03:00:08.903 回答
-2

尝试提供完整的模板网址。

代替

 templateUrl: 'demo.component.html'

利用

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

将src/app/template/demo.component.html替换为您的模板路径。

于 2016-04-28T10:14:40.787 回答