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 { }