Angular

This handler module supports SSR and serves Angular components with the .component.ts extension.

Install

npm install @primate/frontend @angular/{compiler,core,platform-browser,platform-server,ssr}@17

Configure

Import and initialize the module in your configuration.

import { angular } from "@primate/frontend";

export default {
  modules: [
    angular(),
  ],
};

Use

Create an Angular component in components.

import { Component, Input } from "@angular/core";
import { CommonModule } from "@angular/common";

@Component({
  selector: "post-index",
  imports: [ CommonModule ],
  template: `
    <h1>All posts</h1>
    <div *ngFor="let post of posts">
      <h2>
        <a href="/post/view/{{post.id}}">
          {{post.title}}
        </a>
      </h2>
    </div>
  `,
  standalone: true,
})
export default class PostIndex {
  @Input() posts = [];
}

Serve it from a route.

import { view } from "primate";

const posts = [{
  id: 1,
  title: "First post",
}];

export default {
  get() {
    return view("post-index.component.ts", { posts });
  },
};

The rendered component will be accessible at http://localhost:6161/angular.

Configuration options

extension

Default ".component.ts"

The file extension associated with Angular components.

mode

Default "production"

Angular's mode of operation. Any value other than "production" will test Angular to development mode.

Resources

• Repository