[Feature] Explore upgrades offered by Angular v18

[tschaffter]

What product(s) is this feature for?

Agora, MODEL-AD, OpenChallenges

Description

The existing web apps in the monorepo use Angular v17, while Angular v18 has since been released. The new version includes improvements to SSR and support for esbuild as a replacement for webpack, promising faster build tasks.

Here are some observations made when initially generating the MODEL-AD app with Angular v18:

• The project.json uses a new executor (e.g., esbuild) and simplifies the SSR setup.
• Our current method of managing styles and themes does not allow an Angular v18 app to consume them as is. The solution might be to tweak the esbuild configuration or refactor how we manage styles and themes. This could also be an opportune time to explore Tailwind CSS ([Task] Explore Tailwind CSS for Project Styling #2690).
• The Dockerfile may need to be updated when building Angular v18 apps, particularly concerning the directories where the server-side and client-side files are generated.

To explore transitioning to Angular v18, we could create an Angular v18 app and investigate the best way to style it. Ideally, this approach would allow styles and themes to be reused across projects.

cc @hallieswan @sagely1 @rrchai @vpchung

Anything else?

• https://blog.nrwl.io/set-up-tailwind-css-with-angular-in-an-nx-workspace-6f039a0f4479 (2022)
• https://nx.dev/recipes/storybook/angular-configuring-styles

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[tschaffter]

Solution suggested by ChatGPT

To configure styles and themes for an Angular app in a monorepo managed with Nx, enabling reuse across multiple projects, you can follow these steps:

1. Create a Shared Styles Library

First, create a shared library within the monorepo that will contain the styles and themes. This library can then be imported by any Angular project in the monorepo.

nx generate @nrwl/angular:library shared-styles --style=scss

This will generate a library named shared-styles.

2. Add Global Styles and Themes to the Shared Library

In the shared-styles library, add your global styles and themes. For example, you can create an SCSS file for your themes:

libs/shared-styles/src/lib/themes.scss

$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-family: 'Roboto', sans-serif;

@mixin theme {
  body {
    font-family: $font-family;
    background-color: $primary-color;
    color: $secondary-color;
  }
}

3. Export Styles and Themes

Ensure that the styles and themes are exported so that other projects can import them. Modify the index.ts file of the shared-styles library to include your SCSS file:

libs/shared-styles/src/index.ts

export * from './lib/themes.scss';

4. Import Shared Styles in Angular Projects

In your Angular projects, import the shared styles and themes. Open the styles.scss file of the Angular project and include the shared styles:

apps/your-angular-app/src/styles.scss

@use 'libs/shared-styles/src/lib/themes.scss' as *;

@include theme;

5. Configure Angular.json

Ensure that the Angular project is aware of the shared library. Modify the angular.json file if necessary to include the shared-styles library in the build process.

{
  "projects": {
    "your-angular-app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "apps/your-angular-app/src/styles.scss",
              "libs/shared-styles/src/lib/themes.scss"
            ]
          }
        }
      }
    }
  }
}

6. Use Shared Styles in Components

To use the shared styles in Angular components, you can import the SCSS files directly into the component styles.

apps/your-angular-app/src/app/app.component.scss

@use 'libs/shared-styles/src/lib/themes.scss' as *;

@include theme;

By following these steps, you will have a centralized shared styles and themes library that can be reused across multiple projects in your Nx monorepo. This approach helps maintain consistency and reduces duplication of styles and themes across projects.

[tschaffter]

Solution suggested by ChatGPT (using Tailwind CSS)

To integrate Tailwind CSS into your Angular app within an Nx monorepo and share styles and themes across multiple projects, follow these updated steps:

1. Install Tailwind CSS

First, install Tailwind CSS and its dependencies in your workspace:

npm install -D tailwindcss postcss autoprefixer

Initialize Tailwind CSS configuration:

npx tailwindcss init

2. Create a Shared Styles Library

Create a shared library to contain your Tailwind CSS configuration and custom styles.

nx generate @nrwl/angular:library shared-styles

3. Configure Tailwind CSS

Create a tailwind.config.js file in your shared-styles library.

libs/shared-styles/tailwind.config.js

module.exports = {
  content: [
    './src/**/*.{html,ts}',
    '../../apps/**/src/**/*.{html,ts}', // Ensure it includes all Angular apps in your monorepo
  ],
  theme: {
    extend: {
      colors: {
        primary: '#3498db',
        secondary: '#2ecc71',
      },
      fontFamily: {
        sans: ['Roboto', 'sans-serif'],
      },
    },
  },
  plugins: [],
};

4. Create Global Styles

Create a global CSS file in the shared-styles library.

libs/shared-styles/src/lib/global-styles.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom styles can be added here */

5. Configure PostCSS

Create a postcss.config.js file in the shared-styles library.

libs/shared-styles/postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: { config: './tailwind.config.js' },
    autoprefixer: {},
  },
};

6. Import Shared Styles in Angular Projects

In your Angular projects, import the shared styles. Open the styles.scss (or styles.css) file of your Angular project and include the shared styles.

apps/your-angular-app/src/styles.css

@import 'libs/shared-styles/src/lib/global-styles.css';

7. Update Angular.json

Ensure that the Angular project is configured to use PostCSS. Modify the angular.json file to include the PostCSS configuration.

{
  "projects": {
    "your-angular-app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "apps/your-angular-app/src/styles.css"
            ],
            "stylePreprocessorOptions": {
              "includePaths": [
                "libs/shared-styles/src/lib"
              ]
            },
            "postcssOptions": {
              "config": "libs/shared-styles/postcss.config.js"
            }
          }
        }
      }
    }
  }
}

8. Use Tailwind CSS in Components

You can now use Tailwind CSS classes in your Angular components.

apps/your-angular-app/src/app/app.component.html

<div class="bg-primary text-secondary font-sans">
  Hello, Tailwind CSS!
</div>

9. Update NX Workspace Configuration

Ensure that the shared library is correctly set up in the Nx workspace. Check the workspace.json or nx.json if any additional configuration is needed.

By following these steps, you will have Tailwind CSS integrated into your Angular app within an Nx monorepo, with a shared styles library that can be reused across multiple projects. This approach ensures consistency and maintainability for styles and themes across your projects.

[tschaffter]

The monorepo has been updated to Angular v18. The exploration of Tailwind and the use of esbuild will be done in different tickets.