import { ApplicationRef } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';
import { singleSpaAngular } from 'single-spa-angular';

const lifecycles = singleSpaAngular({
  bootstrapFunction: async () => {
    const ngModuleRef = await platformBrowserDynamic().bootstrapModule(
      AppModule,
      { ngZone: 'noop' },
    );

    const appRef = ngModuleRef.injector.get(ApplicationRef);
    const listener = () => appRef.tick();
    window.addEventListener('popstate', listener);

    ngModuleRef.onDestroy(() => {
      window.removeEventListener('popstate', listener);
    });

    return ngModuleRef;
  },
  template: '<app-root />',
  NgZone: 'noop',
  Router,
  NavigationStart,
});

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  @Input('appHighlight') highlightColor = '';

  private el: HTMLElement;

  constructor(el: ElementRef) {
    this.el = el.nativeElement;
  }

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.highlightColor || 'cyan');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight('');
  }

  private highlight(color: string) {
    this.el.style.backgroundColor = color;
  }
}

import {Component, NgModule} from '@angular/core'
import {render, screen} from '@testing-library/angular'
import {ngMocks} from 'ng-mocks'

@Component({
  selector: 'app-parent-component',
  template: '<app-child-component></app-child-component>',
})
class ParentComponent {}

@Component({
  selector: 'app-child-component',
  template: '<p>Child component</p>',
})
class ChildComponent {}

@NgModule({
  declarations: [ParentComponent, ChildComponent],
})
export class AppModule {}

describe('ParentComponent', () => {
  it('should not render ChildComponent when shallow rendering', async () => {
    const dependencies = ngMocks.guts(null, AppModule, ParentComponent)

    await render(ParentComponent, dependencies)

    expect(screen.queryByText('Child component')).toBeNull()
  })
})

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { singleSpaAngularElements } from 'single-spa-angular/elements';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

const lifecycles = singleSpaAngularElements({
  template: '<app-custom-element />',
  // We can actually not rely on the `zone.js` library, our custom element
  // will behave itself as a zone-less application.
  bootstrapFunction: () =>
    platformBrowserDynamic().bootstrapModule(AppModule, { ngZone: 'noop' }),
});

export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class AppRoutingModule { }