How to render angular component from node express

Question

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");

Similar requirement has been achieved here in RiotJS:

https://riot.js.org/api/#-riotrendertagname-opts

// render "my-tag" to html
var mytag = require('my-tag')
riot.render(mytag, { foo: 'bar' })

Answer 1

Not sure why you want to render a specific Angular component from node express, but I will try to explain what components are and why you can't directly load them and a better alternative on same.

As you might be already aware that, Decorators makes a specific block of code distinguish between service, component, directive etc.

Decorators are functions that are invoked with a prefixed @ symbol and immediately followed by a class, parameter, method or property.

e.g

@Component({
})
export class TestComponent {}

@Injectable()
export class TestService {}

Notice the () on @Component or in @Injectable. (These decorators need to register in some or other ngModule())

This means that the @Component is called once JavaScript encounters @Component(). In turn, this means that there must be a Component function somewhere that returns a function matching one of the decorator signatures outlined above. This is an example of the decorator factory pattern.

During Bootstrap of the application, all these functions are invoked, and compiler converts ts code in vanilla js, which is executed in the browser.

Coming back to the question what you are trying to do out there is trying to load the component without processing it with TS compiler, (Under the hood, angular is doing lots of work for us when we build or compile the application)

Possible Solution, if you don't want to serve all the components with help of angular, you can use Angular Element (Angular elements are Angular components packaged as custom elements, a web standard for defining new HTML elements in a framework-agnostic way), which can be rendered without the need of angular directly on any page.

To learn more about same visit https://angular.io/guide/elements

Hope this helps all the best!