Usage with Angular

[phil-lgr]

I have a new project at my client's, and they insist on using Angular, does anyone have suggestions on how to import VE styles into angular components?

Edit 1:

Tried to install the plugin :

...
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js",
              "replaceDuplicatePlugins": true
            },

// @ts-check

const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

/**
 * @type {import('webpack').Configuration}
 */
const customWebpackConfig = {
  module: {
    rules: [
      {
        test: /\.vanilla\.css$/i, // Targets only CSS files generated by vanilla-extract
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: require.resolve('css-loader'),
            options: {
              url: false, // Required as image imports should be handled via JS/TS import statements
            },
          },
        ],
      },
    ],
  },
  plugins: [new VanillaExtractPlugin()],
};

module.exports = customWebpackConfig;

And got error:

Error: Module build failed (from ../../node_modules/@vanilla-extract/webpack-plugin/loader/dist/vanilla-extract-webpack-plugin-loader.cjs.js):
ModuleBuildError: Module build failed (from ../../node_modules/@ngtools/webpack/src/index.js):
Error: The Angular Webpack loader requires the AngularWebpackPlugin.
    at Object.angularWebpackLoader (/Users/phil/Code/cdpq-esg/CDP.ESG/CDP.ESG.Web/node_modules/@ngtools/webpack/src/ivy/loader.js:44:18)

Edit: put together a reproduction https://github.com/newrade/vanilla-extract-angular-repro

[phil-lgr]

Ran this repo https://github.com/one-aalam/ng11-starter-kit and got the same error

[mattcompiles]

Hey Bud, Sorry, I'm not at all familiar with Angular's build system. I remember @markdalgleish had a quick crack at it when we first released vanilla but didn't get it working. Also the error you're getting isn't related to vanilla-extract at all so not sure where to start looking.

I'd be looking for help from someone in the Angular community. If you do solve it it'd be great to hear your findings.

[d-kls]

I'm pretty new to Angular myself but I managed to set up a basic PoC with the latest Angular version - works with Sprinkles too.
In essence one needs to:

1. use custom webpack builder (here some specific changes are needed)
2. add the necessary webpack config from vanilla-extract documentation
3. adjust the css rule used by angular to exclude vanilla.css
4. adjust any .ts rules to ignore .css.ts files (to let vanilla plugin handle them i guess?)

The discussion thread seems very old but i thought it'd be good to note down the rough steps anyway. If there is still some interest, i can provide more specifics.