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

{
// 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/)"],
};