Angular Setup

Preconditions: Node.js and Angular CLI are available, and the application can run locally before viewer integration begins.

• 1Create the Angular application using the team-approved Angular CLI options.
• 2Run the starter application before installing viewer dependencies.
• 3Install the Viewer npm package and configure the host application values required by the workflow.
• 4Add environment configuration for the viewer web origin, backend/API origin, and credentials required by the host application.
• 5Keep configuration keys consistent across Angular environments so later workflow pages do not need framework-specific branching.

Preconditions: The Angular route or component that owns the viewer area is created.

• 1Create a dedicated container element in the component template and give it stable height and width.
• 2Read the container through ViewChild in the component class.
• 3Initialize the viewer in ngAfterViewInit, not ngOnInit, because the DOM element must exist first.
• 4Keep initializing and ready state in the component so Revision controls stay disabled until the viewer is ready.
• 5Run event-driven UI state updates inside NgZone when the viewer event is emitted outside Angular change detection.
• 6Dispose subscriptions, message listeners, timers, viewer references, and loading state in ngOnDestroy.

The viewer mounts after the Angular view exists, the workflow controls activate only after readiness, and routing away from the component releases all subscriptions and global listeners.

Verify these points before building the Revision workflow on top of Angular:

• ViewChild resolves to a valid nativeElement inside ngAfterViewInit.
• Component styles do not collapse the viewer container.
• Viewer events that update template state trigger Angular change detection.
• All RxJS subscriptions and global listeners are cleared in ngOnDestroy.
• Repeated route navigation does not create duplicate viewer instances.

If setup fails, confirm the Angular app builds without the viewer package, then inspect environment values, ViewChild timing, container dimensions, zone handling, and destroy cleanup.