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

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

而不是

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="By spannable string in Code"
    android:textColor="#0F0"
    android:textSize="20sp" />

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView"
    android:textSize="25sp" />

 <TextView
     android:layout_marginTop="10dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="By TextSize in XML"
    android:textColor="#0F0"
    android:textSize="20sp" />

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <TextView
        android:id="@+id/textViewHour"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textSize="25sp" />

    <TextView
        android:id="@+id/textViewMinute"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textSize="18sp" />
</LinearLayout>

使用

 templateUrl: 'demo.component.html'

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

尝试使用angular2-universal-starter

3 个答案: