Search code examples
angularuniversalangular2-templatehtml-rendering

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

I am developing an application which helps me to render static html including angular2 components.

I have developed few angular2 components. Now I need to insert them in my static html.

So far I can generate static html successfully. but when I use selector tags of my angular2 components inside my html,it renders those tags as it is. i.e. angular2 components are not loaded. Previously components were getting loaded correctly using same code.

Following are the code snippets I have used.

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>

Sorry for the long code snippets. so when I run this app using npm start my application renders html as it is i.e. angular2 components are not getting inside the selector tags. Below are snapshots of browser & console. Browser shows this output

Console Output

Solution

  • I think that you made a typo on the following line. You should use App instead of app. You need to specify here the application component you want to use and not the Express application:

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