尝试使用 angular2-universal-starter 时 angular2 组件未呈现

Question

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

我开发了几个 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 组件没有进入选择器标签。以下是浏览器和控制台的快照。

Answer 1

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

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

Answer 2

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

Answer 3

尝试提供完整的模板 url。

而不是

 templateUrl: 'demo.component.html'

使用

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

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

尝试使用 angular2-universal-starter 时 angular2 组件未呈现

angular2 component not getting rendered while trying to use angular2-universal-starter

angular

universal

angular2-template

html-rendering