All geek questions in one place

Angular2 component does not get rendering when trying to use angular2 -universal-starter

I am developing an application that helps me render static html, including angular2 components .

I have developed several angular2 components. Now I need to insert them into my static html.

So far, I have been able to successfully generate static html. but when I use the selector tags of my angular2 components inside my html, it displays the tags as is. i.e. angular2 does not load. Previously, components loaded correctly using the same code.

Below are the code snippets that I 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';    
}
Run codeHide result

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);
Run codeHide result

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');
});
Run codeHide result

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>
Run codeHide result

. , npm start, html, . angular2 . . The browser shows this output.

Console exit

+4
3

, . App App. , , Express:

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

<router-outlet></router-outlet>

0

.

 templateUrl: 'demo.component.html'  


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

src/app/template/demo.component.html .

-2
source

Source: https://habr.com/ru/post/1627434/

More articles:


All Articles