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