Angular Universal is a framework for server-side rendering (SSR) in Angular applications. To use Stylus for styling and Pug (formerly known as Jade) for templating in an Angular Universal application, you'll need to set up the necessary configurations and dependencies.

  1. Install Dependencies: First, ensure you have Node.js and Angular CLI installed. Then, create a new Angular project using the Angular CLI:

    bash
    ng new my-universal-app cd my-universal-app

    Next, install the required dependencies for Stylus and Pug:

    bash
    npm install stylus stylus-loader pug pug-loader --save-dev
  2. Configure Angular CLI: Modify the angular.json file to add Stylus and Pug loaders in the build and test configurations:

    json
    "architect": { "build": { "options": { "styles": [ "src/styles.styl" ], "stylePreprocessorOptions": { "includePaths": ["src/styles"] } } }, "test": { "options": { "styles": [ "src/styles.styl" ], "stylePreprocessorOptions": { "includePaths": ["src/styles"] } } } }

    This configuration sets up Stylus as the style preprocessor for your Angular application.

  3. Create Stylus and Pug Files: Create a Stylus file (styles.styl) in the src/styles directory, and import it into your styles.css:

    stylus
    // src/styles/styles.styl @import 'main.styl';

    Additionally, create a Pug file for your root component template (app.component.pug) in the src/app directory:

    pug
    // src/app/app.component.pug div h1 Hello World! p Welcome to Angular Universal with Pug and Stylus
  4. Modify Root Component: Update your root component (AppComponent) to use the Pug template instead of the default HTML template. To do this, change the templateUrl property to template and use the require function to import the Pug template:

    typescript
    // src/app/app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: require('./app.component.pug'), styleUrls: ['./app.component.styl'] }) export class AppComponent { // Component logic here }
  5. Server-Side Rendering: To enable server-side rendering with Angular Universal, follow the official Angular Universal guide: https://angular.io/guide/universal

    Configure the server-side rendering logic, and ensure your Pug and Stylus styles are included correctly in your SSR setup.

That's it! You should now have an Angular Universal application with Stylus for styling and Pug templates for server-side rendering. Remember to run the application using ng serve for development or ng build for production builds, and make sure your server-side rendering configuration is correctly set up for production deployment.

Have questions or queries?
Get in Touch