ezzabuzaid

import {
  BehaviorSubject,
  Observable,
  ObservableInput,
  Subject,
  debounceTime,
  exhaustMap,
  filter,
  finalize,
  fromEvent,

ezzabuzaid

import { writeFileSync } from 'fs';
import * as path from 'path';
import * as ts from 'typescript';

/**
 * Extracts files from tsconfig.json
 *
 * @param tsconfigPath
 * @returns
 */

ezzabuzaid

I was able to use the ESM version with Angular 15 following these steps:

Note: I use nx, but it should work with other executers like Angular builder

1. install monaco-editor-webpack-plugin
2. change the build target to use an executer that supports modifying the webpack config. in case of nx 16, use "@nx/angular:webpack-browser"
3. add webpack.config.js

angular.json/project.json

ezzabuzaid

import { MonoTypeOperatorFunction, Observable } from 'rxjs';
import {
  debounceTime,
  distinctUntilChanged,
  filter,
  map
} from 'rxjs/operators';

interface ITypeaheadOperatorOptions {
  minLength: number;

ezzabuzaid

import { createCustomElement } from '@angular/elements';
import { createApplication } from '@angular/platform-browser';

(async () => {
  const app = await createApplication({
    providers: [],
  });

  const WebComponent = createCustomElement(YourComponent, {
    injector: app.injector,

ezzabuzaid

  type TestId = string;
  function itRenders(
    testCase: [DOMSelector | TestId, string, string?][]
  ): void {
    describe.each(testCase)('', (selector, text, report) => {
      it(report ?? `renders ${text}`, () => {
        spectator.detectChanges();
        const element = spectator.query(
          selector instanceof DOMSelector ? selector : byTestId(selector)
        );

ezzabuzaid

async function appendArray(path: string, data: any[]) {
    if (!data.length) {
        return;
    }
    const handle = await require('fs').promises.open(path, "r+");
    const stat = await handle.stat();
    const cursor = stat.size - 1;
    const json = JSON.stringify(data);
    const buffer = Buffer.from(',' + json.substr(1));
    try {

ezzabuzaid

import { ComponentType } from '@angular/cdk/portal';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { DebugElement, InjectionToken } from '@angular/core';
import { ComponentFixture, TestBed, TestModuleMetadata } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { Subject } from 'rxjs';

export class Page<T> {
    private _fixture: ComponentFixture<T>;
    constructor(

ezzabuzaid

const tsConfig = require('../tsconfig.json');
const tsConfigPaths = require('tsconfig-paths');
tsConfigPaths.register({
    baseUrl: __dirname,
    paths: tsConfig.compilerOptions.paths,
});

ezzabuzaid

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'singularize'
})

export class SingularizePipe implements PipeTransform {

    public transform(value: any, count: number = 1): string {
        return count > 1 ? plural(value) : singular(value);