Saturday, 26 January 2019

How to render angular component from node express

I am hitting the url with GET request: http://localhost:5029/article/16

and inside node I am checking for article/16 like this:

req.url.split("article/")[1];

and trying to render the component using handlebars like this:

res.render('header', {layout: 'header.component.html'});

I see the component rendered but css styles are not loaded.

my component.ts:

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit { }

component html:

<div class="header">
  <li class="menu-item">
    <a [routerLinkActive]="['active']" routerLink="/home">Home</a>
  </li>
  <li class="menu-item">
    <div class="dropdown">
      <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" [routerLinkActive]="['active']">Tutorials</button>
    </div>
  </li>
</div>

Handlebars setup:

app.engine(
  "hbs",
  hbs({
    extname: "html",
    defaultView: "default",
    layoutsDir:  "../src/app/components/header/",
    partialsDir: "../src/app/components/"
  })
);

app.set("view engine", "hbs");



from How to render angular component from node express

No comments:

Post a Comment