Marmicode
Blog Post
Younes Jaaidi

Versatile Angular Style brings Modern Dev Tools to Angular

by Younes Jaaidi โ€ข 
Dec 7, 2022 โ€ข 12 minutes
Versatile Angular Style brings Modern Dev Tools to Angular

{
  // Nx
  "executor": "@angular-devkit/build-angular:browser-esbuild",
  // Angular CLI
  "builder": "@angular-devkit/build-angular:browser-esbuild",
}

@Component({
  ...
  template: `<h1>Hello!</h1>`,
  styles: [
    `
      :host {
        background: purple;
        color: white;
      }
    `
  ]
})
class GreetingsComponent {}

@Component(...)
class GreetingsComponent {
  constructor(greetings: GreetingsService) {}
}

@Component(...)
class GreetingsComponent {
  constructor(@Inject(GreetingsService) greetings: GreetingsService) {}
}

const GREETINGS_TOKEN = new InjectionToken<GreetingsService>('GREETINGS');

@Component(...)
class GreetingsComponent {
  greetings = inject(GreetingsService); // GreetingsService
  greetingsWithToken = inject(GREETINGS_TOKEN); // GreetingsService
  greetingsOptional = inject(GreetingsService, {optional: true}); // GreetingsService | null
}

// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  root: 'src',
  resolve: {
    conditions: ['style'],
  },
});

// vitest.config.ts
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    environment: 'jsdom',
    setupFiles: ['src/test-setup.ts']
  },
});
// test-setup.ts
import './app/testing/noop-zone';

import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting,
} from '@angular/platform-browser-dynamic/testing';
import { getTestBed } from '@angular/core/testing';

getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting()
);

// jest.config.ts
module.exports = {
  setupFilesAfterEnv: ["<rootDir>/src/test-setup.ts"],
  testEnvironment: "jsdom",
  transform: {
    "^.+\\.m?(t|j)sx?$": ["@swc/jest"],
  },
  /* We could get rid of this if we switch to ESM. */
  transformIgnorePatterns: ["/node_modules/(?!(@angular/)"],
};