diff --git a/apps/nativescript-demo-ng/src/tests/image-config.spec.ts b/apps/nativescript-demo-ng/src/tests/image-config.spec.ts new file mode 100644 index 0000000..f4ff313 --- /dev/null +++ b/apps/nativescript-demo-ng/src/tests/image-config.spec.ts @@ -0,0 +1,20 @@ +import { IMAGE_CONFIG } from '@angular/common'; +import { TestBed } from '@angular/core/testing'; +import { NativeScriptModule } from '@nativescript/angular'; + +describe('IMAGE_CONFIG', () => { + beforeEach(() => { + return TestBed.configureTestingModule({ + imports: [NativeScriptModule], + }).compileComponents(); + }); + + // Both flags are required: with either one unset, Angular reaches for `document` during + // bootstrap on any runtime that exposes a global PerformanceObserver. + it('disables both dev-mode image warnings', () => { + const config = TestBed.inject(IMAGE_CONFIG); + + expect(config.disableImageSizeWarning).toBe(true); + expect(config.disableImageLazyLoadWarning).toBe(true); + }); +}); diff --git a/packages/angular/src/lib/nativescript.ts b/packages/angular/src/lib/nativescript.ts index 7fb656d..bb7aacc 100644 --- a/packages/angular/src/lib/nativescript.ts +++ b/packages/angular/src/lib/nativescript.ts @@ -1,4 +1,4 @@ -import { ViewportScroller, XhrFactory, ɵNullViewportScroller as NullViewportScroller } from '@angular/common'; +import { IMAGE_CONFIG, ViewportScroller, XhrFactory, ɵNullViewportScroller as NullViewportScroller } from '@angular/common'; import { ApplicationModule, ErrorHandler, Inject, NgModule, NO_ERRORS_SCHEMA, Optional, Provider, RendererFactory2, SkipSelf, StaticProvider, ɵINJECTOR_SCOPE as INJECTOR_SCOPE } from '@angular/core'; import { Color, Device, View } from '@nativescript/core'; import { AppHostView } from './app-host-view'; @@ -40,7 +40,13 @@ export const NATIVESCRIPT_MODULE_STATIC_PROVIDERS: StaticProvider[] = [ { provide: DEVICE, useValue: Device }, { provide: XhrFactory, useClass: NativescriptXhrFactory, deps: [] }, ]; -export const NATIVESCRIPT_MODULE_PROVIDERS: Provider[] = [{ provide: ViewportScroller, useClass: NullViewportScroller }]; +export const NATIVESCRIPT_MODULE_PROVIDERS: Provider[] = [ + { provide: ViewportScroller, useClass: NullViewportScroller }, + // Angular's dev-mode image warnings scan the DOM for elements, which + // NativeScript has none of. Angular only skips them when both flags are set, + // and reaches for `document` as soon as a global PerformanceObserver exists. + { provide: IMAGE_CONFIG, useValue: { disableImageSizeWarning: true, disableImageLazyLoadWarning: true } }, +]; @NgModule({ imports: [ApplicationModule, DetachedLoader, NativeScriptCommonModule],