Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(docs-infra): lazy-load EmbeddedTutorialManager in code editor (#59505)

Browse source 
In this commit, we lazy-load the `EmbeddedTutorialManager` in the code editor component as done in other parts of the code.

PR Close #59505
This commit is contained in:
arturovt 2025-01-13 21:26:58 +02:00 committed by kirjs
parent 065e1187fc
commit 47e48b44dc
2 changed files with 17 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
adev/src/app/editor/code-editor/code-editor.component.spec.ts
View file

@ -148,6 +148,9 @@ describe('CodeEditor', () => {
});
it('should focused on a new tab when adding a new file', async () => {
// Wait until the asynchronous injection stuff is done.
await fixture.whenStable();
const button = fixture.debugElement.query(By.css('button.adev-add-file')).nativeElement;
button.click();

20
adev/src/app/editor/code-editor/code-editor.component.ts
View file

@ -13,6 +13,7 @@ import {
Component,
DestroyRef,
ElementRef,
EnvironmentInjector,
OnDestroy,
ViewChild,
inject,
@ -21,10 +22,9 @@ import {
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
import {MatTabGroup, MatTabsModule} from '@angular/material/tabs';
import {Title} from '@angular/platform-browser';
import {debounceTime, map} from 'rxjs';
import {debounceTime, from, map, switchMap} from 'rxjs';
import {TerminalType} from '../terminal/terminal-handler.service';
import {EmbeddedTutorialManager} from '../embedded-tutorial-manager.service';
import {CodeMirrorEditor} from './code-mirror-editor.service';
import {DiagnosticWithLocation, DiagnosticsState} from './services/diagnostics-state.service';
@ -34,6 +34,7 @@ import {ClickOutside, IconComponent} from '@angular/docs';
import {CdkMenu, CdkMenuItem, CdkMenuTrigger} from '@angular/cdk/menu';
import {IDXLauncher} from '../idx-launcher.service';
import {MatTooltip} from '@angular/material/tooltip';
import {injectEmbeddedTutorialManager} from '../inject-embedded-tutorial-manager';
export const REQUIRED_FILES = new Set([
'src/main.ts',
@ -91,7 +92,7 @@ export class CodeEditor implements AfterViewInit, OnDestroy {
private readonly idxLauncher = inject(IDXLauncher);
private readonly title = inject(Title);
private readonly location = inject(Location);
private readonly embeddedTutorialManager = inject(EmbeddedTutorialManager);
private readonly environmentInjector = inject(EnvironmentInjector);
private readonly errors$ = this.diagnosticsState.diagnostics$.pipe(
// Display errors one second after code update
@ -142,7 +143,8 @@ export class CodeEditor implements AfterViewInit, OnDestroy {
}
async downloadCurrentCodeEditorState(): Promise<void> {
const name = this.embeddedTutorialManager.tutorialId();
const embeddedTutorialManager = await injectEmbeddedTutorialManager(this.environmentInjector);
const name = embeddedTutorialManager.tutorialId();
await this.downloadManager.downloadCurrentStateOfTheSolution(name);
}
@ -236,8 +238,14 @@ export class CodeEditor implements AfterViewInit, OnDestroy {
}
private setSelectedTabOnTutorialChange() {
this.embeddedTutorialManager.tutorialChanged$
.pipe(takeUntilDestroyed(this.destroyRef))
// Using `from` to prevent injecting the embedded tutorial manager once the
// injector is destroyed (this may happen in unit tests when the test ends
// before `injectAsync` runs, causing an error).
from(injectEmbeddedTutorialManager(this.environmentInjector))
.pipe(
switchMap((embeddedTutorialManager) => embeddedTutorialManager.tutorialChanged$),
takeUntilDestroyed(this.destroyRef),
)
.subscribe(() => {
// selected file on project change is always the first
this.matTabGroup.selectedIndex = 0;