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

test(core): clean up explicit standalone flags from tests (#60062)

Browse source 
Now that standalone is the default, we don't need to specify it in tests anymore.

PR Close #60062
This commit is contained in:
Kristiyan Kostadinov 2025-02-22 09:02:44 +01:00 committed by kirjs
parent 1618595473
commit 4853129a7d
57 changed files with 317 additions and 1274 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/core/rxjs-interop/test/to_observable_spec.ts
View file

@ -25,7 +25,6 @@ describe('toObservable()', () => {
@Component({
template: '',
standalone: true,
})
class Cmp {}

9
packages/core/test/acceptance/after_render_hook_spec.ts
View file

@ -239,7 +239,6 @@ describe('after render hooks', () => {
let log: string[] = [];
@Component({
standalone: true,
template: ``,
})
class MyComp {
@ -852,12 +851,12 @@ describe('after render hooks', () => {
const appRef = TestBed.inject(ApplicationRef);
const counter = signal(0);
@Component({standalone: true, template: '{{counter()}}'})
@Component({template: '{{counter()}}'})
class Reader {
counter = counter;
}
@Component({standalone: true, template: ''})
@Component({template: ''})
class Writer {
ngAfterViewInit(): void {
counter.set(1);
@ -1364,7 +1363,6 @@ describe('after render hooks', () => {
@Component({
selector: 'test-component',
standalone: true,
template: ` {{counter()}} `,
})
class TestCmp {
@ -1393,7 +1391,6 @@ describe('after render hooks', () => {
it('allows updating state and calling markForCheck in afterRender', async () => {
@Component({
selector: 'test-component',
standalone: true,
template: ` {{counter}} `,
})
class TestCmp {
@ -1425,7 +1422,6 @@ describe('after render hooks', () => {
const counter = signal(0);
@Component({
selector: 'test-component',
standalone: true,
template: `{{counter()}}`,
})
class TestCmp {
@ -1467,7 +1463,6 @@ describe('after render hooks', () => {
@Component({
selector: 'test-component',
standalone: true,
template: ` {{counter()}} `,
})
class TestCmp {

56
packages/core/test/acceptance/authoring/model_inputs_spec.ts
View file

@ -24,14 +24,13 @@ import {TestBed} from '@angular/core/testing';
describe('model inputs', () => {
it('should support two-way binding to a signal', () => {
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir {
value = model(0);
}
@Component({
template: '<div [(value)]="value" dir></div>',
standalone: true,
imports: [Dir],
})
class App {
@ -60,14 +59,13 @@ describe('model inputs', () => {
});
it('should support two-way binding to a non-signal value', () => {
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir {
value = model(0);
}
@Component({
template: '<div [(value)]="value" dir></div>',
standalone: true,
imports: [Dir],
})
class App {
@ -96,7 +94,7 @@ describe('model inputs', () => {
});
it('should support two-way binding a signal to a non-model input/output pair', () => {
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir {
@Input() value = 0;
@Output() valueChange = new EventEmitter<number>();
@ -104,7 +102,6 @@ describe('model inputs', () => {
@Component({
template: '<div [(value)]="value" dir></div>',
standalone: true,
imports: [Dir],
})
class App {
@ -135,14 +132,13 @@ describe('model inputs', () => {
});
it('should support a one-way property binding to a model', () => {
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir {
value = model(0);
}
@Component({
template: '<div [value]="value" dir></div>',
standalone: true,
imports: [Dir],
})
class App {
@ -174,14 +170,13 @@ describe('model inputs', () => {
it('should emit to the change output when the model changes', () => {
const emittedValues: number[] = [];
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir {
value = model(0);
}
@Component({
template: '<div (valueChange)="changed($event)" dir></div>',
standalone: true,
imports: [Dir],
})
class App {
@ -215,14 +210,13 @@ describe('model inputs', () => {
it('should not emit to the change event when then property binding changes', () => {
const emittedValues: number[] = [];
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir {
value = model(0);
}
@Component({
template: '<div [value]="value()" (valueChange)="changed($event)" dir></div>',
standalone: true,
imports: [Dir],
})
class App {
@ -247,14 +241,13 @@ describe('model inputs', () => {
it('should support binding to the model input and output separately', () => {
const emittedValues: number[] = [];
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir {
value = model(0);
}
@Component({
template: '<div [value]="value()" (valueChange)="changed($event)" dir></div>',
standalone: true,
imports: [Dir],
})
class App {
@ -288,14 +281,13 @@ describe('model inputs', () => {
});
it('should support two-way binding to a model with an alias', () => {
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir {
value = model(0, {alias: 'alias'});
}
@Component({
template: '<div [(alias)]="value" dir></div>',
standalone: true,
imports: [Dir],
})
class App {
@ -327,14 +319,13 @@ describe('model inputs', () => {
it('should support binding to an aliased model input and output separately', () => {
const emittedValues: number[] = [];
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir {
value = model(0, {alias: 'alias'});
}
@Component({
template: '<div [alias]="value()" (aliasChange)="changed($event)" dir></div>',
standalone: true,
imports: [Dir],
})
class App {
@ -368,7 +359,7 @@ describe('model inputs', () => {
});
it('should throw if a required model input is accessed too early', () => {
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir {
value = model.required<number>();
@ -379,7 +370,6 @@ describe('model inputs', () => {
@Component({
template: '<div [(value)]="value" dir></div>',
standalone: true,
imports: [Dir],
})
class App {
@ -392,7 +382,7 @@ describe('model inputs', () => {
});
it('should throw if a required model input is updated too early', () => {
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir {
value = model.required<number>();
@ -403,7 +393,6 @@ describe('model inputs', () => {
@Component({
template: '<div [(value)]="value" dir></div>',
standalone: true,
imports: [Dir],
})
class App {
@ -418,14 +407,13 @@ describe('model inputs', () => {
it('should stop emitting to the output on destroy', () => {
let emittedEvents = 0;
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir {
value = model(0);
}
@Component({
template: '<div (valueChange)="changed()" dir></div>',
standalone: true,
imports: [Dir],
})
class App {
@ -457,12 +445,11 @@ describe('model inputs', () => {
value = model(0);
}
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir extends BaseDir {}
@Component({
template: '<div [(value)]="value" dir></div>',
standalone: true,
imports: [Dir],
})
class App {
@ -494,7 +481,6 @@ describe('model inputs', () => {
it('should reflect changes to a two-way-bound signal in the DOM', () => {
@Directive({
selector: '[dir]',
standalone: true,
host: {
'(click)': 'increment()',
},
@ -509,7 +495,6 @@ describe('model inputs', () => {
@Component({
template: '<button [(value)]="value" dir></button> Current value: {{value()}}',
standalone: true,
imports: [Dir],
})
class App {
@ -532,7 +517,7 @@ describe('model inputs', () => {
it('should support ngOnChanges for two-way model bindings', () => {
const changes: SimpleChange[] = [];
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir implements OnChanges {
value = model(0);
@ -545,7 +530,6 @@ describe('model inputs', () => {
@Component({
template: '<div [(value)]="value" dir></div>',
standalone: true,
imports: [Dir],
})
class App {
@ -582,7 +566,7 @@ describe('model inputs', () => {
});
it('should not throw for mixed model and output subscriptions', () => {
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir {
model = model(0);
@Output() output = new EventEmitter();
@ -594,7 +578,6 @@ describe('model inputs', () => {
template: `
<div dir (model)="noop()" (output)="noop()" (model2)="noop()" (output2)="noop()"></div>
`,
standalone: true,
imports: [Dir],
})
class App {
@ -607,7 +590,7 @@ describe('model inputs', () => {
});
it('should support two-way binding to a signal @for loop variable', () => {
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir {
value = model(0);
}
@ -618,7 +601,6 @@ describe('model inputs', () => {
<div [(value)]="value" dir></div>
}
`,
standalone: true,
imports: [Dir],
})
class App {
@ -647,14 +629,13 @@ describe('model inputs', () => {
});
it('should assign a debugName to the underlying watcher node when a debugName is provided', () => {
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir {
value = model(0, {debugName: 'TEST_DEBUG_NAME'});
}
@Component({
template: '<div [(value)]="value" dir></div>',
standalone: true,
imports: [Dir],
})
class App {
@ -670,14 +651,13 @@ describe('model inputs', () => {
});
it('should assign a debugName to the underlying watcher node when a debugName is provided to a required model', () => {
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir {
value = model.required({debugName: 'TEST_DEBUG_NAME'});
}
@Component({
template: '<div [(value)]="value" dir></div>',
standalone: true,
imports: [Dir],
})
class App {

20
packages/core/test/acceptance/authoring/output_function_spec.ts
View file

@ -30,7 +30,6 @@ describe('output() function', () => {
it('should support emitting values', () => {
@Directive({
selector: '[dir]',
standalone: true,
})
class Dir {
onBla = output<number>();
@ -38,7 +37,6 @@ describe('output() function', () => {
@Component({
template: '<div dir (onBla)="values.push($event)"></div>',
standalone: true,
imports: [Dir],
})
class App {
@ -60,7 +58,6 @@ describe('output() function', () => {
it('should support emitting void values', () => {
@Directive({
selector: '[dir]',
standalone: true,
})
class Dir {
onBla = output();
@ -68,7 +65,6 @@ describe('output() function', () => {
@Component({
template: '<div dir (onBla)="count = count + 1"></div>',
standalone: true,
imports: [Dir],
})
class App {
@ -90,7 +86,6 @@ describe('output() function', () => {
it('should error when emitting to a destroyed output', () => {
@Directive({
selector: '[dir]',
standalone: true,
})
class Dir {
onBla = output<number>();
@ -102,7 +97,6 @@ describe('output() function', () => {
<div dir (onBla)="values.push($event)"></div>
}
`,
standalone: true,
imports: [Dir],
})
class App {
@ -128,7 +122,6 @@ describe('output() function', () => {
it('should error when subscribing to a destroyed output', () => {
@Directive({
selector: '[dir]',
standalone: true,
})
class Dir {
onBla = output<number>();
@ -140,7 +133,6 @@ describe('output() function', () => {
<div dir (onBla)="values.push($event)"></div>
}
`,
standalone: true,
imports: [Dir],
})
class App {
@ -168,7 +160,6 @@ describe('output() function', () => {
it('should run listeners outside of `emit` reactive context', () => {
@Directive({
selector: '[dir]',
standalone: true,
})
class Dir {
onBla = output();
@ -184,7 +175,6 @@ describe('output() function', () => {
@Component({
template: '<div dir (onBla)="fnUsingSomeSignal()"></div>',
standalone: true,
imports: [Dir],
})
class App {
@ -212,7 +202,6 @@ describe('output() function', () => {
it('should support using a `Subject` as source', () => {
@Directive({
selector: '[dir]',
standalone: true,
})
class Dir {
onBla$ = new Subject<number>();
@ -221,7 +210,6 @@ describe('output() function', () => {
@Component({
template: '<div dir (onBla)="values.push($event)"></div>',
standalone: true,
imports: [Dir],
})
class App {
@ -243,7 +231,6 @@ describe('output() function', () => {
it('should support using a `BehaviorSubject` as source', () => {
@Directive({
selector: '[dir]',
standalone: true,
})
class Dir {
onBla$ = new BehaviorSubject<number>(1);
@ -252,7 +239,6 @@ describe('output() function', () => {
@Component({
template: '<div dir (onBla)="values.push($event)"></div>',
standalone: true,
imports: [Dir],
})
class App {
@ -274,7 +260,6 @@ describe('output() function', () => {
it('should support using an `EventEmitter` as source', () => {
@Directive({
selector: '[dir]',
standalone: true,
})
class Dir {
onBla$ = new EventEmitter<number>();
@ -283,7 +268,6 @@ describe('output() function', () => {
@Component({
template: '<div dir (onBla)="values.push($event)"></div>',
standalone: true,
imports: [Dir],
})
class App {
@ -305,7 +289,6 @@ describe('output() function', () => {
it('should support lazily creating an observer upon subscription', () => {
@Directive({
selector: '[dir]',
standalone: true,
})
class Dir {
streamStarted = false;
@ -322,7 +305,6 @@ describe('output() function', () => {
<div dir></div>
<div dir (onBla)="true"></div>
`,
standalone: true,
imports: [Dir],
})
class App {}
@ -340,7 +322,6 @@ describe('output() function', () => {
it('should report subscription listener errors to `ErrorHandler` and continue', () => {
@Directive({
selector: '[dir]',
standalone: true,
})
class Dir {
onBla = output();
@ -350,7 +331,6 @@ describe('output() function', () => {
template: `
<div dir (onBla)="true"></div>
`,
standalone: true,
imports: [Dir],
})
class App {}

23
packages/core/test/acceptance/authoring/signal_inputs_spec.ts
View file

@ -36,7 +36,6 @@ describe('signal inputs', () => {
it('should be possible to bind to an input', () => {
@Component({
selector: 'input-comp',
standalone: true,
template: 'input:{{input()}}',
})
class InputComp {
@ -44,7 +43,6 @@ describe('signal inputs', () => {
}
@Component({
standalone: true,
template: `<input-comp [input]="value" />`,
imports: [InputComp],
})
@ -66,7 +64,6 @@ describe('signal inputs', () => {
it('should be possible to use an input in a computed expression', () => {
@Component({
selector: 'input-comp',
standalone: true,
template: 'changed:{{changed()}}',
})
class InputComp {
@ -75,7 +72,6 @@ describe('signal inputs', () => {
}
@Component({
standalone: true,
template: `<input-comp [input]="value" />`,
imports: [InputComp],
})
@ -99,7 +95,6 @@ describe('signal inputs', () => {
@Component({
selector: 'input-comp',
standalone: true,
template: '',
})
class InputComp {
@ -113,7 +108,6 @@ describe('signal inputs', () => {
}
@Component({
standalone: true,
template: `<input-comp [input]="value" />`,
imports: [InputComp],
})
@ -137,7 +131,6 @@ describe('signal inputs', () => {
it('should support transforms', () => {
@Component({
selector: 'input-comp',
standalone: true,
template: 'input:{{input()}}',
})
class InputComp {
@ -145,7 +138,6 @@ describe('signal inputs', () => {
}
@Component({
standalone: true,
template: `<input-comp [input]="value" />`,
imports: [InputComp],
})
@ -165,7 +157,6 @@ describe('signal inputs', () => {
let transformRunCount = 0;
@Component({
selector: 'input-comp',
standalone: true,
template: '',
})
class InputComp {
@ -175,7 +166,6 @@ describe('signal inputs', () => {
}
@Component({
standalone: true,
template: `<input-comp [input]="value" />`,
imports: [InputComp],
})
@ -193,7 +183,6 @@ describe('signal inputs', () => {
it('should throw error if a required input is accessed too early', () => {
@Component({
selector: 'input-comp',
standalone: true,
template: 'input:{{input()}}',
})
class InputComp {
@ -205,7 +194,6 @@ describe('signal inputs', () => {
}
@Component({
standalone: true,
template: `<input-comp [input]="value" />`,
imports: [InputComp],
})
@ -226,13 +214,11 @@ describe('signal inputs', () => {
@Component({
selector: 'input-comp',
standalone: true,
template: 'input:{{input()}}',
})
class InputComp extends BaseDir {}
@Component({
standalone: true,
template: `<input-comp [input]="value" />`,
imports: [InputComp],
})
@ -252,7 +238,7 @@ describe('signal inputs', () => {
});
it('should support two-way binding to signal input and @Output decorated member', () => {
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir {
value = input(0);
@Output() valueChange = new EventEmitter<number>();
@ -260,7 +246,6 @@ describe('signal inputs', () => {
@Component({
template: '<div [(value)]="value" dir></div>',
standalone: true,
imports: [Dir],
})
class App {
@ -290,14 +275,13 @@ describe('signal inputs', () => {
});
it('should assign a debugName to the input signal node when a debugName is provided', () => {
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir {
value = input(0, {debugName: 'TEST_DEBUG_NAME'});
}
@Component({
template: '<div [value]="1" dir></div>',
standalone: true,
imports: [Dir],
})
class App {
@ -312,14 +296,13 @@ describe('signal inputs', () => {
});
it('should assign a debugName to the input signal node when a debugName is provided to a required input', () => {
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir {
value = input.required({debugName: 'TEST_DEBUG_NAME'});
}
@Component({
template: '<div [value]="1" dir></div>',
standalone: true,
imports: [Dir],
})
class App {

33
packages/core/test/acceptance/authoring/signal_queries_spec.ts
View file

@ -28,7 +28,6 @@ describe('queries as signals', () => {
describe('view', () => {
it('should query for an optional element in a template', () => {
@Component({
standalone: true,
template: `<div #el></div>`,
})
class AppComponent {
@ -51,7 +50,6 @@ describe('queries as signals', () => {
let result: {} | undefined = {};
@Component({
standalone: true,
template: `<div #el></div>`,
})
class AppComponent {
@ -68,7 +66,6 @@ describe('queries as signals', () => {
it('should query for a required element in a template', () => {
@Component({
standalone: true,
template: `<div #el></div>`,
})
class AppComponent {
@ -88,7 +85,6 @@ describe('queries as signals', () => {
it('should throw if required query is read in the constructor', () => {
@Component({
standalone: true,
template: `<div #el></div>`,
})
class AppComponent {
@ -107,7 +103,6 @@ describe('queries as signals', () => {
it('should query for multiple elements in a template', () => {
@Component({
standalone: true,
template: `
<div #el></div>
@if (show) {
@ -144,7 +139,6 @@ describe('queries as signals', () => {
let result: readonly ElementRef[] | undefined;
@Component({
standalone: true,
template: `<div #el></div>`,
})
class AppComponent {
@ -161,7 +155,6 @@ describe('queries as signals', () => {
it('should return the same array instance when there were no changes in results', () => {
@Component({
standalone: true,
template: `<div #el></div>`,
})
class AppComponent {
@ -183,7 +176,6 @@ describe('queries as signals', () => {
let computeCount = 0;
@Component({
standalone: true,
template: `
<div #el></div>
@if (show) {
@ -212,7 +204,6 @@ describe('queries as signals', () => {
it('should return the same array instance when there were no changes in results after view manipulation', () => {
@Component({
standalone: true,
template: `
<div #el></div>
@if (show) {
@ -242,7 +233,6 @@ describe('queries as signals', () => {
it('should be empty when no query matches exist', () => {
@Component({
standalone: true,
template: ``,
})
class AppComponent {
@ -259,7 +249,6 @@ describe('queries as signals', () => {
it('should assign a debugName to the underlying signal node when a debugName is provided', () => {
@Component({
standalone: true,
template: `<div #el></div>`,
})
class AppComponent {
@ -282,7 +271,6 @@ describe('queries as signals', () => {
it('should assign a debugName to the underlying signal node when a debugName is provided to a required viewChild query', () => {
@Component({
standalone: true,
template: `<div #el></div>`,
})
class AppComponent {
@ -299,7 +287,6 @@ describe('queries as signals', () => {
it('should run content queries defined on components', () => {
@Component({
selector: 'query-cmp',
standalone: true,
template: `{{noOfEls()}}`,
})
class QueryComponent {
@ -316,7 +303,6 @@ describe('queries as signals', () => {
}
@Component({
standalone: true,
imports: [QueryComponent],
template: `
<query-cmp>
@ -347,7 +333,6 @@ describe('queries as signals', () => {
it('should run content queries defined on directives', () => {
@Directive({
selector: '[query]',
standalone: true,
host: {'[textContent]': `noOfEls()`},
})
class QueryDir {
@ -364,7 +349,6 @@ describe('queries as signals', () => {
}
@Component({
standalone: true,
imports: [QueryDir],
template: `
<div query>
@ -393,18 +377,17 @@ describe('queries as signals', () => {
});
it('should not return partial results during the first-time view rendering', () => {
@Directive({selector: '[marker]', standalone: true})
@Directive({selector: '[marker]'})
class MarkerForResults {}
@Directive({
selector: '[declare]',
standalone: true,
})
class DeclareQuery {
results = contentChildren(MarkerForResults);
}
@Directive({selector: '[inspect]', standalone: true})
@Directive({selector: '[inspect]'})
class InspectsQueryResults {
constructor(declaration: DeclareQuery) {
// we should _not_ get partial query results while the view is still creating
@ -413,7 +396,6 @@ describe('queries as signals', () => {
}
@Component({
standalone: true,
imports: [MarkerForResults, InspectsQueryResults, DeclareQuery],
template: `
<div declare>
@ -437,7 +419,6 @@ describe('queries as signals', () => {
it('should be empty when no query matches exist', () => {
@Directive({
selector: '[declare]',
standalone: true,
})
class DeclareQuery {
result = contentChild('unknown');
@ -445,7 +426,6 @@ describe('queries as signals', () => {
}
@Component({
standalone: true,
imports: [DeclareQuery],
template: `<div declare></div>`,
})
@ -464,7 +444,6 @@ describe('queries as signals', () => {
it('should assign a debugName to the underlying signal node when a debugName is provided', () => {
@Component({
selector: 'query-cmp',
standalone: true,
template: ``,
})
class QueryComponent {
@ -476,7 +455,6 @@ describe('queries as signals', () => {
}
@Component({
standalone: true,
imports: [QueryComponent],
template: `
<query-cmp>
@ -508,7 +486,6 @@ describe('queries as signals', () => {
let recomputeCount = 0;
@Component({
standalone: true,
template: `
<div #el></div>
@if (show) {
@ -544,7 +521,6 @@ describe('queries as signals', () => {
let recomputeCount = 0;
@Component({
standalone: true,
template: `
<div #el></div>
@if (show) {
@ -583,7 +559,6 @@ describe('queries as signals', () => {
// https://github.com/angular/angular/issues/54450
@Component({
selector: 'query-cmp',
standalone: true,
template: ``,
})
class QueryComponent {
@ -592,7 +567,6 @@ describe('queries as signals', () => {
}
@Component({
standalone: true,
template: ``,
})
class TestComponent {
@ -615,7 +589,6 @@ describe('queries as signals', () => {
describe('mix of signal and decorator queries', () => {
it('should allow specifying both types of queries in one component', () => {
@Component({
standalone: true,
template: `
<div #el></div>
@if (show) {
@ -649,7 +622,6 @@ describe('queries as signals', () => {
it('should allow combination via inheritance of both types of queries in one component', () => {
@Component({
standalone: true,
template: `
<div #el></div>
@if (show) {
@ -663,7 +635,6 @@ describe('queries as signals', () => {
}
@Component({
standalone: true,
template: `
<div #el></div>
@if (show) {

6
packages/core/test/acceptance/bootstrap_spec.ts
View file

@ -61,10 +61,10 @@ describe('bootstrap', () => {
it(
'should allow injecting VCRef into the root (bootstrapped) component',
withBody('before|<test-cmp></test-cmp>|after', async () => {
@Component({selector: 'dynamic-cmp', standalone: true, template: 'dynamic'})
@Component({selector: 'dynamic-cmp', template: 'dynamic'})
class DynamicCmp {}
@Component({selector: 'test-cmp', standalone: true, template: '(test)'})
@Component({selector: 'test-cmp', template: '(test)'})
class TestCmp {
constructor(public vcRef: ViewContainerRef) {}
}
@ -305,7 +305,6 @@ describe('bootstrap', () => {
'should throw when standalone component is used in @NgModule.bootstrap',
withBody('<my-app></my-app>', async () => {
@Component({
standalone: true,
selector: 'standalone-comp',
template: '...',
})
@ -384,7 +383,6 @@ describe('bootstrap', () => {
'should throw when standalone component wrapped in `forwardRef` is used in @NgModule.bootstrap',
withBody('<my-app></my-app>', async () => {
@Component({
standalone: true,
selector: 'standalone-comp',
template: '...',
})

46
packages/core/test/acceptance/change_detection_signals_in_zones_spec.ts
View file

@ -29,7 +29,6 @@ describe('CheckAlways components', () => {
it('can read a signal', () => {
@Component({
template: `{{value()}}`,
standalone: true,
})
class CheckAlwaysCmp {
value = signal('initial');
@ -48,7 +47,6 @@ describe('CheckAlways components', () => {
it('should properly remove stale dependencies from the signal graph', () => {
@Component({
template: `{{show() ? name() + ' aged ' + age() : 'anonymous'}}`,
standalone: true,
})
class CheckAlwaysCmp {
name = signal('John');
@ -81,7 +79,6 @@ describe('CheckAlways components', () => {
const value = signal('initial');
@Component({
template: `{{value()}}`,
standalone: true,
selector: 'check-always',
})
class CheckAlwaysCmp {
@ -89,7 +86,6 @@ describe('CheckAlways components', () => {
}
@Component({
template: `<check-always />`,
standalone: true,
imports: [CheckAlwaysCmp],
changeDetection: ChangeDetectionStrategy.OnPush,
})
@ -110,7 +106,6 @@ describe('CheckAlways components', () => {
@Component({
template: '{{val()}}',
standalone: true,
selector: 'a-comp',
})
class A {
@ -118,7 +113,6 @@ describe('CheckAlways components', () => {
}
@Component({
template: '{{val()}}',
standalone: true,
selector: 'b-comp',
})
class B {
@ -132,7 +126,7 @@ describe('CheckAlways components', () => {
}
}
@Component({template: '<a-comp />-<b-comp />', standalone: true, imports: [A, B]})
@Component({template: '<a-comp />-<b-comp />', imports: [A, B]})
class App {}
const fixture = TestBed.createComponent(App);
@ -155,7 +149,6 @@ describe('CheckAlways components', () => {
@Component({
template: '',
selector: 'child',
standalone: true,
})
class Child {
ngDoCheck() {
@ -166,7 +159,7 @@ describe('CheckAlways components', () => {
}
}
}
@Component({template: '{{val()}}<child />', standalone: true, imports: [Child]})
@Component({template: '{{val()}}<child />', imports: [Child]})
class App {
val = val;
}
@ -187,7 +180,6 @@ describe('CheckAlways components', () => {
const val = signal(0);
@Component({
template: '{{val()}}',
standalone: true,
})
class App {
val = val;
@ -212,7 +204,6 @@ describe('OnPush components with signals', () => {
@Component({
template: `{{value()}}{{incrementTemplateExecutions()}}`,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
})
class OnPushCmp {
numTemplateExecutions = 0;
@ -243,7 +234,6 @@ describe('OnPush components with signals', () => {
@Component({
template: `{{memo()}}{{incrementTemplateExecutions()}}`,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
})
class OnPushCmp {
numTemplateExecutions = 0;
@ -278,7 +268,6 @@ describe('OnPush components with signals', () => {
selector: 'child',
template: `child`,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
})
class ChildReadingSignalCmp {
constructor() {
@ -293,7 +282,6 @@ describe('OnPush components with signals', () => {
<ng-template [ngIf]="true"><child></child></ng-template>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [NgIf, ChildReadingSignalCmp],
})
class OnPushCmp {
@ -323,7 +311,6 @@ describe('OnPush components with signals', () => {
@Component({
selector: 'with-input-setter',
standalone: true,
template: '{{test}}',
})
class WithInputSetter {
@ -342,7 +329,6 @@ describe('OnPush components with signals', () => {
<ng-template [ngIf]="true"><with-input-setter [testInput]="'input'" /></ng-template>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [NgIf, WithInputSetter],
})
class OnPushCmp {
@ -373,7 +359,6 @@ describe('OnPush components with signals', () => {
@Component({
selector: 'with-query-setter',
standalone: true,
template: '<div #el>child</div>',
})
class WithQuerySetter {
@ -393,7 +378,6 @@ describe('OnPush components with signals', () => {
<ng-template [ngIf]="true"><with-query-setter /></ng-template>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [NgIf, WithQuerySetter],
})
class OnPushCmp {
@ -425,7 +409,6 @@ describe('OnPush components with signals', () => {
selector: 'child',
host: {'[class.blue]': 'useBlue()'},
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
})
class MyCmp {
useBlue = useBlue;
@ -455,7 +438,6 @@ describe('OnPush components with signals', () => {
selector: 'child',
host: {'[class.blue]': 'useBlue()'},
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
})
class ChildCmp {
useBlue = signal(false);
@ -471,7 +453,6 @@ describe('OnPush components with signals', () => {
template: `<child />`,
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [ChildCmp],
standalone: true,
})
class ParentCmp {}
const fixture = TestBed.createComponent(ParentCmp);
@ -495,7 +476,6 @@ describe('OnPush components with signals', () => {
selector: 'child',
host: {'[class.blue]': 'useBlue()'},
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
})
class ChildCmp {
useBlue = signal(false);
@ -505,7 +485,6 @@ describe('OnPush components with signals', () => {
template: `<child /> {{parentSignalValue()}}`,
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [ChildCmp],
standalone: true,
selector: 'parent',
})
class ParentCmp {
@ -517,7 +496,6 @@ describe('OnPush components with signals', () => {
template: `<parent />`,
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [ParentCmp],
standalone: true,
})
class TestWrapper {}
@ -550,7 +528,6 @@ describe('OnPush components with signals', () => {
const counter = signal(0);
@Directive({
standalone: true,
selector: '[misunderstood]',
})
class MisunderstoodDir {
@ -561,7 +538,6 @@ describe('OnPush components with signals', () => {
@Component({
selector: 'test-component',
standalone: true,
imports: [MisunderstoodDir],
template: `
{{counter()}}<div misunderstood></div>{{ 'force advance()' }}
@ -583,7 +559,6 @@ describe('OnPush components with signals', () => {
const counter = signal(0);
@Directive({
standalone: true,
selector: '[misunderstood]',
})
class MisunderstoodDir {
@ -594,7 +569,6 @@ describe('OnPush components with signals', () => {
@Component({
selector: 'test-component',
standalone: true,
imports: [MisunderstoodDir],
template: `
{{counter()}}<div misunderstood></div>
@ -614,7 +588,6 @@ describe('OnPush components with signals', () => {
it('should allow writing to signals in afterViewInit', () => {
@Component({
template: '{{loading()}}',
standalone: true,
})
class MyComp {
loading = signal(true);
@ -634,7 +607,6 @@ describe('OnPush components with signals', () => {
@Component({
template: '{{val()}}{{incrementChecks()}}',
standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush,
})
class App {
@ -664,7 +636,6 @@ describe('OnPush components with signals', () => {
@if (true) { }
{{val()}}
`,
standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush,
})
class MyComp {
@ -685,7 +656,6 @@ describe('OnPush components with signals', () => {
{{createEmbeddedView(template)}}
{{val()}}
`,
standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush,
})
class MyComp {
@ -708,7 +678,6 @@ describe('OnPush components with signals', () => {
@Component({
selector: 'signal-component',
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [NgIf],
template: `<div *ngIf="true"> {{value()}} </div>`,
})
@ -727,7 +696,6 @@ describe('OnPush components with signals', () => {
@Component({
selector: 'signal-component',
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [NgFor],
template: `<div *ngFor="let i of [1,2,3]"> {{value()}} </div>`,
})
@ -746,7 +714,6 @@ describe('OnPush components with signals', () => {
@Component({
selector: 'signal-component',
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [NgIf],
template: `
{{componentSignal()}}
@ -776,7 +743,6 @@ describe('OnPush components with signals', () => {
it('re-executes deep embedded template if signal updates', () => {
@Component({
selector: 'signal-component',
standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [NgIf],
template: `
@ -807,7 +773,6 @@ describe('OnPush components with signals', () => {
template: `
<ng-template #template>{{value()}}</ng-template>
`,
standalone: true,
})
class Test {
value = signal('initial');
@ -839,7 +804,6 @@ describe('OnPush components with signals', () => {
template: `
<ng-template #template>{{value()}}</ng-template>
`,
standalone: true,
})
class Test {
value = signal('initial');
@ -873,7 +837,6 @@ describe('OnPush components with signals', () => {
@Component({
selector: 'signal-component',
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
template: `{{value()}}`,
})
class SignalComponent {
@ -891,7 +854,6 @@ describe('OnPush components with signals', () => {
<signal-component></signal-component>
{{incrementChecks()}}`,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [SignalComponent],
})
class OnPushParent {
@ -956,7 +918,6 @@ describe('OnPush components with signals', () => {
@Component({
template: '',
selector: 'child',
standalone: true,
})
class Child {
ngOnInit() {
@ -967,7 +928,6 @@ describe('OnPush components with signals', () => {
@Component({
template: '{{val()}} <child />',
imports: [Child],
standalone: true,
})
class SignalComponent {
val = val;
@ -986,7 +946,6 @@ describe('OnPush components with signals', () => {
@Component({
template: '{{double()}}',
selector: 'child',
standalone: true,
})
class Child {
double = double;
@ -995,7 +954,6 @@ describe('OnPush components with signals', () => {
@Component({
template: '|{{double()}}|<child />|',
imports: [Child],
standalone: true,
})
class SignalComponent {
double = double;

6
packages/core/test/acceptance/change_detection_spec.ts
View file

@ -115,7 +115,6 @@ describe('change detection', () => {
@Component({
selector: 'onpush',
template: '',
standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush,
})
class OnPushComponent {
@ -126,7 +125,7 @@ describe('change detection', () => {
}
}
@Component({template: '<ng-template #template></ng-template>', standalone: true})
@Component({template: '<ng-template #template></ng-template>'})
class Container {
@ViewChild('template', {read: ViewContainerRef, static: true}) vcr!: ViewContainerRef;
}
@ -235,7 +234,6 @@ describe('change detection', () => {
selector: `test-cmpt`,
template: `{{counter}}|<ng-template #vc></ng-template>`,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
})
class TestCmpt {
counter = 0;
@ -249,7 +247,6 @@ describe('change detection', () => {
@Component({
selector: 'dynamic-cmpt',
template: `dynamic|{{binding}}`,
standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush,
})
class DynamicCmpt {
@ -1410,7 +1407,6 @@ describe('change detection', () => {
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
template: '{{state}}{{resolveReadPromise()}}',
})
class MyApp {

10
packages/core/test/acceptance/change_detection_transplanted_view_spec.ts
View file

@ -986,7 +986,6 @@ describe('change detection for transplanted views', () => {
it('does not cause error if running change detection on detached view', () => {
@Component({
standalone: true,
selector: 'insertion',
template: `<ng-container #vc></ng-container>`,
})
@ -999,7 +998,6 @@ describe('change detection for transplanted views', () => {
}
@Component({
standalone: true,
template: `
<ng-template #transplantedTemplate></ng-template>
<insertion [template]="transplantedTemplate"></insertion>
@ -1017,7 +1015,6 @@ describe('change detection for transplanted views', () => {
it('backwards reference still updated if detaching root during change detection', () => {
@Component({
standalone: true,
selector: 'insertion',
template: `<ng-container #vc></ng-container>`,
changeDetection: ChangeDetectionStrategy.OnPush,
@ -1033,7 +1030,6 @@ describe('change detection for transplanted views', () => {
@Component({
template: '<ng-template #template>{{value}}</ng-template>',
selector: 'declaration',
standalone: true,
})
class Declaration {
@ViewChild('template', {static: true}) transplantedTemplate!: TemplateRef<{}>;
@ -1041,7 +1037,6 @@ describe('change detection for transplanted views', () => {
}
@Component({
standalone: true,
template: `
<insertion [template]="declaration?.transplantedTemplate"></insertion>
<declaration [value]="value"></declaration>
@ -1079,7 +1074,6 @@ describe('change detection for transplanted views', () => {
@Component({
selector: 'insertion',
imports: [NgTemplateOutlet],
standalone: true,
template: ` <ng-container [ngTemplateOutlet]="template"> </ng-container>`,
})
class Insertion {
@ -1090,7 +1084,6 @@ describe('change detection for transplanted views', () => {
@Component({
imports: [Insertion, AsyncPipe],
template: `<ng-template #myTmpl> {{newObservable() | async}} </ng-template>`,
standalone: true,
selector: 'declaration',
})
class Declaration {
@ -1100,7 +1093,6 @@ describe('change detection for transplanted views', () => {
}
}
@Component({
standalone: true,
imports: [Declaration, Insertion],
template: '<insertion [template]="declaration.template"/><declaration #declaration/>',
})
@ -1137,7 +1129,6 @@ describe('change detection for transplanted views', () => {
fail('console errored with ' + v);
});
@Component({
standalone: true,
selector: 'insertion',
template: `<ng-container #vc></ng-container>`,
changeDetection: ChangeDetectionStrategy.OnPush,
@ -1151,7 +1142,6 @@ describe('change detection for transplanted views', () => {
}
@Component({
standalone: true,
template: `
<ng-template #template>hello world</ng-template>
<insertion [template]="transplantedTemplate"></insertion>

12
packages/core/test/acceptance/component_spec.ts
View file

@ -491,7 +491,6 @@ describe('component', () => {
@Component({
selector: 'comp',
template: '<comp *ngIf="recurse"/>hello',
standalone: true,
imports: [Comp, NgIf],
})
class Comp {
@ -500,7 +499,6 @@ describe('component', () => {
@Component({
template: '<comp [recurse]="true"/>',
standalone: true,
imports: [Comp],
})
class App {}
@ -521,7 +519,6 @@ describe('component', () => {
@Component({
selector: 'comp',
template: '<comp *ngIf="recurse"/>hello',
standalone: true,
imports: [forwardRef(() => Comp), NgIf],
})
class Comp {
@ -530,7 +527,6 @@ describe('component', () => {
@Component({
template: '<comp [recurse]="true"/>',
standalone: true,
imports: [Comp],
})
class App {}
@ -805,7 +801,6 @@ describe('component', () => {
describe('createComponent', () => {
it('should create an instance of a standalone component', () => {
@Component({
standalone: true,
template: 'Hello {{ name }}!',
})
class StandaloneComponent {
@ -858,7 +853,6 @@ describe('component', () => {
it('should render projected content', () => {
@Component({
standalone: true,
template: `
<ng-content></ng-content>|
<ng-content></ng-content>|
@ -890,7 +884,6 @@ describe('component', () => {
it('should be able to inject tokens from EnvironmentInjector', () => {
const A = new InjectionToken('A');
@Component({
standalone: true,
template: 'Token: {{ a }}',
})
class StandaloneComponent {
@ -912,7 +905,6 @@ describe('component', () => {
const A = new InjectionToken('A');
const B = new InjectionToken('B');
@Component({
standalone: true,
template: '{{ a }} and {{ b }}',
})
class ChildStandaloneComponent {
@ -921,7 +913,6 @@ describe('component', () => {
}
@Component({
standalone: true,
template: 'Tokens: <div #target></div>',
providers: [{provide: A, useValue: 'ElementInjector(A)'}],
})
@ -961,7 +952,6 @@ describe('component', () => {
const selector = 'standalone-comp';
@Component({
selector,
standalone: true,
template: 'Hello {{ name }}!',
})
class StandaloneComponent {
@ -988,7 +978,6 @@ describe('component', () => {
() => {
@Component({
selector: '.some-class',
standalone: true,
template: 'Hello {{ name }}!',
})
class StandaloneComponent {
@ -1048,7 +1037,6 @@ describe('component', () => {
@Component({
selector: 'standalone-component',
standalone: true,
template: `
<ng-content></ng-content>
<ng-content select="content-selector-a"></ng-content>

39
packages/core/test/acceptance/content_spec.ts
View file

@ -1539,12 +1539,10 @@ describe('projection', () => {
`<ng-content select="[two]">Two fallback</ng-content>` +
`<ng-content select="[three]">Three fallback</ng-content>
`,
standalone: true,
})
class Projection {}
@Component({
standalone: true,
imports: [Projection],
template: `
<projection>
@ -1566,12 +1564,10 @@ describe('projection', () => {
@Component({
selector: 'projection',
template: `<ng-content>Fallback content</ng-content>`,
standalone: true,
})
class Projection {}
@Component({
standalone: true,
imports: [Projection],
template: `
<projection>
@ -1594,12 +1590,10 @@ describe('projection', () => {
@Component({
selector: 'projection',
template: `<ng-content select="div">I have no divs</ng-content>|<ng-content select="span">I have no spans</ng-content>`,
standalone: true,
})
class Projection {}
@Component({
standalone: true,
imports: [Projection],
template: `
<projection>
@ -1622,12 +1616,10 @@ describe('projection', () => {
@Component({
selector: 'projection',
template: `<ng-content>Wildcard fallback</ng-content>|<ng-content select="span">Span fallback</ng-content>`,
standalone: true,
})
class Projection {}
@Component({
standalone: true,
imports: [Projection],
template: `
<projection>
@ -1664,12 +1656,10 @@ describe('projection', () => {
@Component({
selector: 'projection',
template: `<ng-content>Fallback</ng-content>`,
standalone: true,
})
class Projection {}
@Component({
standalone: true,
imports: [Projection],
template: `
<projection><ng-container/></projection>
@ -1687,13 +1677,12 @@ describe('projection', () => {
@Component({
selector: 'projection',
template: `<ng-content>Value: {{value}}</ng-content>`,
standalone: true,
})
class Projection {
value = 0;
}
@Component({standalone: true, imports: [Projection], template: `<projection/>`})
@Component({imports: [Projection], template: `<projection/>`})
class App {
@ViewChild(Projection) projection!: Projection;
}
@ -1717,7 +1706,6 @@ describe('projection', () => {
Value: {{value}}
`,
standalone: true,
})
class Projection {
value = 0;
@ -1727,7 +1715,7 @@ describe('projection', () => {
}
}
@Component({standalone: true, imports: [Projection], template: `<projection/>`})
@Component({imports: [Projection], template: `<projection/>`})
class App {}
const fixture = TestBed.createComponent(App);
@ -1744,7 +1732,6 @@ describe('projection', () => {
@Directive({
selector: 'fallback-dir',
standalone: true,
})
class FallbackDir implements OnDestroy {
constructor() {
@ -1759,13 +1746,11 @@ describe('projection', () => {
@Component({
selector: 'projection',
template: `<ng-content><fallback-dir/></ng-content>`,
standalone: true,
imports: [FallbackDir],
})
class Projection {}
@Component({
standalone: true,
imports: [Projection],
template: `
@if (hasProjection) {
@ -1791,7 +1776,6 @@ describe('projection', () => {
@Directive({
selector: 'fallback-dir',
standalone: true,
})
class FallbackDir {
constructor() {
@ -1802,7 +1786,6 @@ describe('projection', () => {
@Component({
selector: 'projection',
template: `<ng-content><fallback-dir/></ng-content>`,
standalone: true,
imports: [FallbackDir],
})
class Projection {
@ -1810,7 +1793,6 @@ describe('projection', () => {
}
@Component({
standalone: true,
imports: [Projection],
template: `<projection/>`,
})
@ -1828,7 +1810,6 @@ describe('projection', () => {
it('should be able to inject the host component from inside the fallback content', () => {
@Directive({
selector: 'fallback-dir',
standalone: true,
})
class FallbackDir {
host = inject(Projection);
@ -1837,7 +1818,6 @@ describe('projection', () => {
@Component({
selector: 'projection',
template: `<ng-content><fallback-dir/></ng-content>`,
standalone: true,
imports: [FallbackDir],
})
class Projection {
@ -1845,7 +1825,6 @@ describe('projection', () => {
}
@Component({
standalone: true,
imports: [Projection],
template: `<projection/>`,
})
@ -1861,7 +1840,6 @@ describe('projection', () => {
it('should render the fallback content if content is not provided through projectableNodes', () => {
@Component({
standalone: true,
template:
`<ng-content>One fallback</ng-content>|` +
`<ng-content>Two fallback</ng-content>|<ng-content>Three fallback</ng-content>`,
@ -1886,7 +1864,6 @@ describe('projection', () => {
it('should render the content through projectableNodes along with fallback', () => {
@Component({
standalone: true,
template:
`<ng-content>One fallback</ng-content>|` +
`<ng-content>Two fallback</ng-content>|<ng-content>Three fallback</ng-content>`,
@ -1914,7 +1891,6 @@ describe('projection', () => {
@Component({
selector: 'projection',
template: `<ng-container #ref/><ng-template #template><ng-content>Fallback</ng-content></ng-template>`,
standalone: true,
})
class Projection {
@ViewChild('template') template!: TemplateRef<unknown>;
@ -1926,7 +1902,6 @@ describe('projection', () => {
}
@Component({
standalone: true,
imports: [Projection],
template: `<projection/>`,
})
@ -1950,7 +1925,6 @@ describe('projection', () => {
<ng-content select="[inner-header]">Inner header fallback</ng-content>
<ng-content select="[inner-footer]">Inner footer fallback</ng-content>
`,
standalone: true,
})
class InnerProjection {}
@ -1962,13 +1936,11 @@ describe('projection', () => {
<ng-content select="[outer-footer]" inner-footer>Outer footer fallback</ng-content>
</inner-projection>
`,
standalone: true,
imports: [InnerProjection],
})
class Projection {}
@Component({
standalone: true,
imports: [Projection],
template: `
<projection>
@ -1990,7 +1962,6 @@ describe('projection', () => {
@Component({
selector: 'fallback',
standalone: true,
template: 'Fallback',
})
class Fallback {
@ -2002,13 +1973,11 @@ describe('projection', () => {
@Component({
selector: 'projection',
template: `<ng-content><fallback/></ng-content>`,
standalone: true,
imports: [Fallback],
})
class Projection {}
@Component({
standalone: true,
imports: [Projection],
template: `<projection>Hello</projection>`,
})
@ -2026,12 +1995,10 @@ describe('projection', () => {
@Component({
selector: 'projection',
template: `<ng-content>Fallback</ng-content>`,
standalone: true,
})
class Projection {}
@Component({
standalone: true,
imports: [Projection],
template: `
<projection>Content</projection>
@ -2054,12 +2021,10 @@ describe('projection', () => {
@Component({
selector: 'projection',
template: `<ng-content>Fallback</ng-content>`,
standalone: true,
})
class Projection {}
@Component({
standalone: true,
imports: [Projection],
template: `
<projection/>

42
packages/core/test/acceptance/control_flow_for_spec.ts
View file

@ -129,7 +129,7 @@ describe('control flow - for', () => {
});
it('should be able to use pipes injecting ChangeDetectorRef in for loop blocks', () => {
@Pipe({name: 'test', standalone: true})
@Pipe({name: 'test'})
class TestPipe implements PipeTransform {
changeDetectorRef = inject(ChangeDetectorRef);
@ -141,7 +141,6 @@ describe('control flow - for', () => {
@Component({
template: '@for (item of items | test; track item;) {{{item}}|}',
imports: [TestPipe],
standalone: true,
})
class TestComponent {
items = [1, 2, 3];
@ -156,7 +155,6 @@ describe('control flow - for', () => {
@Directive({
selector: '[dir]',
exportAs: 'dir',
standalone: true,
})
class Dir {
data = [1];
@ -168,7 +166,6 @@ describe('control flow - for', () => {
@Component({
selector: 'app-root',
standalone: true,
imports: [Dir],
template: `
<div [dir] #dir="dir"></div>
@ -589,14 +586,12 @@ describe('control flow - for', () => {
];
@Component({
standalone: true,
template: ``,
selector: 'child-cmp',
})
class ChildCmp {}
@Component({
standalone: true,
imports: [ChildCmp],
template: `
@for(task of tasks; track task.id) {
@ -622,14 +617,12 @@ describe('control flow - for', () => {
describe('content projection', () => {
it('should project an @for with a single root node into the root node slot', () => {
@Component({
standalone: true,
selector: 'test',
template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
})
class TestComponent {}
@Component({
standalone: true,
imports: [TestComponent],
template: `
<test>Before @for (item of items; track $index) {
@ -649,14 +642,12 @@ describe('control flow - for', () => {
it('should project an @empty block with a single root node into the root node slot', () => {
@Component({
standalone: true,
selector: 'test',
template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
})
class TestComponent {}
@Component({
standalone: true,
imports: [TestComponent],
template: `
<test>Before @for (item of items; track $index) {} @empty {
@ -676,7 +667,6 @@ describe('control flow - for', () => {
it('should allow @for and @empty blocks to be projected into different slots', () => {
@Component({
standalone: true,
selector: 'test',
template:
'Main: <ng-content/> Loop slot: <ng-content select="[loop]"/> Empty slot: <ng-content select="[empty]"/>',
@ -684,7 +674,6 @@ describe('control flow - for', () => {
class TestComponent {}
@Component({
standalone: true,
imports: [TestComponent],
template: `
<test>Before @for (item of items; track $index) {
@ -714,14 +703,12 @@ describe('control flow - for', () => {
it('should project an @for with multiple root nodes into the catch-all slot', () => {
@Component({
standalone: true,
selector: 'test',
template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
})
class TestComponent {}
@Component({
standalone: true,
imports: [TestComponent],
template: `
<test>Before @for (item of items; track $index) {
@ -743,7 +730,7 @@ describe('control flow - for', () => {
it('should project an @for with a single root node with a data binding', () => {
let directiveCount = 0;
@Directive({standalone: true, selector: '[foo]'})
@Directive({selector: '[foo]'})
class Foo {
@Input('foo') value: any;
@ -753,14 +740,12 @@ describe('control flow - for', () => {
}
@Component({
standalone: true,
selector: 'test',
template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
})
class TestComponent {}
@Component({
standalone: true,
imports: [TestComponent, Foo],
template: `
<test>Before @for (item of items; track $index) {
@ -781,14 +766,12 @@ describe('control flow - for', () => {
it('should project an @for with an ng-container root node', () => {
@Component({
standalone: true,
selector: 'test',
template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
})
class TestComponent {}
@Component({
standalone: true,
imports: [TestComponent],
template: `
<test>Before @for (item of items; track $index) {
@ -813,14 +796,12 @@ describe('control flow - for', () => {
// This test is to ensure that we don't regress if it happens in the future.
it('should project an @for with single root node and comments into the root node slot', () => {
@Component({
standalone: true,
selector: 'test',
template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
})
class TestComponent {}
@Component({
standalone: true,
imports: [TestComponent],
template: `
<test>Before @for (item of items; track $index) {
@ -842,14 +823,12 @@ describe('control flow - for', () => {
it('should project the root node when preserveWhitespaces is enabled and there are no whitespace nodes', () => {
@Component({
standalone: true,
selector: 'test',
template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
})
class TestComponent {}
@Component({
standalone: true,
imports: [TestComponent],
preserveWhitespaces: true,
// Note the whitespace due to the indentation inside @for.
@ -867,14 +846,12 @@ describe('control flow - for', () => {
it('should not project the root node when preserveWhitespaces is enabled and there are whitespace nodes', () => {
@Component({
standalone: true,
selector: 'test',
template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
})
class TestComponent {}
@Component({
standalone: true,
imports: [TestComponent],
preserveWhitespaces: true,
// Note the whitespace due to the indentation inside @for.
@ -895,14 +872,12 @@ describe('control flow - for', () => {
it('should not project the root node across multiple layers of @for', () => {
@Component({
standalone: true,
selector: 'test',
template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
})
class TestComponent {}
@Component({
standalone: true,
imports: [TestComponent],
template: `
<test>Before @for (item of items; track $index) {
@ -923,14 +898,12 @@ describe('control flow - for', () => {
it('should project an @for with a single root template node into the root node slot', () => {
@Component({
standalone: true,
selector: 'test',
template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
})
class TestComponent {}
@Component({
standalone: true,
imports: [TestComponent, NgIf],
template: `<test>Before @for (item of items; track $index) {
<span *ngIf="true" foo>{{item}}</span>
@ -953,7 +926,6 @@ describe('control flow - for', () => {
let directiveCount = 0;
@Component({
standalone: true,
selector: 'test',
template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
})
@ -961,7 +933,6 @@ describe('control flow - for', () => {
@Directive({
selector: '[foo]',
standalone: true,
})
class FooDirective {
constructor() {
@ -970,7 +941,6 @@ describe('control flow - for', () => {
}
@Component({
standalone: true,
imports: [TestComponent, FooDirective],
template: `<test>Before @for (item of items; track $index) {
<span foo>{{item}}</span>
@ -992,7 +962,6 @@ describe('control flow - for', () => {
let directiveCount = 0;
@Component({
standalone: true,
selector: 'test',
template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
})
@ -1000,7 +969,6 @@ describe('control flow - for', () => {
@Directive({
selector: '[templateDir]',
standalone: true,
})
class TemplateDirective implements OnInit {
constructor(
@ -1017,7 +985,6 @@ describe('control flow - for', () => {
}
@Component({
standalone: true,
imports: [TestComponent, TemplateDirective],
template: `<test>Before @for (item of items; track $index) {
<span *templateDir foo>{{item}}</span>
@ -1039,7 +1006,6 @@ describe('control flow - for', () => {
let directiveCount = 0;
@Component({
standalone: true,
selector: 'test',
template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
})
@ -1047,7 +1013,6 @@ describe('control flow - for', () => {
@Directive({
selector: '[templateDir]',
standalone: true,
})
class TemplateDirective implements OnInit {
constructor(
@ -1064,7 +1029,6 @@ describe('control flow - for', () => {
}
@Component({
standalone: true,
imports: [TestComponent, TemplateDirective],
template: `<test>Before @for (item of items; track $index) {
<ng-template templateDir foo>{{item}}</ng-template>
@ -1108,14 +1072,12 @@ describe('control flow - for', () => {
it('should project an @for with a single root node and @let declarations into the root node slot', () => {
@Component({
standalone: true,
selector: 'test',
template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
})
class TestComponent {}
@Component({
standalone: true,
imports: [TestComponent],
template: `
<test>Before @for (item of items; track $index) {

55
packages/core/test/acceptance/control_flow_if_spec.ts
View file

@ -22,7 +22,7 @@ import {
import {TestBed} from '@angular/core/testing';
// Basic shared pipe used during testing.
@Pipe({name: 'multiply', pure: true, standalone: true})
@Pipe({name: 'multiply', pure: true})
class MultiplyPipe implements PipeTransform {
transform(value: number, amount: number) {
return value * amount;
@ -31,7 +31,7 @@ class MultiplyPipe implements PipeTransform {
describe('control flow - if', () => {
it('should add and remove views based on conditions change', () => {
@Component({standalone: true, template: '@if (show) {Something} @else {Nothing}'})
@Component({template: '@if (show) {Something} @else {Nothing}'})
class TestComponent {
show = true;
}
@ -48,7 +48,6 @@ describe('control flow - if', () => {
it('should expose expression value in context', () => {
@Component({
standalone: true,
template: '@if (show; as alias) {{{show}} aliased to {{alias}}}',
})
class TestComponent {
@ -66,7 +65,6 @@ describe('control flow - if', () => {
it('should not expose the aliased expression to `if` and `else if` blocks', () => {
@Component({
standalone: true,
template: `
@if (value === 1; as alias) {
If: {{value}} as {{alias || 'unavailable'}}
@ -96,7 +94,6 @@ describe('control flow - if', () => {
it('should expose the context to nested conditional blocks', () => {
@Component({
standalone: true,
imports: [MultiplyPipe],
template: `
@if (value | multiply:2; as root) {
@ -135,7 +132,6 @@ describe('control flow - if', () => {
let logs: any[] = [];
@Component({
standalone: true,
imports: [MultiplyPipe],
template: `
@if (value | multiply:2; as root) {
@ -186,7 +182,6 @@ describe('control flow - if', () => {
it('should expose expression value passed through a pipe in context', () => {
@Component({
standalone: true,
template: '@if (value | multiply:2; as alias) {{{value}} aliased to {{alias}}}',
imports: [MultiplyPipe],
})
@ -205,7 +200,6 @@ describe('control flow - if', () => {
it('should destroy all views if there is nothing to display', () => {
@Component({
standalone: true,
template: '@if (show) {Something}',
})
class TestComponent {
@ -223,7 +217,6 @@ describe('control flow - if', () => {
it('should be able to use pipes in conditional expressions', () => {
@Component({
standalone: true,
imports: [MultiplyPipe],
template: `
@if ((value | multiply:2) === 2) {
@ -254,7 +247,7 @@ describe('control flow - if', () => {
});
it('should be able to use pipes injecting ChangeDetectorRef in if blocks', () => {
@Pipe({name: 'test', standalone: true})
@Pipe({name: 'test'})
class TestPipe implements PipeTransform {
changeDetectorRef = inject(ChangeDetectorRef);
@ -264,7 +257,6 @@ describe('control flow - if', () => {
}
@Component({
standalone: true,
template: '@if (show | test) {Something}',
imports: [TestPipe],
})
@ -279,7 +271,6 @@ describe('control flow - if', () => {
it('should support a condition with the a typeof expression', () => {
@Component({
standalone: true,
template: `
@if (typeof value === 'string') {
{{value.length}}
@ -304,14 +295,12 @@ describe('control flow - if', () => {
describe('content projection', () => {
it('should project an @if with a single root node into the root node slot', () => {
@Component({
standalone: true,
selector: 'test',
template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
})
class TestComponent {}
@Component({
standalone: true,
imports: [TestComponent],
template: `
<test>Before @if (true) {
@ -330,7 +319,7 @@ describe('control flow - if', () => {
it('should project an @if with a single root node with a data binding', () => {
let directiveCount = 0;
@Directive({standalone: true, selector: '[foo]'})
@Directive({selector: '[foo]'})
class Foo {
@Input('foo') value: any;
@ -340,14 +329,12 @@ describe('control flow - if', () => {
}
@Component({
standalone: true,
selector: 'test',
template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
})
class TestComponent {}
@Component({
standalone: true,
imports: [TestComponent, Foo],
template: `
<test>Before @if (true) {
@ -368,14 +355,12 @@ describe('control flow - if', () => {
it('should project an @if with multiple root nodes into the catch-all slot', () => {
@Component({
standalone: true,
selector: 'test',
template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
})
class TestComponent {}
@Component({
standalone: true,
imports: [TestComponent],
template: `
<test>Before @if (true) {
@ -394,14 +379,12 @@ describe('control flow - if', () => {
it('should project an @if with an ng-container root node', () => {
@Component({
standalone: true,
selector: 'test',
template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
})
class TestComponent {}
@Component({
standalone: true,
imports: [TestComponent],
template: `
<test>Before @if (true) {
@ -424,14 +407,12 @@ describe('control flow - if', () => {
// This test is to ensure that we don't regress if it happens in the future.
it('should project an @if with a single root node and comments into the root node slot', () => {
@Component({
standalone: true,
selector: 'test',
template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
})
class TestComponent {}
@Component({
standalone: true,
imports: [TestComponent],
template: `
<test>Before @if (true) {
@ -451,7 +432,6 @@ describe('control flow - if', () => {
it('should project @if an @else content into separate slots', () => {
@Component({
standalone: true,
selector: 'test',
template:
'if: (<ng-content select="[if_case]"/>), else: (<ng-content select="[else_case]"/>)',
@ -459,7 +439,6 @@ describe('control flow - if', () => {
class TestComponent {}
@Component({
standalone: true,
imports: [TestComponent],
template: `
<test>
@ -490,14 +469,12 @@ describe('control flow - if', () => {
it('should project @if an @else content into separate slots when if has default content', () => {
@Component({
standalone: true,
selector: 'test',
template: 'if: (<ng-content />), else: (<ng-content select="[else_case]"/>)',
})
class TestComponent {}
@Component({
standalone: true,
imports: [TestComponent],
template: `
<test>
@ -528,14 +505,12 @@ describe('control flow - if', () => {
it('should project @if an @else content into separate slots when else has default content', () => {
@Component({
standalone: true,
selector: 'test',
template: 'if: (<ng-content select="[if_case]"/>), else: (<ng-content/>)',
})
class TestComponent {}
@Component({
standalone: true,
imports: [TestComponent],
template: `
<test>
@ -566,14 +541,12 @@ describe('control flow - if', () => {
it('should project the root node when preserveWhitespaces is enabled and there are no whitespace nodes', () => {
@Component({
standalone: true,
selector: 'test',
template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
})
class TestComponent {}
@Component({
standalone: true,
imports: [TestComponent],
preserveWhitespaces: true,
template: '<test>Before @if (true) {<span foo>one</span>} After</test>',
@ -587,14 +560,12 @@ describe('control flow - if', () => {
it('should not project the root node when preserveWhitespaces is enabled and there are whitespace nodes', () => {
@Component({
standalone: true,
selector: 'test',
template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
})
class TestComponent {}
@Component({
standalone: true,
imports: [TestComponent],
preserveWhitespaces: true,
// Note the whitespace due to the indentation inside @if.
@ -613,14 +584,12 @@ describe('control flow - if', () => {
it('should not project the root node across multiple layers of @if', () => {
@Component({
standalone: true,
selector: 'test',
template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
})
class TestComponent {}
@Component({
standalone: true,
imports: [TestComponent],
template: `
<test>Before @if (true) {
@ -639,14 +608,12 @@ describe('control flow - if', () => {
it('should project an @if with a single root template node into the root node slot', () => {
@Component({
standalone: true,
selector: 'test',
template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
})
class TestComponent {}
@Component({
standalone: true,
imports: [TestComponent, NgFor],
template: `<test>Before @if (true) {
<span *ngFor="let item of items" foo>{{item}}</span>
@ -669,7 +636,6 @@ describe('control flow - if', () => {
let directiveCount = 0;
@Component({
standalone: true,
selector: 'test',
template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
})
@ -677,7 +643,6 @@ describe('control flow - if', () => {
@Directive({
selector: '[foo]',
standalone: true,
})
class FooDirective {
constructor() {
@ -686,7 +651,6 @@ describe('control flow - if', () => {
}
@Component({
standalone: true,
imports: [TestComponent, FooDirective],
template: `<test>Before @if (true) {
<span foo>foo</span>
@ -706,7 +670,6 @@ describe('control flow - if', () => {
let directiveCount = 0;
@Component({
standalone: true,
selector: 'test',
template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
})
@ -714,7 +677,6 @@ describe('control flow - if', () => {
@Directive({
selector: '[templateDir]',
standalone: true,
})
class TemplateDirective implements OnInit {
constructor(
@ -731,7 +693,6 @@ describe('control flow - if', () => {
}
@Component({
standalone: true,
imports: [TestComponent, TemplateDirective],
template: `<test>Before @if (true) {
<span *templateDir foo>foo</span>
@ -751,7 +712,6 @@ describe('control flow - if', () => {
let directiveCount = 0;
@Component({
standalone: true,
selector: 'test',
template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
})
@ -759,7 +719,6 @@ describe('control flow - if', () => {
@Directive({
selector: '[templateDir]',
standalone: true,
})
class TemplateDirective implements OnInit {
constructor(
@ -776,7 +735,6 @@ describe('control flow - if', () => {
}
@Component({
standalone: true,
imports: [TestComponent, TemplateDirective],
template: `<test>Before @if (true) {
<ng-template templateDir foo>foo</ng-template>
@ -796,7 +754,6 @@ describe('control flow - if', () => {
let directiveCount = 0;
@Component({
standalone: true,
selector: 'test',
template: 'Main: <ng-content/> Slot: <ng-content select=".foo"/>',
})
@ -804,7 +761,6 @@ describe('control flow - if', () => {
@Directive({
selector: '.foo',
standalone: true,
})
class TemplateDirective {
constructor() {
@ -813,7 +769,6 @@ describe('control flow - if', () => {
}
@Component({
standalone: true,
imports: [TestComponent, TemplateDirective],
template: `<test>Before @if (condition) {
<div class="foo">foo</div>
@ -861,14 +816,12 @@ describe('control flow - if', () => {
it('should project an @if with a single root node and @let declarations into the root node slot', () => {
@Component({
standalone: true,
selector: 'test',
template: 'Main: <ng-content/> Slot: <ng-content select="[foo]"/>',
})
class TestComponent {}
@Component({
standalone: true,
imports: [TestComponent],
template: `
<test>Before @if (true) {

12
packages/core/test/acceptance/control_flow_switch_spec.ts
View file

@ -10,7 +10,7 @@ import {ChangeDetectorRef, Component, inject, Pipe, PipeTransform} from '@angula
import {TestBed} from '@angular/core/testing';
// Basic shared pipe used during testing.
@Pipe({name: 'multiply', pure: true, standalone: true})
@Pipe({name: 'multiply', pure: true})
class MultiplyPipe implements PipeTransform {
transform(value: number, amount: number) {
return value * amount;
@ -20,7 +20,6 @@ class MultiplyPipe implements PipeTransform {
describe('control flow - switch', () => {
it('should show a template based on a matching case', () => {
@Component({
standalone: true,
template: `
@switch (case) {
@case (0) {case 0}
@ -49,7 +48,6 @@ describe('control flow - switch', () => {
it('should be able to use a pipe in the switch expression', () => {
@Component({
standalone: true,
imports: [MultiplyPipe],
template: `
@switch (case | multiply:2) {
@ -79,7 +77,6 @@ describe('control flow - switch', () => {
it('should be able to use a pipe in the case expression', () => {
@Component({
standalone: true,
imports: [MultiplyPipe],
template: `
@switch (case) {
@ -108,7 +105,7 @@ describe('control flow - switch', () => {
});
it('should be able to use pipes injecting ChangeDetectorRef in switch blocks', () => {
@Pipe({name: 'test', standalone: true})
@Pipe({name: 'test'})
class TestPipe implements PipeTransform {
changeDetectorRef = inject(ChangeDetectorRef);
@ -118,7 +115,6 @@ describe('control flow - switch', () => {
}
@Component({
standalone: true,
template: `
@switch (case | test) {
@case (0 | test) {Zero}
@ -138,7 +134,6 @@ describe('control flow - switch', () => {
it('should project @switch cases into appropriate slots when selectors are used for all cases', () => {
@Component({
standalone: true,
selector: 'test',
template:
'case 1: (<ng-content select="[case_1]"/>), case 2: (<ng-content select="[case_2]"/>), case 3: (<ng-content select="[case_3]"/>)',
@ -146,7 +141,6 @@ describe('control flow - switch', () => {
class TestComponent {}
@Component({
standalone: true,
imports: [TestComponent],
template: `
<test>
@ -183,7 +177,6 @@ describe('control flow - switch', () => {
it('should project @switch cases into appropriate slots when selectors are used for some cases', () => {
@Component({
standalone: true,
selector: 'test',
template:
'case 1: (<ng-content select="[case_1]"/>), case 2: (<ng-content />), case 3: (<ng-content select="[case_3]"/>)',
@ -191,7 +184,6 @@ describe('control flow - switch', () => {
class TestComponent {}
@Component({
standalone: true,
imports: [TestComponent],
template: `
<test>

9
packages/core/test/acceptance/csp_spec.ts
View file

@ -45,14 +45,12 @@ describe('CSP integration', () => {
selector: 'uses-styles',
template: '',
styles: [testStyles],
standalone: true,
encapsulation: ViewEncapsulation.Emulated,
})
class UsesStyles {}
@Component({
selector: 'app',
standalone: true,
template: '<uses-styles></uses-styles>',
imports: [UsesStyles],
})
@ -73,14 +71,12 @@ describe('CSP integration', () => {
selector: 'uses-styles',
template: '',
styles: [testStyles],
standalone: true,
encapsulation: ViewEncapsulation.None,
})
class UsesStyles {}
@Component({
selector: 'app',
standalone: true,
template: '<uses-styles></uses-styles>',
imports: [UsesStyles],
})
@ -107,7 +103,6 @@ describe('CSP integration', () => {
selector: 'uses-styles',
template: '',
styles: [testStyles],
standalone: true,
encapsulation: ViewEncapsulation.ShadowDom,
})
class UsesStyles {
@ -118,7 +113,6 @@ describe('CSP integration', () => {
@Component({
selector: 'app',
standalone: true,
template: '<uses-styles></uses-styles>',
imports: [UsesStyles],
})
@ -135,12 +129,11 @@ describe('CSP integration', () => {
it(
'should prefer nonce provided through DI over one provided in the DOM',
withBody('<app ngCspNonce="dom-nonce"></app>', async () => {
@Component({selector: 'uses-styles', template: '', styles: [testStyles], standalone: true})
@Component({selector: 'uses-styles', template: '', styles: [testStyles]})
class UsesStyles {}
@Component({
selector: 'app',
standalone: true,
template: '<uses-styles></uses-styles>',
imports: [UsesStyles],
})

131
packages/core/test/acceptance/defer_spec.ts
View file

@ -137,7 +137,6 @@ async function verifyTimeline(
function createFixture(template: string) {
@Component({
selector: 'nested-cmp',
standalone: true,
template: '{{ block }}',
})
class NestedCmp {
@ -145,7 +144,6 @@ function createFixture(template: string) {
}
@Component({
standalone: true,
selector: 'simple-app',
imports: [NestedCmp],
template,
@ -203,13 +201,11 @@ describe('@defer', () => {
it('should transition between placeholder, loading and loaded states', async () => {
@Component({
selector: 'my-lazy-cmp',
standalone: true,
template: 'Hi!',
})
class MyLazyCmp {}
@Component({
standalone: true,
selector: 'simple-app',
imports: [MyLazyCmp],
template: `
@ -248,13 +244,11 @@ describe('@defer', () => {
it('should work when only main block is present', async () => {
@Component({
selector: 'my-lazy-cmp',
standalone: true,
template: 'Hi!',
})
class MyLazyCmp {}
@Component({
standalone: true,
selector: 'simple-app',
imports: [MyLazyCmp],
template: `
@ -284,7 +278,7 @@ describe('@defer', () => {
});
it('should be able to use pipes injecting ChangeDetectorRef in defer blocks', async () => {
@Pipe({name: 'test', standalone: true})
@Pipe({name: 'test'})
class TestPipe implements PipeTransform {
changeDetectorRef = inject(ChangeDetectorRef);
@ -294,7 +288,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
imports: [TestPipe],
template: `@defer (when isVisible | test; prefetch when isVisible | test) {Hello}`,
})
@ -323,7 +316,6 @@ describe('@defer', () => {
// code is wrapped using the `@defer` block.
const logs: string[] = [];
@Directive({
standalone: true,
selector: '[dirA]',
})
class DirA {
@ -333,7 +325,6 @@ describe('@defer', () => {
}
@Directive({
standalone: true,
selector: '[dirB]',
})
class DirB {
@ -343,7 +334,6 @@ describe('@defer', () => {
}
@Directive({
standalone: true,
selector: '[dirC]',
})
class DirC {
@ -353,7 +343,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
// Directive order is intentional here (different from the order
// in which they are defined on the host element).
imports: [DirC, DirB, DirA],
@ -387,7 +376,6 @@ describe('@defer', () => {
it('should render when @defer is used inside of an OnPush component', async () => {
@Component({
selector: 'my-lazy-cmp',
standalone: true,
template: '{{ foo }}',
})
class MyLazyCmp {
@ -395,7 +383,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
selector: 'simple-app',
imports: [MyLazyCmp],
changeDetection: ChangeDetectionStrategy.OnPush,
@ -420,7 +407,6 @@ describe('@defer', () => {
it('should render when @defer-loaded component uses OnPush', async () => {
@Component({
selector: 'my-lazy-cmp',
standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush,
template: '{{ foo }}',
})
@ -429,7 +415,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
selector: 'simple-app',
imports: [MyLazyCmp],
template: `
@ -453,7 +438,6 @@ describe('@defer', () => {
it('should render when both @defer-loaded and host component use OnPush', async () => {
@Component({
selector: 'my-lazy-cmp',
standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush,
template: '{{ foo }}',
})
@ -462,7 +446,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
selector: 'simple-app',
imports: [MyLazyCmp],
changeDetection: ChangeDetectionStrategy.OnPush,
@ -487,7 +470,6 @@ describe('@defer', () => {
it('should render when both OnPush components used in other blocks (e.g. @placeholder)', async () => {
@Component({
selector: 'my-lazy-cmp',
standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush,
template: '{{ foo }}',
})
@ -497,7 +479,6 @@ describe('@defer', () => {
@Component({
selector: 'another-lazy-cmp',
standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush,
template: '{{ foo }}',
})
@ -506,7 +487,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
selector: 'simple-app',
imports: [MyLazyCmp, AnotherLazyCmp],
changeDetection: ChangeDetectionStrategy.OnPush,
@ -550,7 +530,6 @@ describe('@defer', () => {
it('should support `on immediate` condition', async () => {
@Component({
selector: 'nested-cmp',
standalone: true,
template: 'Rendering {{ block }} block.',
})
class NestedCmp {
@ -558,7 +537,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
selector: 'root-app',
imports: [NestedCmp],
template: `
@ -623,7 +601,6 @@ describe('@defer', () => {
it('should support directive matching in all blocks', async () => {
@Component({
selector: 'nested-cmp',
standalone: true,
template: 'Rendering {{ block }} block.',
})
class NestedCmp {
@ -631,7 +608,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
selector: 'simple-app',
imports: [NestedCmp],
template: `
@ -822,7 +798,6 @@ describe('@defer', () => {
it('should render an error block when loading fails', async () => {
@Component({
selector: 'nested-cmp',
standalone: true,
template: 'Rendering {{ block }} block.',
})
class NestedCmp {
@ -830,7 +805,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
selector: 'simple-app',
imports: [NestedCmp],
template: `
@ -889,13 +863,11 @@ describe('@defer', () => {
it('should report an error to the ErrorHandler if no `@error` block is defined', async () => {
@Component({
selector: 'nested-cmp',
standalone: true,
template: 'NestedCmp',
})
class NestedCmp {}
@Component({
standalone: true,
selector: 'simple-app',
imports: [NestedCmp],
template: `
@ -959,7 +931,6 @@ describe('@defer', () => {
it('should not render `@error` block if loaded component has errors', async () => {
@Component({
selector: 'cmp-with-error',
standalone: true,
template: 'CmpWithError',
})
class CmpWithError {
@ -969,7 +940,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
selector: 'simple-app',
imports: [CmpWithError],
template: `
@ -1045,7 +1015,6 @@ describe('@defer', () => {
it(`should log an error in the handler when there is no error block with devMode:${devMode}`, async () => {
@Component({
selector: 'nested-cmp',
standalone: true,
template: 'Rendering {{ block }} block.',
})
class NestedCmp {
@ -1053,7 +1022,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
selector: 'simple-app',
imports: [NestedCmp],
template: `
@ -1126,7 +1094,6 @@ describe('@defer', () => {
it('should query for components within each block', async () => {
@Component({
selector: 'nested-cmp',
standalone: true,
template: 'Rendering {{ block }} block.',
})
class NestedCmp {
@ -1134,7 +1101,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
selector: 'simple-app',
imports: [NestedCmp],
template: `
@ -1192,21 +1158,18 @@ describe('@defer', () => {
it('should be able to project content into each block', async () => {
@Component({
selector: 'cmp-a',
standalone: true,
template: 'CmpA',
})
class CmpA {}
@Component({
selector: 'cmp-b',
standalone: true,
template: 'CmpB',
})
class CmpB {}
@Component({
selector: 'nested-cmp',
standalone: true,
template: 'Rendering {{ block }} block.',
})
class NestedCmp {
@ -1214,7 +1177,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
selector: 'my-app',
imports: [NestedCmp],
template: `
@ -1238,7 +1200,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
selector: 'root-app',
imports: [MyCmp, CmpA, CmpB],
template: `
@ -1303,14 +1264,12 @@ describe('@defer', () => {
it('should be able to have nested blocks', async () => {
@Component({
selector: 'cmp-a',
standalone: true,
template: 'CmpA',
})
class CmpA {}
@Component({
selector: 'nested-cmp',
standalone: true,
template: 'Rendering {{ block }} block.',
})
class NestedCmp {
@ -1318,7 +1277,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
selector: 'root-app',
imports: [NestedCmp, CmpA],
template: `
@ -1377,13 +1335,11 @@ describe('@defer', () => {
it('should handle nested blocks that defer load the same dep', async () => {
@Component({
selector: 'cmp-a',
standalone: true,
template: 'CmpA',
})
class CmpA {}
@Component({
standalone: true,
selector: 'root-app',
imports: [CmpA],
template: `
@ -1495,7 +1451,6 @@ describe('@defer', () => {
it('should be able to prefetch resources', async () => {
@Component({
selector: 'nested-cmp',
standalone: true,
template: 'Rendering {{ block }} block.',
})
class NestedCmp {
@ -1503,7 +1458,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
selector: 'root-app',
imports: [NestedCmp],
template: `
@ -1576,7 +1530,6 @@ describe('@defer', () => {
it('should handle a case when prefetching fails', async () => {
@Component({
selector: 'nested-cmp',
standalone: true,
template: 'Rendering {{ block }} block.',
})
class NestedCmp {
@ -1584,7 +1537,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
selector: 'root-app',
imports: [NestedCmp],
template: `
@ -1656,7 +1608,6 @@ describe('@defer', () => {
it('should work when loading and prefetching were kicked off at the same time', async () => {
@Component({
selector: 'nested-cmp',
standalone: true,
template: 'Rendering {{ block }} block.',
})
class NestedCmp {
@ -1664,7 +1615,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
selector: 'root-app',
imports: [NestedCmp],
template: `
@ -1724,7 +1674,6 @@ describe('@defer', () => {
it('should support `prefetch on idle` condition', async () => {
@Component({
selector: 'nested-cmp',
standalone: true,
template: 'Rendering {{ block }} block.',
})
class NestedCmp {
@ -1732,7 +1681,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
selector: 'root-app',
imports: [NestedCmp],
template: `
@ -1801,7 +1749,6 @@ describe('@defer', () => {
it('should trigger prefetching based on `on idle` only once', async () => {
@Component({
selector: 'nested-cmp',
standalone: true,
template: 'Rendering {{ block }} block.',
})
class NestedCmp {
@ -1809,7 +1756,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
selector: 'root-app',
imports: [NestedCmp],
template: `
@ -1882,7 +1828,6 @@ describe('@defer', () => {
it('should trigger fetching based on `on idle` only once', async () => {
@Component({
selector: 'nested-cmp',
standalone: true,
template: 'Rendering {{ block }} block.',
})
class NestedCmp {
@ -1890,7 +1835,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
selector: 'root-app',
imports: [NestedCmp],
template: `
@ -1952,7 +1896,6 @@ describe('@defer', () => {
it('should support `prefetch on immediate` condition', async () => {
@Component({
selector: 'nested-cmp',
standalone: true,
template: 'Rendering {{ block }} block.',
})
class NestedCmp {
@ -1960,7 +1903,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
selector: 'root-app',
imports: [NestedCmp],
template: `
@ -2031,7 +1973,6 @@ describe('@defer', () => {
it('should delay nested defer blocks with `on idle` triggers', async () => {
@Component({
selector: 'nested-cmp',
standalone: true,
template: 'Primary block content.',
})
class NestedCmp {
@ -2040,13 +1981,11 @@ describe('@defer', () => {
@Component({
selector: 'another-nested-cmp',
standalone: true,
template: 'Nested block component.',
})
class AnotherNestedCmp {}
@Component({
standalone: true,
selector: 'root-app',
imports: [NestedCmp, AnotherNestedCmp],
template: `
@ -2129,7 +2068,6 @@ describe('@defer', () => {
it('should not request idle callback for each block in a for loop', async () => {
@Component({
selector: 'nested-cmp',
standalone: true,
template: 'Rendering {{ block }} block.',
})
class NestedCmp {
@ -2137,7 +2075,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
selector: 'root-app',
imports: [NestedCmp],
template: `
@ -2200,7 +2137,6 @@ describe('@defer', () => {
it('should delay nested defer blocks with `on idle` triggers', async () => {
@Component({
selector: 'nested-cmp',
standalone: true,
template: 'Primary block content.',
})
class NestedCmp {
@ -2209,13 +2145,11 @@ describe('@defer', () => {
@Component({
selector: 'another-nested-cmp',
standalone: true,
template: 'Nested block component.',
})
class AnotherNestedCmp {}
@Component({
standalone: true,
selector: 'root-app',
imports: [NestedCmp, AnotherNestedCmp],
template: `
@ -2296,7 +2230,6 @@ describe('@defer', () => {
it('should clear idle handlers when defer block is triggered', async () => {
@Component({
standalone: true,
selector: 'root-app',
template: `
@defer (when isVisible; on idle; prefetch on idle) {
@ -2339,7 +2272,6 @@ describe('@defer', () => {
describe('trigger resolution', () => {
it('should resolve a trigger is outside the defer block', fakeAsync(() => {
@Component({
standalone: true,
template: `
@defer (on interaction(trigger)) {
Main content
@ -2369,11 +2301,10 @@ describe('@defer', () => {
}));
it('should resolve a trigger on a component outside the defer block', fakeAsync(() => {
@Component({selector: 'some-comp', template: '<button></button>', standalone: true})
@Component({selector: 'some-comp', template: '<button></button>'})
class SomeComp {}
@Component({
standalone: true,
imports: [SomeComp],
template: `
@defer (on interaction(trigger)) {
@ -2405,7 +2336,6 @@ describe('@defer', () => {
it('should resolve a trigger that is on a parent element', fakeAsync(() => {
@Component({
standalone: true,
template: `
<button #trigger>
<div>
@ -2434,7 +2364,6 @@ describe('@defer', () => {
it('should resolve a trigger that is inside a parent embedded view', fakeAsync(() => {
@Component({
standalone: true,
template: `
@if (cond) {
<button #trigger></button>
@ -2466,11 +2395,10 @@ describe('@defer', () => {
}));
it('should resolve a trigger that is on a component in a parent embedded view', fakeAsync(() => {
@Component({selector: 'some-comp', template: '<button></button>', standalone: true})
@Component({selector: 'some-comp', template: '<button></button>'})
class SomeComp {}
@Component({
standalone: true,
imports: [SomeComp],
template: `
@if (cond) {
@ -2504,7 +2432,6 @@ describe('@defer', () => {
it('should resolve a trigger that is inside the placeholder', fakeAsync(() => {
@Component({
standalone: true,
template: `
@defer (on interaction(trigger)) {
Main content
@ -2526,11 +2453,10 @@ describe('@defer', () => {
}));
it('should resolve a trigger that is a component inside the placeholder', fakeAsync(() => {
@Component({selector: 'some-comp', template: '<button></button>', standalone: true})
@Component({selector: 'some-comp', template: '<button></button>'})
class SomeComp {}
@Component({
standalone: true,
imports: [SomeComp],
template: `
@defer (on interaction(trigger)) {
@ -2556,7 +2482,6 @@ describe('@defer', () => {
describe('interaction triggers', () => {
it('should load the deferred content when the trigger is clicked', fakeAsync(() => {
@Component({
standalone: true,
template: `
@defer (on interaction(trigger)) {
Main content
@ -2586,7 +2511,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
template: `
@defer (on interaction(trigger)) {
Main content
@ -2612,7 +2536,6 @@ describe('@defer', () => {
it('should load the deferred content when an implicit trigger is clicked', fakeAsync(() => {
@Component({
standalone: true,
template: `
@defer (on interaction) {
Main content
@ -2636,7 +2559,6 @@ describe('@defer', () => {
it('should load the deferred content if a child of the trigger is clicked', fakeAsync(() => {
@Component({
standalone: true,
template: `
@defer (on interaction(trigger)) {
Main content
@ -2665,7 +2587,6 @@ describe('@defer', () => {
it('should support multiple deferred blocks with the same trigger', fakeAsync(() => {
@Component({
standalone: true,
template: `
@defer (on interaction(trigger)) {
Main content 1
@ -2696,7 +2617,6 @@ describe('@defer', () => {
it('should unbind the trigger events when the deferred block is loaded', fakeAsync(() => {
@Component({
standalone: true,
template: `
@defer (on interaction(trigger)) {Main content}
<button #trigger></button>
@ -2721,7 +2641,6 @@ describe('@defer', () => {
it('should unbind the trigger events when the trigger is destroyed', fakeAsync(() => {
@Component({
standalone: true,
template: `
@if (renderBlock) {
@defer (on interaction(trigger)) {Main content}
@ -2749,7 +2668,6 @@ describe('@defer', () => {
it('should unbind the trigger events when the deferred block is destroyed', fakeAsync(() => {
@Component({
standalone: true,
template: `
@if (renderBlock) {
@defer (on interaction(trigger)) {Main content}
@ -2778,7 +2696,6 @@ describe('@defer', () => {
it('should remove placeholder content on interaction', fakeAsync(() => {
@Component({
standalone: true,
template: `
@defer (on interaction(trigger)) {
Main content
@ -2811,7 +2728,6 @@ describe('@defer', () => {
it('should prefetch resources on interaction', fakeAsync(() => {
@Component({
standalone: true,
selector: 'root-app',
template: `
@defer (when isLoaded; prefetch on interaction(trigger)) {Main content}
@ -2855,7 +2771,6 @@ describe('@defer', () => {
it('should prefetch resources on interaction with an implicit trigger', fakeAsync(() => {
@Component({
standalone: true,
selector: 'root-app',
template: `
@defer (when isLoaded; prefetch on interaction) {
@ -2909,7 +2824,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
template: `
@defer (on hover(trigger)) {
Main content
@ -2940,7 +2854,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
template: `
@defer (on hover) {
Main content
@ -2970,7 +2883,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
template: `
@defer (on hover(trigger)) {
Main content 1
@ -3007,7 +2919,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
template: `
@defer (on hover(trigger)) {
Main content
@ -3040,7 +2951,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
template: `
@if (renderBlock) {
@defer (on hover(trigger)) {
@ -3076,7 +2986,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
template: `
@if (renderBlock) {
@defer (on hover(trigger)) {
@ -3113,7 +3022,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
selector: 'root-app',
template: `
@defer (when isLoaded; prefetch on hover(trigger)) {
@ -3165,7 +3073,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
selector: 'root-app',
template: `
@defer (when isLoaded; prefetch on hover) {
@ -3216,7 +3123,6 @@ describe('@defer', () => {
it('should trigger based on `on timer` condition', async () => {
@Component({
selector: 'nested-cmp',
standalone: true,
template: 'Rendering {{ block }} block.',
})
class NestedCmp {
@ -3224,7 +3130,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
selector: 'root-app',
imports: [NestedCmp],
template: `
@ -3292,7 +3197,6 @@ describe('@defer', () => {
it('should trigger nested `on timer` condition', async () => {
@Component({
standalone: true,
selector: 'root-app',
template: `
@defer (on timer(100ms)) {
@ -3339,7 +3243,6 @@ describe('@defer', () => {
it('should trigger prefetching based on `on timer` condition', async () => {
@Component({
selector: 'nested-cmp',
standalone: true,
template: 'Rendering {{ block }} block.',
})
class NestedCmp {
@ -3347,7 +3250,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
selector: 'root-app',
imports: [NestedCmp],
template: `
@ -3428,7 +3330,6 @@ describe('@defer', () => {
const clearSpy = spyOn(globalThis, 'clearTimeout');
@Component({
standalone: true,
selector: 'root-app',
template: `
@defer (when isVisible; on timer(200ms); prefetch on timer(100ms)) {
@ -3554,7 +3455,6 @@ describe('@defer', () => {
it('should load the deferred content when the trigger is in the viewport', fakeAsync(() => {
@Component({
standalone: true,
template: `
@defer (on viewport(trigger)) {
Main content
@ -3581,7 +3481,6 @@ describe('@defer', () => {
it('should load the deferred content when an implicit trigger is in the viewport', fakeAsync(() => {
@Component({
standalone: true,
template: `
@defer (on viewport) {
Main content
@ -3607,7 +3506,6 @@ describe('@defer', () => {
it('should not load the content if the trigger is not in the view yet', fakeAsync(() => {
@Component({
standalone: true,
template: `
@defer (on viewport(trigger)) {
Main content
@ -3645,7 +3543,6 @@ describe('@defer', () => {
it('should support multiple deferred blocks with the same trigger', fakeAsync(() => {
@Component({
standalone: true,
template: `
@defer (on viewport(trigger)) {
Main content 1
@ -3677,7 +3574,6 @@ describe('@defer', () => {
it('should stop observing the trigger when the deferred block is loaded', fakeAsync(() => {
@Component({
standalone: true,
template: `
@defer (on viewport(trigger)) {
Main content
@ -3705,7 +3601,6 @@ describe('@defer', () => {
it('should stop observing the trigger when the trigger is destroyed', fakeAsync(() => {
@Component({
standalone: true,
template: `
@if (renderBlock) {
@defer (on viewport(trigger)) {
@ -3736,7 +3631,6 @@ describe('@defer', () => {
it('should stop observing the trigger when the deferred block is destroyed', fakeAsync(() => {
@Component({
standalone: true,
template: `
@if (renderBlock) {
@defer (on viewport(trigger)) {
@ -3768,7 +3662,6 @@ describe('@defer', () => {
it('should disconnect the intersection observer once all deferred blocks have been loaded', fakeAsync(() => {
@Component({
standalone: true,
template: `
<button #triggerOne></button>
@defer (on viewport(triggerOne)) {
@ -3808,7 +3701,6 @@ describe('@defer', () => {
it('should prefetch resources when the trigger comes into the viewport', fakeAsync(() => {
@Component({
standalone: true,
selector: 'root-app',
template: `
@defer (when isLoaded; prefetch on viewport(trigger)) {
@ -3855,7 +3747,6 @@ describe('@defer', () => {
it('should prefetch resources when an implicit trigger comes into the viewport', fakeAsync(() => {
@Component({
standalone: true,
selector: 'root-app',
template: `
@defer (when isLoaded; prefetch on viewport) {
@ -3903,7 +3794,6 @@ describe('@defer', () => {
it('should load deferred content in a loop', fakeAsync(() => {
@Component({
standalone: true,
template: `
@for (item of items; track item) {
@defer (on viewport) {d{{item}} }
@ -3944,7 +3834,6 @@ describe('@defer', () => {
describe('DOM-based events cleanup', () => {
it('should unbind `interaction` trigger events when the deferred block is loaded', async () => {
@Component({
standalone: true,
template: `
@defer (
when isVisible;
@ -3994,7 +3883,6 @@ describe('@defer', () => {
it('should unbind `hover` trigger events when the deferred block is loaded', async () => {
@Component({
standalone: true,
template: `
@defer (
when isVisible;
@ -4067,7 +3955,6 @@ describe('@defer', () => {
const TokenB = new InjectionToken('B');
@Component({
standalone: true,
selector: 'parent-cmp',
template: '<ng-content />',
providers: [{provide: TokenA, useValue: 'TokenA.ParentCmp'}],
@ -4075,7 +3962,6 @@ describe('@defer', () => {
class ParentCmp {}
@Component({
standalone: true,
selector: 'child-cmp',
template: 'Token A: {{ parentTokenA }} | Token B: {{ parentTokenB }}',
})
@ -4085,7 +3971,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
selector: 'app-root',
template: `
<parent-cmp>
@ -4145,7 +4030,6 @@ describe('@defer', () => {
@Component({
selector: 'lazy',
standalone: true,
imports: [MyModule],
template: `
Lazy Component! Token: {{ token }}
@ -4156,7 +4040,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
imports: [Lazy],
template: `
@defer (on immediate) {
@ -4167,7 +4050,6 @@ describe('@defer', () => {
class Dialog {}
@Component({
standalone: true,
selector: 'app-root',
providers: [{provide: TokenA, useValue: 'TokenA from RootCmp'}],
template: `
@ -4260,14 +4142,12 @@ describe('@defer', () => {
@Component({
selector: 'chart-collection',
template: '<chart />',
standalone: true,
imports: [ChartsModule],
})
class ChartCollectionComponent {}
@Component({
selector: 'app-root',
standalone: true,
template: `
@for(item of items; track $index) {
@defer (when isVisible) {
@ -4336,14 +4216,12 @@ describe('@defer', () => {
class MyModuleA {}
@Component({
standalone: true,
imports: [RouterOutlet],
template: '<router-outlet />',
})
class App {}
@Component({
standalone: true,
selector: 'another-child',
imports: [CommonModule, MyModuleA],
template: 'another child: {{route.snapshot.url[0]}} | token: {{tokenA}}',
@ -4357,7 +4235,6 @@ describe('@defer', () => {
}
@Component({
standalone: true,
imports: [CommonModule, AnotherChild],
template: `
child: {{route.snapshot.url[0]}} |

11
packages/core/test/acceptance/destroy_ref_spec.ts
View file

@ -82,7 +82,6 @@ describe('DestroyRef', () => {
@Component({
selector: 'test',
standalone: true,
template: ``,
})
class TestCmp {
@ -103,7 +102,6 @@ describe('DestroyRef', () => {
@Directive({
selector: '[withCleanup]',
standalone: true,
})
class WithCleanupDirective {
constructor() {
@ -113,7 +111,6 @@ describe('DestroyRef', () => {
@Component({
selector: 'test',
standalone: true,
imports: [WithCleanupDirective],
// note: we are trying to register a LView-level cleanup _before_ TView-level one (event
// listener)
@ -136,7 +133,6 @@ describe('DestroyRef', () => {
@Directive({
selector: '[withCleanup]',
standalone: true,
})
class WithCleanupDirective {
constructor() {
@ -146,7 +142,6 @@ describe('DestroyRef', () => {
@Component({
selector: 'test',
standalone: true,
imports: [WithCleanupDirective, NgIf],
template: `<ng-template [ngIf]="show"><div withCleanup></div></ng-template>`,
})
@ -167,7 +162,6 @@ describe('DestroyRef', () => {
const onDestroySpy = jasmine.createSpy('destroy spy');
@Component({
selector: 'child',
standalone: true,
template: '',
})
class Child {
@ -176,7 +170,6 @@ describe('DestroyRef', () => {
}
}
@Component({
standalone: true,
imports: [Child, NgIf],
template: '<child *ngIf="showChild"></child>',
})
@ -197,7 +190,6 @@ describe('DestroyRef', () => {
@Component({
selector: 'test',
standalone: true,
template: ``,
})
class TestCmp {
@ -223,7 +215,6 @@ describe('DestroyRef', () => {
@Component({
selector: 'test',
standalone: true,
template: ``,
})
class TestCmp {
@ -251,7 +242,6 @@ describe('DestroyRef', () => {
it('should throw when trying to register destroy callback on destroyed LView', () => {
@Component({
selector: 'test',
standalone: true,
template: ``,
})
class TestCmp {
@ -272,7 +262,6 @@ describe('DestroyRef', () => {
@Component({
selector: 'test',
standalone: true,
template: ``,
})
class TestCmp {

65
packages/core/test/acceptance/di_spec.ts
View file

@ -309,7 +309,6 @@ describe('importProvidersFrom', () => {
class ModuleA {}
@Component({
standalone: true,
template: '',
imports: [ModuleA],
})
@ -3924,7 +3923,6 @@ describe('di', () => {
const TOKEN = new InjectionToken<string>('TOKEN');
@Component({
standalone: true,
selector: 'test-cmp',
template: '{{value}}',
providers: [{provide: TOKEN, useValue: 'injected value'}],
@ -3953,7 +3951,6 @@ describe('di', () => {
}
@Component({
standalone: true,
selector: 'test-cmp',
template: '{{service.value}}',
providers: [Service, {provide: TOKEN, useValue: 'injected value'}],
@ -3971,7 +3968,6 @@ describe('di', () => {
const TOKEN = new InjectionToken<string>('TOKEN');
@Component({
standalone: true,
selector: 'test-cmp',
template: '{{value}}',
})
@ -4048,7 +4044,6 @@ describe('di', () => {
}
@Component({
standalone: true,
selector: 'test-cmp',
template: '{{service.value}}',
providers: [{provide: TOKEN, useValue: 'injected value'}],
@ -4074,7 +4069,6 @@ describe('di', () => {
const TOKEN = new InjectionToken<string>('TOKEN');
@Component({
standalone: true,
template: '',
})
class TestCmp {
@ -4090,7 +4084,6 @@ describe('di', () => {
factory: () => 'from root',
});
@Component({
standalone: true,
template: '',
providers: [{provide: TOKEN, useValue: 'from component'}],
})
@ -4108,7 +4101,6 @@ describe('di', () => {
});
@Component({
standalone: true,
template: '',
})
class TestCmp {
@ -4122,7 +4114,6 @@ describe('di', () => {
const TOKEN = new InjectionToken<string>('TOKEN');
@Component({
standalone: true,
selector: 'child',
template: '{{value}}',
})
@ -4131,7 +4122,6 @@ describe('di', () => {
}
@Component({
standalone: true,
imports: [ChildCmp],
template: '<child></child>',
providers: [{provide: TOKEN, useValue: 'from parent'}],
@ -4151,7 +4141,6 @@ describe('di', () => {
});
@Component({
standalone: true,
template: '',
})
class TestCmp {
@ -4171,7 +4160,6 @@ describe('di', () => {
const TOKEN = new InjectionToken<string>('TOKEN');
@Component({
standalone: true,
template: '',
})
class TestCmp {
@ -4192,7 +4180,6 @@ describe('di', () => {
const TOKEN = new InjectionToken<string>('TOKEN');
@Component({
standalone: true,
template: '',
})
class TestCmp {
@ -4227,7 +4214,6 @@ describe('di', () => {
factory: () => 'from root',
});
@Component({
standalone: true,
template: '',
providers: [{provide: TOKEN, useValue: 'from component'}],
})
@ -4257,7 +4243,6 @@ describe('di', () => {
});
@Component({
standalone: true,
template: '',
})
class TestCmp {
@ -4282,7 +4267,6 @@ describe('di', () => {
const TOKEN = new InjectionToken<string>('TOKEN');
@Component({
standalone: true,
selector: 'child',
template: '{{ a }}|{{ b }}',
})
@ -4293,7 +4277,6 @@ describe('di', () => {
}
@Component({
standalone: true,
imports: [ChildCmp],
template: '<child></child>',
providers: [{provide: TOKEN, useValue: 'from parent'}],
@ -4364,7 +4347,6 @@ describe('di', () => {
});
@Component({
standalone: true,
template: '',
providers: [{provide: TOKEN, useValue: 'from component'}],
})
@ -4389,7 +4371,6 @@ describe('di', () => {
it('should support node injectors', () => {
@Component({
standalone: true,
template: '',
})
class TestCmp {
@ -4905,13 +4886,12 @@ describe('di', () => {
describe('HostAttributeToken', () => {
it('should inject an attribute on an element node', () => {
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir {
value = inject(new HostAttributeToken('some-attr'));
}
@Component({
standalone: true,
template: '<div dir some-attr="foo" other="ignore"></div>',
imports: [Dir],
})
@ -4925,13 +4905,12 @@ describe('di', () => {
});
it('should inject an attribute on <ng-template>', () => {
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir {
value = inject(new HostAttributeToken('some-attr'));
}
@Component({
standalone: true,
template: '<ng-template dir some-attr="foo" other="ignore"></ng-template>',
imports: [Dir],
})
@ -4945,13 +4924,12 @@ describe('di', () => {
});
it('should inject an attribute on <ng-container>', () => {
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir {
value = inject(new HostAttributeToken('some-attr'));
}
@Component({
standalone: true,
template: '<ng-container dir some-attr="foo" other="ignore"></ng-container>',
imports: [Dir],
})
@ -4965,7 +4943,7 @@ describe('di', () => {
});
it('should be able to inject different kinds of attributes', () => {
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir {
className = inject(new HostAttributeToken('class'));
inlineStyles = inject(new HostAttributeToken('style'));
@ -4973,7 +4951,6 @@ describe('di', () => {
}
@Component({
standalone: true,
template: `
<div
dir
@ -4999,13 +4976,12 @@ describe('di', () => {
});
it('should throw a DI error when injecting a non-existent attribute', () => {
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir {
value = inject(new HostAttributeToken('some-attr'));
}
@Component({
standalone: true,
template: '<div dir other="ignore"></div>',
imports: [Dir],
})
@ -5019,13 +4995,12 @@ describe('di', () => {
});
it('should not throw a DI error when injecting a non-existent attribute with optional: true', () => {
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir {
value = inject(new HostAttributeToken('some-attr'), {optional: true});
}
@Component({
standalone: true,
template: '<div dir other="ignore"></div>',
imports: [Dir],
})
@ -5039,7 +5014,7 @@ describe('di', () => {
});
it('should not inject attributes with namespace', () => {
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir {
value = inject(new HostAttributeToken('some-attr'), {optional: true});
namespaceExists = inject(new HostAttributeToken('svg:exist'), {optional: true});
@ -5047,7 +5022,6 @@ describe('di', () => {
}
@Component({
standalone: true,
template: `
<div dir some-attr="foo" svg:exists="testExistValue" other="otherValue"></div>
`,
@ -5067,7 +5041,7 @@ describe('di', () => {
});
it('should not inject attributes representing bindings and outputs', () => {
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir {
@Input() binding!: string;
@Output() output = new EventEmitter();
@ -5079,7 +5053,6 @@ describe('di', () => {
}
@Component({
standalone: true,
imports: [Dir],
template: `
<div
@ -5107,13 +5080,12 @@ describe('di', () => {
});
it('should not inject data-bound attributes', () => {
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir {
value = inject(new HostAttributeToken('title'), {optional: true});
}
@Component({
standalone: true,
template: '<div dir title="foo {{value}}" other="ignore"></div>',
imports: [Dir],
})
@ -5132,13 +5104,12 @@ describe('di', () => {
it('should inject an attribute using @Inject', () => {
const TOKEN = new HostAttributeToken('some-attr');
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir {
constructor(@Inject(TOKEN) readonly value: string) {}
}
@Component({
standalone: true,
template: '<div dir some-attr="foo" other="ignore"></div>',
imports: [Dir],
})
@ -5154,13 +5125,12 @@ describe('di', () => {
it('should throw when injecting a non-existent attribute using @Inject', () => {
const TOKEN = new HostAttributeToken('some-attr');
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir {
constructor(@Inject(TOKEN) readonly value: string) {}
}
@Component({
standalone: true,
template: '<div dir other="ignore"></div>',
imports: [Dir],
})
@ -5176,13 +5146,12 @@ describe('di', () => {
it('should not throw when injecting a non-existent attribute using @Inject @Optional', () => {
const TOKEN = new HostAttributeToken('some-attr');
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir {
constructor(@Inject(TOKEN) @Optional() readonly value: string | null) {}
}
@Component({
standalone: true,
template: '<div dir other="ignore"></div>',
imports: [Dir],
})
@ -5198,13 +5167,12 @@ describe('di', () => {
describe('HOST_TAG_NAME', () => {
it('should inject the tag name on an element node', () => {
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir {
value = inject(HOST_TAG_NAME);
}
@Component({
standalone: true,
template: `
<div dir #v1></div>
<span dir #v2></span>
@ -5232,13 +5200,12 @@ describe('di', () => {
});
it('should throw a DI error when injecting into non-DOM nodes', () => {
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir {
value = inject(HOST_TAG_NAME);
}
@Component({
standalone: true,
template: '<ng-container dir></ng-container>',
imports: [Dir],
})
@ -5247,7 +5214,6 @@ describe('di', () => {
}
@Component({
standalone: true,
template: '<ng-template dir></ng-template>',
imports: [Dir],
})
@ -5265,13 +5231,12 @@ describe('di', () => {
});
it('should not throw a DI error when injecting into non-DOM nodes with optional: true', () => {
@Directive({selector: '[dir]', standalone: true})
@Directive({selector: '[dir]'})
class Dir {
value = inject(HOST_TAG_NAME, {optional: true});
}
@Component({
standalone: true,
template: '<ng-container dir></ng-container>',
imports: [Dir],
})

2
packages/core/test/acceptance/directive_spec.ts
View file

@ -864,7 +864,7 @@ describe('directives', () => {
});
it('should transform aliased inputs coming from host directives', () => {
@Directive({standalone: true})
@Directive()
class HostDir {
@Input({transform: (value: string) => (value ? 1 : 0)}) value = -1;
}

8
packages/core/test/acceptance/env_injector_standalone_spec.ts
View file

@ -25,7 +25,7 @@ describe('environment injector and standalone components', () => {
@NgModule({providers: [ModuleService]})
class Module {}
@Component({standalone: true, imports: [Module]})
@Component({imports: [Module]})
class StandaloneComponent {}
const parentEnvInjector = TestBed.inject(EnvironmentInjector);
@ -42,7 +42,7 @@ describe('environment injector and standalone components', () => {
@NgModule({providers: [ModuleService]})
class Module {}
@Component({standalone: true, imports: [Module]})
@Component({imports: [Module]})
class StandaloneComponent {}
@NgModule({imports: [StandaloneComponent], exports: [StandaloneComponent]})
@ -62,10 +62,10 @@ describe('environment injector and standalone components', () => {
@NgModule({providers: [{provide: ModuleService, useClass: ModuleService, multi: true}]})
class Module {}
@Component({standalone: true, imports: [Module]})
@Component({imports: [Module]})
class StandaloneComponent1 {}
@Component({standalone: true, imports: [Module]})
@Component({imports: [Module]})
class StandaloneComponent2 {}
@NgModule({

1
packages/core/test/acceptance/environment_injector_spec.ts
View file

@ -233,7 +233,6 @@ describe('environment injector', () => {
});
@Component({
standalone: true,
template: '',
providers: [{provide: TOKEN, useValue: 'from component'}],
})

92
packages/core/test/acceptance/hmr_spec.ts
View file

@ -44,7 +44,6 @@ describe('hot module replacement', () => {
let instance!: ChildCmp;
const initialMetadata: Component = {
selector: 'child-cmp',
standalone: true,
template: 'Hello <strong>{{state}}</strong>',
};
@ -58,7 +57,6 @@ describe('hot module replacement', () => {
}
@Component({
standalone: true,
imports: [ChildCmp],
template: '<child-cmp/>',
})
@ -111,7 +109,6 @@ describe('hot module replacement', () => {
it('should recreate multiple usages of a complex component', () => {
const initialMetadata: Component = {
selector: 'child-cmp',
standalone: true,
template: '<span>ChildCmp (orig)</span><h1>{{ text }}</h1>',
};
@ -121,7 +118,6 @@ describe('hot module replacement', () => {
}
@Component({
standalone: true,
imports: [ChildCmp],
template: `
<i>Unrelated node #1</i>
@ -204,7 +200,6 @@ describe('hot module replacement', () => {
it('should not recreate sub-classes of a component being replaced', () => {
const initialMetadata: Component = {
selector: 'child-cmp',
standalone: true,
template: 'Base class',
};
@ -213,13 +208,11 @@ describe('hot module replacement', () => {
@Component({
selector: 'child-sub-cmp',
standalone: true,
template: 'Sub class',
})
class ChildSubCmp extends ChildCmp {}
@Component({
standalone: true,
imports: [ChildCmp, ChildSubCmp],
template: `<child-cmp/>|<child-sub-cmp/>`,
})
@ -275,7 +268,6 @@ describe('hot module replacement', () => {
}
@Component({
standalone: true,
imports: [ChildCmp],
template: '<child-cmp/>',
})
@ -313,7 +305,6 @@ describe('hot module replacement', () => {
it('should continue binding inputs to a component that is replaced', () => {
const initialMetadata: Component = {
selector: 'child-cmp',
standalone: true,
template: '<span>{{staticValue}}</span><strong>{{dynamicValue}}</strong>',
};
@ -324,7 +315,6 @@ describe('hot module replacement', () => {
}
@Component({
standalone: true,
imports: [ChildCmp],
template: `<child-cmp staticValue="1" [dynamicValue]="dynamicValue"/>`,
})
@ -397,7 +387,6 @@ describe('hot module replacement', () => {
it('should recreate a component used inside @for', () => {
const initialMetadata: Component = {
selector: 'child-cmp',
standalone: true,
template: 'Hello <strong>{{value}}</strong>',
};
@ -407,7 +396,6 @@ describe('hot module replacement', () => {
}
@Component({
standalone: true,
imports: [ChildCmp],
template: `
@for (current of items; track current.id) {
@ -482,7 +470,6 @@ describe('hot module replacement', () => {
it('should be able to replace a component that injects ViewContainerRef', () => {
const initialMetadata: Component = {
selector: 'child-cmp',
standalone: true,
template: 'Hello <strong>world</strong>',
};
@ -492,7 +479,6 @@ describe('hot module replacement', () => {
}
@Component({
standalone: true,
imports: [ChildCmp],
template: '<child-cmp/>',
})
@ -565,7 +551,6 @@ describe('hot module replacement', () => {
it('should update ViewChildren query results', async () => {
@Component({
selector: 'child-cmp',
standalone: true,
template: '<span>ChildCmp {{ text }}</span>',
})
class ChildCmp {
@ -574,7 +559,6 @@ describe('hot module replacement', () => {
let instance!: ParentCmp;
const initialMetadata: Component = {
standalone: true,
selector: 'parent-cmp',
imports: [ChildCmp],
template: `
@ -593,7 +577,6 @@ describe('hot module replacement', () => {
}
@Component({
standalone: true,
imports: [ParentCmp],
template: `<parent-cmp/>`,
})
@ -623,7 +606,6 @@ describe('hot module replacement', () => {
it('should update ViewChild when the string points to a different element', async () => {
let instance!: ParentCmp;
const initialMetadata: Component = {
standalone: true,
selector: 'parent-cmp',
template: `
<div>
@ -644,7 +626,6 @@ describe('hot module replacement', () => {
}
@Component({
standalone: true,
imports: [ParentCmp],
template: `<parent-cmp/>`,
})
@ -677,14 +658,12 @@ describe('hot module replacement', () => {
const token = new InjectionToken<DirA | DirB>('token');
@Directive({
standalone: true,
selector: '[dir-a]',
providers: [{provide: token, useExisting: DirA}],
})
class DirA {}
@Directive({
standalone: true,
selector: '[dir-b]',
providers: [{provide: token, useExisting: DirB}],
})
@ -692,7 +671,6 @@ describe('hot module replacement', () => {
let instance!: ParentCmp;
const initialMetadata: Component = {
standalone: true,
selector: 'parent-cmp',
imports: [DirA, DirB],
template: `<div #ref dir-a></div>`,
@ -708,7 +686,6 @@ describe('hot module replacement', () => {
}
@Component({
standalone: true,
imports: [ParentCmp],
template: `<parent-cmp/>`,
})
@ -735,7 +712,6 @@ describe('hot module replacement', () => {
const token = new InjectionToken<Dir>('token');
@Directive({
standalone: true,
selector: '[dir]',
providers: [{provide: token, useExisting: Dir}],
})
@ -743,7 +719,6 @@ describe('hot module replacement', () => {
let instance!: ParentCmp;
const initialMetadata: Component = {
standalone: true,
selector: 'parent-cmp',
imports: [Dir],
template: `<div #ref dir></div>`,
@ -759,7 +734,6 @@ describe('hot module replacement', () => {
}
@Component({
standalone: true,
imports: [ParentCmp],
template: `<parent-cmp/>`,
})
@ -782,7 +756,6 @@ describe('hot module replacement', () => {
describe('content projection', () => {
it('should work with content projection', () => {
const initialMetadata: Component = {
standalone: true,
selector: 'parent-cmp',
template: `<ng-content/>`,
};
@ -791,7 +764,6 @@ describe('hot module replacement', () => {
class ParentCmp {}
@Component({
standalone: true,
imports: [ParentCmp],
template: `
<parent-cmp>
@ -848,7 +820,6 @@ describe('hot module replacement', () => {
it('should handle elements moving around into different slots', () => {
// Start off with a single catch-all slot.
const initialMetadata: Component = {
standalone: true,
selector: 'parent-cmp',
template: `<ng-content/>`,
};
@ -857,7 +828,6 @@ describe('hot module replacement', () => {
class ParentCmp {}
@Component({
standalone: true,
imports: [ParentCmp],
template: `
<parent-cmp>
@ -934,7 +904,6 @@ describe('hot module replacement', () => {
it('should handle default content for ng-content', () => {
const initialMetadata: Component = {
standalone: true,
selector: 'parent-cmp',
template: `
<ng-content select="will-not-match">
@ -947,7 +916,6 @@ describe('hot module replacement', () => {
class ParentCmp {}
@Component({
standalone: true,
imports: [ParentCmp],
template: `
<parent-cmp>
@ -993,7 +961,6 @@ describe('hot module replacement', () => {
it('should only invoke the init/destroy hooks inside the content when replacing the template', () => {
@Component({
template: '',
standalone: true,
selector: 'child-cmp',
})
class ChildCmp implements OnInit, OnDestroy {
@ -1009,7 +976,6 @@ describe('hot module replacement', () => {
}
const initialMetadata: Component = {
standalone: true,
template: `
<child-cmp text="A"/>
<child-cmp text="B"/>
@ -1039,7 +1005,6 @@ describe('hot module replacement', () => {
<parent-cmp text="A"/>
<parent-cmp text="B"/>
`,
standalone: true,
imports: [ParentCmp],
})
class RootCmp {}
@ -1099,7 +1064,6 @@ describe('hot module replacement', () => {
it('should invoke checked hooks both on the host and the content being replaced', () => {
@Component({
template: '',
standalone: true,
selector: 'child-cmp',
})
class ChildCmp implements DoCheck {
@ -1111,7 +1075,6 @@ describe('hot module replacement', () => {
}
const initialMetadata: Component = {
standalone: true,
template: `<child-cmp text="A"/>`,
imports: [ChildCmp],
selector: 'parent-cmp',
@ -1127,7 +1090,6 @@ describe('hot module replacement', () => {
@Component({
template: `<parent-cmp/>`,
standalone: true,
imports: [ParentCmp],
})
class RootCmp {}
@ -1187,7 +1149,6 @@ describe('hot module replacement', () => {
const values: string[] = [];
const initialMetadata: Component = {
selector: 'child-cmp',
standalone: true,
template: '',
};
@ -1204,7 +1165,6 @@ describe('hot module replacement', () => {
}
@Component({
standalone: true,
imports: [ChildCmp],
template: `<child-cmp [value]="value"/>`,
})
@ -1261,7 +1221,6 @@ describe('hot module replacement', () => {
let count = 0;
const initialMetadata: Component = {
selector: 'child-cmp',
standalone: true,
template: '<button (click)="clicked()"></button>',
};
@ -1275,7 +1234,6 @@ describe('hot module replacement', () => {
}
@Component({
standalone: true,
imports: [ChildCmp],
template: `<child-cmp (changed)="onChange()"/>`,
})
@ -1313,7 +1271,6 @@ describe('hot module replacement', () => {
let count = 0;
const initialMetadata: Component = {
selector: 'child-cmp',
standalone: true,
template: '<button (click)="clicked()"></button>',
};
@ -1327,7 +1284,6 @@ describe('hot module replacement', () => {
}
@Component({
standalone: true,
imports: [ChildCmp],
template: `<child-cmp (changed)="onChange()"/>`,
})
@ -1409,7 +1365,6 @@ describe('hot module replacement', () => {
let destroyCount = 0;
const initialMetadata: Component = {
selector: 'child-cmp',
standalone: true,
template: '',
};
@ -1424,7 +1379,7 @@ describe('hot module replacement', () => {
}
}
@Directive({selector: '[dir-a]', standalone: true})
@Directive({selector: '[dir-a]'})
class DirA implements OnDestroy {
constructor() {
initLog.push('DirA init');
@ -1435,7 +1390,7 @@ describe('hot module replacement', () => {
}
}
@Directive({selector: '[dir-b]', standalone: true})
@Directive({selector: '[dir-b]'})
class DirB implements OnDestroy {
constructor() {
initLog.push('DirB init');
@ -1447,7 +1402,6 @@ describe('hot module replacement', () => {
}
@Component({
standalone: true,
imports: [ChildCmp, DirA, DirB],
template: `<child-cmp dir-a dir-b/>`,
})
@ -1472,7 +1426,7 @@ describe('hot module replacement', () => {
const initLog: string[] = [];
let destroyCount = 0;
@Directive({selector: '[dir-a]', standalone: true})
@Directive({selector: '[dir-a]'})
class DirA implements OnDestroy {
constructor() {
initLog.push('DirA init');
@ -1483,7 +1437,7 @@ describe('hot module replacement', () => {
}
}
@Directive({selector: '[dir-b]', standalone: true})
@Directive({selector: '[dir-b]'})
class DirB implements OnDestroy {
constructor() {
initLog.push('DirB init');
@ -1496,7 +1450,6 @@ describe('hot module replacement', () => {
const initialMetadata: Component = {
selector: 'child-cmp',
standalone: true,
template: '',
hostDirectives: [DirA, DirB],
};
@ -1513,7 +1466,6 @@ describe('hot module replacement', () => {
}
@Component({
standalone: true,
imports: [ChildCmp],
template: '<child-cmp/>',
})
@ -1540,14 +1492,14 @@ describe('hot module replacement', () => {
let instance!: ChildCmp;
const injectedInstances: [unknown, ChildCmp][] = [];
@Directive({selector: '[dir-a]', standalone: true})
@Directive({selector: '[dir-a]'})
class DirA {
constructor() {
injectedInstances.push([this, inject(ChildCmp)]);
}
}
@Directive({selector: '[dir-b]', standalone: true})
@Directive({selector: '[dir-b]'})
class DirB {
constructor() {
injectedInstances.push([this, inject(ChildCmp)]);
@ -1556,7 +1508,6 @@ describe('hot module replacement', () => {
const initialMetadata: Component = {
selector: 'child-cmp',
standalone: true,
template: '<div dir-a></div>',
imports: [DirA, DirB],
};
@ -1569,7 +1520,6 @@ describe('hot module replacement', () => {
}
@Component({
standalone: true,
imports: [ChildCmp],
template: '<child-cmp/>',
})
@ -1596,14 +1546,14 @@ describe('hot module replacement', () => {
const token = new InjectionToken<string>('TEST_TOKEN');
const injectedValues: [unknown, string][] = [];
@Directive({selector: '[dir-a]', standalone: true})
@Directive({selector: '[dir-a]'})
class DirA {
constructor() {
injectedValues.push([this, inject(token)]);
}
}
@Directive({selector: '[dir-b]', standalone: true})
@Directive({selector: '[dir-b]'})
class DirB {
constructor() {
injectedValues.push([this, inject(token)]);
@ -1612,7 +1562,6 @@ describe('hot module replacement', () => {
const initialMetadata: Component = {
selector: 'child-cmp',
standalone: true,
template: '<div dir-a></div>',
imports: [DirA, DirB],
providers: [{provide: token, useValue: 'provided value'}],
@ -1622,7 +1571,6 @@ describe('hot module replacement', () => {
class ChildCmp {}
@Component({
standalone: true,
imports: [ChildCmp],
template: '<child-cmp/>',
})
@ -1648,14 +1596,14 @@ describe('hot module replacement', () => {
const token = new InjectionToken<string>('TEST_TOKEN');
const injectedValues: [unknown, string][] = [];
@Directive({selector: '[dir-a]', standalone: true})
@Directive({selector: '[dir-a]'})
class DirA {
constructor() {
injectedValues.push([this, inject(token)]);
}
}
@Directive({selector: '[dir-b]', standalone: true})
@Directive({selector: '[dir-b]'})
class DirB {
constructor() {
injectedValues.push([this, inject(token)]);
@ -1664,7 +1612,6 @@ describe('hot module replacement', () => {
const initialMetadata: Component = {
selector: 'child-cmp',
standalone: true,
template: '<div dir-a></div>',
imports: [DirA, DirB],
viewProviders: [{provide: token, useValue: 'provided value'}],
@ -1674,7 +1621,6 @@ describe('hot module replacement', () => {
class ChildCmp {}
@Component({
standalone: true,
imports: [ChildCmp],
template: '<child-cmp/>',
})
@ -1701,7 +1647,6 @@ describe('hot module replacement', () => {
it('should maintain attribute host bindings on a replaced component', () => {
const initialMetadata: Component = {
selector: 'child-cmp',
standalone: true,
template: 'Hello',
host: {
'[attr.bar]': 'state',
@ -1714,7 +1659,6 @@ describe('hot module replacement', () => {
}
@Component({
standalone: true,
imports: [ChildCmp],
template: `<child-cmp [state]="state" [attr.foo]="'The state is ' + state"/>`,
})
@ -1755,7 +1699,6 @@ describe('hot module replacement', () => {
it('should maintain class host bindings on a replaced component', () => {
const initialMetadata: Component = {
selector: 'child-cmp',
standalone: true,
template: 'Hello',
host: {
'[class.bar]': 'state',
@ -1768,7 +1711,6 @@ describe('hot module replacement', () => {
}
@Component({
standalone: true,
imports: [ChildCmp],
template: `<child-cmp class="static" [state]="state" [class.foo]="state"/>`,
})
@ -1796,7 +1738,6 @@ describe('hot module replacement', () => {
it('should maintain style host bindings on a replaced component', () => {
const initialMetadata: Component = {
selector: 'child-cmp',
standalone: true,
template: 'Hello',
host: {
'[style.height]': 'state ? "5px" : "20px"',
@ -1809,7 +1750,6 @@ describe('hot module replacement', () => {
}
@Component({
standalone: true,
imports: [ChildCmp],
template: `<child-cmp style="opacity: 0.5;" [state]="state" [style.width]="state ? '3px' : '12px'"/>`,
})
@ -1860,7 +1800,6 @@ describe('hot module replacement', () => {
const initialMetadata: Component = {
selector: 'child-cmp',
standalone: true,
template: '<span i18n>hello</span>',
};
@ -1868,7 +1807,6 @@ describe('hot module replacement', () => {
class ChildCmp {}
@Component({
standalone: true,
imports: [ChildCmp],
template: '<child-cmp/>',
})
@ -1888,7 +1826,6 @@ describe('hot module replacement', () => {
const initialMetadata: Component = {
selector: 'child-cmp',
standalone: true,
template: '<ng-content/>',
};
@ -1896,7 +1833,6 @@ describe('hot module replacement', () => {
class ChildCmp {}
@Component({
standalone: true,
imports: [ChildCmp],
template: `<child-cmp i18n>hello</child-cmp>`,
})
@ -1931,7 +1867,6 @@ describe('hot module replacement', () => {
let instance!: ChildCmp;
const initialMetadata: Component = {
selector: 'child-cmp',
standalone: true,
template: '<span i18n>Hello {{name}}!</span>',
};
@ -1945,7 +1880,6 @@ describe('hot module replacement', () => {
}
@Component({
standalone: true,
imports: [ChildCmp],
template: '<child-cmp/>',
})
@ -1984,7 +1918,6 @@ describe('hot module replacement', () => {
const initialMetadata: Component = {
selector: 'child-cmp',
standalone: true,
template: '<ng-content/>',
};
@ -1992,7 +1925,6 @@ describe('hot module replacement', () => {
class ChildCmp {}
@Component({
standalone: true,
imports: [ChildCmp],
template: '<child-cmp i18n>Hello {{name}}!</child-cmp>',
})
@ -2037,7 +1969,6 @@ describe('hot module replacement', () => {
let instance!: ChildCmp;
const initialMetadata: Component = {
selector: 'child-cmp',
standalone: true,
template: '<span i18n>{count, select, 10 {ten} 20 {twenty} other {other}}</span>',
};
@ -2051,7 +1982,6 @@ describe('hot module replacement', () => {
}
@Component({
standalone: true,
imports: [ChildCmp],
template: '<child-cmp/>',
})
@ -2092,7 +2022,6 @@ describe('hot module replacement', () => {
const initialMetadata: Component = {
selector: 'child-cmp',
standalone: true,
template: '<ng-content/>',
};
@ -2100,7 +2029,6 @@ describe('hot module replacement', () => {
class ChildCmp {}
@Component({
standalone: true,
imports: [ChildCmp],
template: '<child-cmp i18n>{count, select, 10 {ten} 20 {twenty} other {other}}</child-cmp>',
})

283
packages/core/test/acceptance/host_directives_spec.ts
View file

File diff suppressed because it is too large Load diff

1
packages/core/test/acceptance/i18n_spec.ts
View file

@ -563,7 +563,6 @@ describe('runtime i18n', () => {
@Component({
selector: 'defer-comp',
standalone: true,
template:
'<div i18n>Content: @defer (when isLoaded) {before<span>middle</span>after} ' +
'@placeholder {before<div>placeholder</div>after}!</div>',

4
packages/core/test/acceptance/inherit_definition_feature_spec.ts
View file

@ -794,14 +794,12 @@ describe('inheritance', () => {
}
@Directive({
standalone: true,
selector: 'dir',
inputs: ['someInput'],
})
class ActualDir extends Base {}
@Component({
standalone: true,
imports: [ActualDir],
template: `<dir someInput="newValue">`,
})
@ -825,13 +823,11 @@ describe('inheritance', () => {
}
@Directive({
standalone: true,
selector: 'dir',
})
class ActualDir extends Base {}
@Component({
standalone: true,
imports: [ActualDir],
template: `<dir publicName="newValue">`,
})

24
packages/core/test/acceptance/injector_profiler_spec.ts
View file

@ -385,7 +385,6 @@ describe('getInjectorMetadata', () => {
@Component({
selector: 'lazy-comp',
template: `lazy component`,
standalone: true,
imports: [ModuleB],
})
class LazyComponent {
@ -398,7 +397,6 @@ describe('getInjectorMetadata', () => {
}
@Component({
standalone: true,
imports: [RouterOutlet, ModuleA],
template: `<router-outlet/>`,
})
@ -667,7 +665,6 @@ describe('getInjectorProviders', () => {
selector: 'my-comp-c',
template: 'hello world',
imports: [ModuleE, ModuleC],
standalone: true,
})
class MyStandaloneComponentC {}
@ -675,7 +672,6 @@ describe('getInjectorProviders', () => {
selector: 'my-comp-b',
template: 'hello world',
imports: [ModuleD, ModuleF],
standalone: true,
})
class MyStandaloneComponentB {}
@ -686,7 +682,6 @@ describe('getInjectorProviders', () => {
<my-comp-c/>
`,
imports: [ModuleD, MyStandaloneComponentB, MyStandaloneComponentC],
standalone: true,
})
class MyStandaloneComponent {}
@ -743,7 +738,6 @@ describe('getInjectorProviders', () => {
selector: 'my-comp-b',
template: 'hello world',
imports: [ModuleA],
standalone: true,
})
class MyStandaloneComponentB {
injector = inject(Injector);
@ -753,7 +747,6 @@ describe('getInjectorProviders', () => {
selector: 'my-comp',
template: `<router-outlet/>`,
imports: [MyStandaloneComponentB, RouterOutlet],
standalone: true,
})
class MyStandaloneComponent {
injector = inject(Injector);
@ -809,7 +802,7 @@ describe('getInjectorProviders', () => {
it('should be able to determine providers in a lazy route that has providers', fakeAsync(() => {
class MyService {}
@Component({selector: 'my-comp-b', template: 'hello world', standalone: true})
@Component({selector: 'my-comp-b', template: 'hello world'})
class MyStandaloneComponentB {
injector = inject(Injector);
}
@ -818,7 +811,6 @@ describe('getInjectorProviders', () => {
selector: 'my-comp',
template: `<router-outlet/>`,
imports: [MyStandaloneComponentB, RouterOutlet],
standalone: true,
})
class MyStandaloneComponent {
injector = inject(Injector);
@ -871,7 +863,7 @@ describe('getInjectorProviders', () => {
it('should be able to get injector providers for element injectors created by components rendering in an ngFor', () => {
class MyService {}
@Component({selector: 'item-cmp', template: 'item', standalone: true, providers: [MyService]})
@Component({selector: 'item-cmp', template: 'item', providers: [MyService]})
class ItemComponent {
injector = inject(Injector);
}
@ -882,7 +874,6 @@ describe('getInjectorProviders', () => {
<item-cmp *ngFor="let item of items"></item-cmp>
`,
imports: [ItemComponent, NgForOf],
standalone: true,
})
class MyStandaloneComponent {
injector = inject(Injector);
@ -911,7 +902,7 @@ describe('getInjectorProviders', () => {
it('should be able to get injector providers for element injectors created by components rendering in a @for', () => {
class MyService {}
@Component({selector: 'item-cmp', template: 'item', standalone: true, providers: [MyService]})
@Component({selector: 'item-cmp', template: 'item', providers: [MyService]})
class ItemComponent {
injector = inject(Injector);
}
@ -924,7 +915,6 @@ describe('getInjectorProviders', () => {
}
`,
imports: [ItemComponent],
standalone: true,
})
class MyStandaloneComponent {
injector = inject(Injector);
@ -978,7 +968,6 @@ describe('getDependenciesFromInjectable', () => {
@Directive({
selector: '[my-directive]',
standalone: true,
})
class MyStandaloneDirective {
serviceFromHost = inject(MyServiceH, {host: true, optional: true});
@ -993,7 +982,6 @@ describe('getDependenciesFromInjectable', () => {
selector: 'my-comp-c',
template: 'hello world',
imports: [],
standalone: true,
})
class MyStandaloneComponentC {}
@ -1001,7 +989,6 @@ describe('getDependenciesFromInjectable', () => {
selector: 'my-comp-b',
template: '<my-comp-c my-directive/>',
imports: [MyStandaloneComponentC, MyStandaloneDirective],
standalone: true,
})
class MyStandaloneComponentB {
myService = inject(MyService, {optional: true});
@ -1019,7 +1006,6 @@ describe('getDependenciesFromInjectable', () => {
template: `<router-outlet/>`,
imports: [RouterOutlet, ModuleA],
providers: [MyServiceG, {provide: MyServiceH, useValue: 'MyStandaloneComponent'}],
standalone: true,
})
class MyStandaloneComponent {
injector = inject(Injector);
@ -1182,7 +1168,7 @@ describe('getDependenciesFromInjectable', () => {
@NgModule({imports: [ModuleB, ModuleC]})
class ModuleD {}
@Component({selector: 'my-comp', template: 'hello world', imports: [ModuleD], standalone: true})
@Component({selector: 'my-comp', template: 'hello world', imports: [ModuleD]})
class MyStandaloneComponent {
myService = inject(MyService);
}
@ -1262,7 +1248,6 @@ describe('getInjectorResolutionPath', () => {
@Component({
selector: 'lazy-comp',
template: `lazy component`,
standalone: true,
imports: [ModuleB],
})
class LazyComponent {
@ -1272,7 +1257,6 @@ describe('getInjectorResolutionPath', () => {
}
@Component({
standalone: true,
imports: [RouterOutlet, ModuleA],
template: `<router-outlet/>`,
})

1
packages/core/test/acceptance/integration_spec.ts
View file

@ -2718,7 +2718,6 @@ describe('acceptance integration tests', () => {
it('should support template literals in expressions', () => {
@Component({
standalone: true,
template: 'Message: {{`Hello, ${name} - ${value}`}}',
})
class TestComponent {

11
packages/core/test/acceptance/internal_spec.ts
View file

@ -21,7 +21,6 @@ describe('internal utilities', () => {
describe('getClosestComponentName', () => {
it('should get the name from a node placed inside a root component', () => {
@Component({
standalone: true,
template: `<section><div class="target"></div></section>`,
})
class App {}
@ -36,12 +35,10 @@ describe('internal utilities', () => {
@Component({
selector: 'comp',
template: `<section><div class="target"></div></section>`,
standalone: true,
})
class Comp {}
@Component({
standalone: true,
template: `<comp/>`,
imports: [Comp],
})
@ -57,12 +54,10 @@ describe('internal utilities', () => {
@Component({
selector: 'comp',
template: `<section><div class="target"></div></section>`,
standalone: true,
})
class Comp {}
@Component({
standalone: true,
template: `
@for (current of [1]; track $index) {
<comp/>
@ -81,12 +76,10 @@ describe('internal utilities', () => {
it('should get the name from a node that has a directive', () => {
@Directive({
selector: 'dir',
standalone: true,
})
class Dir {}
@Component({
standalone: true,
template: `<section><dir class="target"></dir></section>`,
imports: [Dir],
})
@ -100,7 +93,6 @@ describe('internal utilities', () => {
it('should return null when not placed in a component', () => {
@Component({
standalone: true,
template: '',
})
class App {}
@ -114,12 +106,10 @@ describe('internal utilities', () => {
@Component({
selector: 'comp',
template: `<section><div class="target"></div></section>`,
standalone: true,
})
class Comp {}
@Component({
standalone: true,
template: `<ng-container #insertionPoint/>`,
})
class App {
@ -141,7 +131,6 @@ describe('internal utilities', () => {
@Component({
selector: 'comp',
template: `<section><div class="target"></div></section>`,
standalone: true,
})
class Comp {}

21
packages/core/test/acceptance/let_spec.ts
View file

@ -23,7 +23,6 @@ import {TestBed} from '@angular/core/testing';
describe('@let declarations', () => {
it('should update the value of a @let declaration over time', () => {
@Component({
standalone: true,
template: `
@let multiplier = 2;
@let result = value * multiplier;
@ -51,7 +50,6 @@ describe('@let declarations', () => {
const values: number[] = [];
@Component({
standalone: true,
template: `
@let result = value * 2;
<button (click)="log(result)"></button>
@ -81,7 +79,6 @@ describe('@let declarations', () => {
it('should be able to access @let declarations through multiple levels of views', () => {
@Component({
standalone: true,
template: `
@if (true) {
@if (true) {
@ -110,7 +107,6 @@ describe('@let declarations', () => {
it('should be able to access @let declarations from parent view before they are declared', () => {
@Component({
standalone: true,
template: `
@if (true) {
{{value}} times {{multiplier}} is {{result}}
@ -142,7 +138,6 @@ describe('@let declarations', () => {
@Directive({
selector: '[dir]',
standalone: true,
})
class TestDirective {
@Output() testEvent = new EventEmitter<void>();
@ -153,7 +148,6 @@ describe('@let declarations', () => {
}
@Component({
standalone: true,
imports: [TestDirective],
template: `
<div dir (testEvent)="callback(value)"></div>
@ -186,7 +180,7 @@ describe('@let declarations', () => {
});
it('should be able to use pipes injecting ChangeDetectorRef in a let declaration', () => {
@Pipe({name: 'double', standalone: true})
@Pipe({name: 'double'})
class DoublePipe implements PipeTransform {
changeDetectorRef = inject(ChangeDetectorRef);
@ -196,7 +190,6 @@ describe('@let declarations', () => {
}
@Component({
standalone: true,
template: `
@let result = value | double;
Result: {{result}}
@ -218,7 +211,6 @@ describe('@let declarations', () => {
it('should be able to use local references inside @let declarations', () => {
@Component({
standalone: true,
template: `
<input #firstName value="Frodo" name="first-name">
<input #lastName value="Baggins">
@ -240,7 +232,6 @@ describe('@let declarations', () => {
it('should be able to proxy a local reference through @let declarations', () => {
@Component({
standalone: true,
template: `
<input #input value="foo">
@ -271,7 +262,6 @@ describe('@let declarations', () => {
let calls = 0;
@Component({
standalone: true,
template: `
@let one = getOne();
@let two = one + getTwo();
@ -302,7 +292,6 @@ describe('@let declarations', () => {
it('should resolve a @let declaration correctly within an embedded view that uses a value from parent view and cannot be optimized', () => {
@Component({
standalone: true,
template: `
@let foo = value + 1;
@ -333,7 +322,6 @@ describe('@let declarations', () => {
it('should not be able to access @let declarations using a query', () => {
@Component({
standalone: true,
template: `
@let value = 1;
{{value}}
@ -355,12 +343,10 @@ describe('@let declarations', () => {
@let value = 123;
<ng-content>The value is {{value}}</ng-content>
`,
standalone: true,
})
class InnerComponent {}
@Component({
standalone: true,
template: '<inner/>',
imports: [InnerComponent],
})
@ -379,12 +365,10 @@ describe('@let declarations', () => {
<ng-content>Fallback content</ng-content>
<ng-content select="footer">Fallback footer</ng-content>
`,
standalone: true,
})
class InnerComponent {}
@Component({
standalone: true,
template: `
<inner>
@let one = 1;
@ -408,7 +392,6 @@ describe('@let declarations', () => {
it('should give precedence to @let declarations over component properties', () => {
@Component({
standalone: true,
template: `
@let value = '@let';
@ -428,7 +411,6 @@ describe('@let declarations', () => {
it('should give precedence to local @let definition over one from a parent view', () => {
@Component({
standalone: true,
template: `
@let value = 'parent';
@ -447,7 +429,6 @@ describe('@let declarations', () => {
it('should be able to use @for loop variables in @let declarations', () => {
@Component({
standalone: true,
template: `
@for (value of values; track $index) {
@let calculation = value * $index;

12
packages/core/test/acceptance/listener_spec.ts
View file

@ -162,7 +162,7 @@ describe('event listeners', () => {
<ng-template #template>
<button (click)="this['mes' + 'sage'] = 'hello'">Click me</button>
</ng-template>
<ng-container [ngTemplateOutlet]="template"></ng-container>
`,
standalone: false,
@ -187,7 +187,7 @@ describe('event listeners', () => {
<ng-template let-obj #template>
<button (click)="obj.value = obj.value + '!'">Change</button>
</ng-template>
<ng-container *ngTemplateOutlet="template; context: {$implicit: current}"></ng-container>
`,
standalone: false,
@ -226,13 +226,11 @@ describe('event listeners', () => {
it('should support local refs in listeners', () => {
@Component({
selector: 'my-comp',
standalone: true,
template: ``,
})
class MyComp {}
@Component({
standalone: true,
imports: [MyComp],
template: `
<my-comp #comp></my-comp>
@ -768,7 +766,6 @@ describe('event listeners', () => {
@Directive({
selector: '[hostListenerDir]',
standalone: true,
})
class HostListenerDir {
@HostListener('click')
@ -778,7 +775,6 @@ describe('event listeners', () => {
}
@Component({
standalone: true,
imports: [HostListenerDir],
template: `<button hostListenerDir>Click</button>`,
})
@ -801,7 +797,6 @@ describe('event listeners', () => {
@Directive({
selector: '[hostListenerDir]',
standalone: true,
})
class HostListenerDir {
@HostListener('document:click')
@ -811,7 +806,6 @@ describe('event listeners', () => {
}
@Component({
standalone: true,
imports: [HostListenerDir],
template: `<button hostListenerDir>Click</button>`,
})
@ -883,7 +877,7 @@ describe('event listeners', () => {
<ng-template #template add-global-listener>
<button>Click me!</button>
</ng-template>
<ng-container [ngTemplateOutlet]="template"></ng-container>
`,
standalone: false,

7
packages/core/test/acceptance/ng_module_spec.ts
View file

@ -98,7 +98,6 @@ describe('NgModule', () => {
it('should throw when a standalone component is added to NgModule declarations', () => {
@Component({
selector: 'my-comp',
standalone: true,
template: '',
})
class MyComp {}
@ -120,7 +119,6 @@ describe('NgModule', () => {
it('should throw when a standalone directive is added to NgModule declarations', () => {
@Directive({
selector: '[my-dir]',
standalone: true,
})
class MyDir {}
@ -148,7 +146,6 @@ describe('NgModule', () => {
it('should throw when a standalone pipe is added to NgModule declarations', () => {
@Pipe({
name: 'my-pipe',
standalone: true,
})
class MyPipe {}
@ -177,7 +174,6 @@ describe('NgModule', () => {
@Component({
selector: 'my-comp',
template: '',
standalone: true,
})
class MyComp {}
@ -443,7 +439,6 @@ describe('NgModule', () => {
it('should log an error about unknown element for a standalone component without CUSTOM_ELEMENTS_SCHEMA', () => {
@Component({
template: `<custom-el></custom-el>`,
standalone: true,
})
class MyComp {}
@ -457,7 +452,6 @@ describe('NgModule', () => {
it('should not log an error about unknown element for a standalone component with CUSTOM_ELEMENTS_SCHEMA', () => {
@Component({
template: `<custom-el></custom-el>`,
standalone: true,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
class MyComp {}
@ -657,7 +651,6 @@ describe('NgModule', () => {
`is used in a template, but not imported in a standalone component`,
() => {
@Component({
standalone: true,
template: `<div *${directive}="expr"></div>`,
})
class App {

3
packages/core/test/acceptance/pipe_spec.ts
View file

@ -354,7 +354,7 @@ describe('pipe', () => {
}
// The generated code corresponds to the following decorator:
// @Pipe({name: 'sayHello', pure: true, standalone: true})
// @Pipe({name: 'sayHello', pure: true})
class SayHelloPipe extends ParentPipe implements PipeTransform {
transform() {
return this.sayHelloService.getHello();
@ -369,7 +369,6 @@ describe('pipe', () => {
}
@Component({
standalone: true,
selector: 'app',
template: '{{ value | sayHello }}',
imports: [SayHelloPipe],

74
packages/core/test/acceptance/query_spec.ts
View file

@ -886,14 +886,12 @@ describe('query logic', () => {
it('should not match directive host with content queries', () => {
@Directive({
selector: '[content-query]',
standalone: true,
})
class ContentQueryDirective {
@ContentChildren('foo', {descendants: true}) foos!: QueryList<ElementRef>;
}
@Component({
standalone: true,
imports: [ContentQueryDirective],
template: `<div content-query #foo></div>`,
})
@ -910,13 +908,12 @@ describe('query logic', () => {
});
it('should report results to appropriate queries where deep content queries are nested', () => {
@Directive({selector: '[content-query]', standalone: true, exportAs: 'query'})
@Directive({selector: '[content-query]', exportAs: 'query'})
class ContentQueryDirective {
@ContentChildren('foo, bar, baz', {descendants: true}) qlist!: QueryList<ElementRef>;
}
@Component({
standalone: true,
imports: [ContentQueryDirective],
template: `
<div content-query #out="query">
@ -944,13 +941,12 @@ describe('query logic', () => {
});
it('should support nested shallow content queries', () => {
@Directive({selector: '[content-query]', standalone: true, exportAs: 'query'})
@Directive({selector: '[content-query]', exportAs: 'query'})
class ContentQueryDirective {
@ContentChildren('foo') qlist!: QueryList<ElementRef>;
}
@Component({
standalone: true,
imports: [ContentQueryDirective],
template: `
<div content-query #out="query">
@ -976,18 +972,17 @@ describe('query logic', () => {
});
it('should respect shallow flag on content queries when mixing deep and shallow queries', () => {
@Directive({selector: '[shallow-content-query]', standalone: true, exportAs: 'shallow-query'})
@Directive({selector: '[shallow-content-query]', exportAs: 'shallow-query'})
class ShallowContentQueryDirective {
@ContentChildren('foo') qlist!: QueryList<ElementRef>;
}
@Directive({selector: '[deep-content-query]', standalone: true, exportAs: 'deep-query'})
@Directive({selector: '[deep-content-query]', exportAs: 'deep-query'})
class DeepContentQueryDirective {
@ContentChildren('foo', {descendants: true}) qlist!: QueryList<ElementRef>;
}
@Component({
standalone: true,
imports: [ShallowContentQueryDirective, DeepContentQueryDirective],
template: `
<div shallow-content-query #shallow="shallow-query" deep-content-query #deep="deep-query">
@ -1014,7 +1009,7 @@ describe('query logic', () => {
});
it('should support shallow ContentChild queries', () => {
@Directive({selector: '[query-dir]', standalone: true})
@Directive({selector: '[query-dir]'})
class ContentQueryDirective {
@ContentChild('foo', {descendants: false}) shallow: ElementRef | undefined;
// ContentChild queries have {descendants: true} option by default
@ -1022,7 +1017,6 @@ describe('query logic', () => {
}
@Component({
standalone: true,
imports: [ContentQueryDirective],
template: `
<div query-dir>
@ -1046,14 +1040,12 @@ describe('query logic', () => {
it('should support view and content queries matching the same element', () => {
@Directive({
selector: '[content-query]',
standalone: true,
})
class ContentQueryDirective {
@ContentChildren('foo') foos!: QueryList<ElementRef>;
}
@Component({
standalone: true,
imports: [ContentQueryDirective],
template: `
<div content-query>
@ -1082,14 +1074,13 @@ describe('query logic', () => {
});
describe('query order', () => {
@Directive({selector: '[text]', standalone: true})
@Directive({selector: '[text]'})
class TextDirective {
@Input() text: string | undefined;
}
it('should register view query matches from top to bottom', () => {
@Component({
standalone: true,
imports: [TextDirective],
template: `
<span text="A"></span>
@ -1119,14 +1110,12 @@ describe('query logic', () => {
it('should register content query matches from top to bottom', () => {
@Directive({
selector: '[content-query]',
standalone: true,
})
class ContentQueryDirective {
@ContentChildren(TextDirective, {descendants: true}) texts!: QueryList<TextDirective>;
}
@Component({
standalone: true,
imports: [TextDirective, ContentQueryDirective],
template: `
<div content-query>
@ -1475,15 +1464,14 @@ describe('query logic', () => {
});
describe('read option', () => {
@Directive({selector: '[child]', standalone: true})
@Directive({selector: '[child]'})
class Child {}
@Directive({selector: '[otherChild]', standalone: true})
@Directive({selector: '[otherChild]'})
class OtherChild {}
it('should query using type predicate and read ElementRef', () => {
@Component({
standalone: true,
imports: [Child],
template: `<div child></div>`,
})
@ -1503,7 +1491,6 @@ describe('query logic', () => {
it('should query using type predicate and read another directive type', () => {
@Component({
standalone: true,
imports: [Child, OtherChild],
template: `<div child otherChild></div>`,
})
@ -1521,7 +1508,6 @@ describe('query logic', () => {
it('should not add results to query if a requested token cant be read', () => {
@Component({
standalone: true,
imports: [Child],
template: `<div child></div>`,
})
@ -1538,7 +1524,6 @@ describe('query logic', () => {
it('should query using local ref and read ElementRef by default', () => {
@Component({
standalone: true,
template: `
<div #foo></div>
<div></div>
@ -1560,7 +1545,6 @@ describe('query logic', () => {
it('should query for multiple elements and read ElementRef by default', () => {
@Component({
standalone: true,
template: `
<div #foo></div>
<div></div>
@ -1584,7 +1568,6 @@ describe('query logic', () => {
it('should read ElementRef from an element when explicitly asked for', () => {
@Component({
standalone: true,
template: `
<div #foo></div>
<div></div>
@ -1606,7 +1589,6 @@ describe('query logic', () => {
it('should query for <ng-container> and read ElementRef with a native element pointing to comment node', () => {
@Component({
standalone: true,
template: `<ng-container #foo></ng-container>`,
})
class TestCmp {
@ -1623,7 +1605,6 @@ describe('query logic', () => {
it('should query for <ng-container> and read ElementRef without explicit read option', () => {
@Component({
standalone: true,
template: `<ng-container #foo></ng-container>`,
})
class TestCmp {
@ -1640,7 +1621,6 @@ describe('query logic', () => {
it('should read ViewContainerRef from element nodes when explicitly asked for', () => {
@Component({
standalone: true,
template: `<div #foo></div>`,
})
class TestCmp {
@ -1657,7 +1637,6 @@ describe('query logic', () => {
it('should read ViewContainerRef from ng-template nodes when explicitly asked for', () => {
@Component({
standalone: true,
template: `<ng-template #foo></ng-template>`,
})
class TestCmp {
@ -1674,7 +1653,6 @@ describe('query logic', () => {
it('should read ElementRef with a native element pointing to comment DOM node from ng-template', () => {
@Component({
standalone: true,
template: `<ng-template #foo></ng-template>`,
})
class TestCmp {
@ -1691,7 +1669,6 @@ describe('query logic', () => {
it('should read TemplateRef from ng-template by default', () => {
@Component({
standalone: true,
template: `<ng-template #foo></ng-template>`,
})
class TestCmp {
@ -1708,7 +1685,6 @@ describe('query logic', () => {
it('should read TemplateRef from ng-template when explicitly asked for', () => {
@Component({
standalone: true,
template: `<ng-template #foo></ng-template>`,
})
class TestCmp {
@ -1724,11 +1700,10 @@ describe('query logic', () => {
});
it('should read component instance if element queried for is a component host', () => {
@Component({selector: 'child-cmp', standalone: true, template: ''})
@Component({selector: 'child-cmp', template: ''})
class ChildCmp {}
@Component({
standalone: true,
imports: [ChildCmp],
template: `<child-cmp #foo></child-cmp>`,
})
@ -1748,13 +1723,11 @@ describe('query logic', () => {
@Component({
selector: 'child-cmp',
exportAs: 'child',
standalone: true,
template: '',
})
class ChildCmp {}
@Component({
standalone: true,
imports: [ChildCmp],
template: `<child-cmp #foo="child"></child-cmp>`,
})
@ -1771,11 +1744,10 @@ describe('query logic', () => {
});
it('should read directive instance if element queried for has an exported directive with a matching name', () => {
@Directive({selector: '[child]', exportAs: 'child', standalone: true})
@Directive({selector: '[child]', exportAs: 'child'})
class ChildDirective {}
@Component({
standalone: true,
imports: [ChildDirective],
template: `<div #foo="child" child></div>`,
})
@ -1792,14 +1764,13 @@ describe('query logic', () => {
});
it('should read all matching directive instances from a given element', () => {
@Directive({selector: '[child1]', exportAs: 'child1', standalone: true})
@Directive({selector: '[child1]', exportAs: 'child1'})
class Child1Dir {}
@Directive({selector: '[child2]', exportAs: 'child2', standalone: true})
@Directive({selector: '[child2]', exportAs: 'child2'})
class Child2Dir {}
@Component({
standalone: true,
imports: [Child1Dir, Child2Dir],
template: `<div #foo="child1" child1 #bar="child2" child2></div>`,
})
@ -1817,11 +1788,10 @@ describe('query logic', () => {
});
it('should read multiple locals exporting the same directive from a given element', () => {
@Directive({selector: '[child]', exportAs: 'child', standalone: true})
@Directive({selector: '[child]', exportAs: 'child'})
class ChildDir {}
@Component({
standalone: true,
imports: [ChildDir],
template: `<div child #foo="child" #bar="child"></div>`,
})
@ -1869,11 +1839,10 @@ describe('query logic', () => {
});
it('should match on exported directive name and read a requested token', () => {
@Directive({selector: '[child]', exportAs: 'child', standalone: true})
@Directive({selector: '[child]', exportAs: 'child'})
class ChildDir {}
@Component({
standalone: true,
imports: [ChildDir],
template: `<div child #foo="child"></div>`,
})
@ -1890,11 +1859,10 @@ describe('query logic', () => {
});
it('should support reading a mix of ElementRef and directive instances', () => {
@Directive({selector: '[child]', exportAs: 'child', standalone: true})
@Directive({selector: '[child]', exportAs: 'child'})
class ChildDir {}
@Component({
standalone: true,
imports: [ChildDir],
template: `<div #foo #bar="child" child></div>`,
})
@ -1912,11 +1880,10 @@ describe('query logic', () => {
});
it('should not add results to selector-based query if a requested token cant be read', () => {
@Directive({selector: '[child]', standalone: true})
@Directive({selector: '[child]'})
class ChildDir {}
@Component({
standalone: true,
imports: [],
template: `<div #foo></div>`,
})
@ -1932,14 +1899,13 @@ describe('query logic', () => {
});
it('should not add results to directive-based query if only read token matches', () => {
@Directive({selector: '[child]', standalone: true})
@Directive({selector: '[child]'})
class ChildDir {}
@Directive({selector: '[otherChild]', standalone: true})
@Directive({selector: '[otherChild]'})
class OtherChildDir {}
@Component({
standalone: true,
imports: [Child],
template: `<div child></div>`,
})
@ -1956,7 +1922,6 @@ describe('query logic', () => {
it('should not add results to TemplateRef-based query if only read token matches', () => {
@Component({
standalone: true,
template: `<div></div>`,
})
class TestCmp {
@ -1972,7 +1937,6 @@ describe('query logic', () => {
it('should not add results to the query in case no match found (via TemplateRef)', () => {
@Component({
standalone: true,
template: `<div></div>`,
})
class TestCmp {
@ -1988,7 +1952,6 @@ describe('query logic', () => {
it('should query templates if the type is TemplateRef (and respect "read" option)', () => {
@Component({
standalone: true,
template: `
<ng-template #foo><div>Test</div></ng-template>
<ng-template #bar><div>Test</div></ng-template>
@ -2015,7 +1978,6 @@ describe('query logic', () => {
it('should match using string selector and directive as a read argument', () => {
@Component({
standalone: true,
imports: [Child],
template: `<div child #foo></div>`,
})

5
packages/core/test/acceptance/renderer_factory_spec.ts
View file

@ -134,7 +134,6 @@ describe('renderer factory lifecycle', () => {
it('should pass in the component styles directly into the underlying renderer', () => {
@Component({
standalone: true,
styles: ['.some-css-class { color: red; }'],
template: '...',
encapsulation: ViewEncapsulation.ShadowDom,
@ -153,7 +152,6 @@ describe('renderer factory lifecycle', () => {
const animB = {name: 'b'};
@Component({
standalone: true,
template: '',
animations: [animA, animB],
})
@ -170,7 +168,6 @@ describe('renderer factory lifecycle', () => {
it('should include animations in the renderType data array even if the array is empty', () => {
@Component({
standalone: true,
template: '...',
animations: [],
})
@ -184,7 +181,6 @@ describe('renderer factory lifecycle', () => {
it('should allow [@trigger] bindings to be picked up by the underlying renderer', () => {
@Component({
standalone: true,
template: '<div @fooAnimation></div>',
animations: [],
})
@ -216,7 +212,6 @@ describe('renderer factory lifecycle', () => {
it('should not invoke renderer destroy method for embedded views', () => {
@Component({
selector: 'comp',
standalone: true,
imports: [CommonModule],
template: `
<div>Root view</div>

41
packages/core/test/acceptance/security_spec.ts
View file

@ -140,7 +140,6 @@ describe('iframe processing', () => {
`as a static attribute (checking \`${securityAttr}\`)`,
() => {
@Component({
standalone: true,
selector: 'my-comp',
template: `
<iframe
@ -160,7 +159,6 @@ describe('iframe processing', () => {
`making sure it's case-insensitive)`,
() => {
@Component({
standalone: true,
selector: 'my-comp',
template: `
<iframe
@ -179,7 +177,6 @@ describe('iframe processing', () => {
`using a property binding (checking \`${securityAttr}\`)`,
() => {
@Component({
standalone: true,
selector: 'my-comp',
template: `<iframe ${srcAttr}="${TEST_IFRAME_URL}" [${securityAttr}]="''"></iframe>`,
})
@ -194,7 +191,6 @@ describe('iframe processing', () => {
`using a property interpolation (checking \`${securityAttr}\`)`,
() => {
@Component({
standalone: true,
selector: 'my-comp',
template: `<iframe ${srcAttr}="${TEST_IFRAME_URL}" ${securityAttr}="{{''}}"></iframe>`,
})
@ -210,7 +206,6 @@ describe('iframe processing', () => {
`sure it's case-insensitive)`,
() => {
@Component({
standalone: true,
selector: 'my-comp',
template: `
<iframe
@ -230,7 +225,6 @@ describe('iframe processing', () => {
`using a property binding (checking \`${securityAttr}\`)`,
() => {
@Component({
standalone: true,
selector: 'my-comp',
template: `
<iframe
@ -251,7 +245,6 @@ describe('iframe processing', () => {
`sure it's case-insensitive)`,
() => {
@Component({
standalone: true,
selector: 'my-comp',
template: `
<iframe
@ -268,7 +261,6 @@ describe('iframe processing', () => {
it(`should allow changing \`${srcAttr}\` after initial render`, () => {
@Component({
standalone: true,
selector: 'my-comp',
template: `
<iframe
@ -302,7 +294,6 @@ describe('iframe processing', () => {
it('should work when a directive sets a security-sensitive attribute as a static attribute', () => {
@Directive({
standalone: true,
selector: '[dir]',
host: {
'src': TEST_IFRAME_URL,
@ -311,7 +302,6 @@ describe('iframe processing', () => {
})
class IframeDir {}
@Component({
standalone: true,
imports: [IframeDir],
selector: 'my-comp',
template: '<iframe dir></iframe>',
@ -323,7 +313,6 @@ describe('iframe processing', () => {
it('should work when a directive sets a security-sensitive host attribute on a non-iframe element', () => {
@Directive({
standalone: true,
selector: '[dir]',
host: {
'src': TEST_IFRAME_URL,
@ -333,7 +322,6 @@ describe('iframe processing', () => {
class Dir {}
@Component({
standalone: true,
imports: [Dir],
selector: 'my-comp',
template: '<img dir>',
@ -351,7 +339,6 @@ describe('iframe processing', () => {
'which also has a structural directive (*ngIf)',
() => {
@Component({
standalone: true,
imports: [NgIf],
selector: 'my-comp',
template: `<iframe *ngIf="visible" src="${TEST_IFRAME_URL}" sandbox=""></iframe>`,
@ -366,7 +353,6 @@ describe('iframe processing', () => {
it('should work when a security-sensitive attribute is set between `src` and `srcdoc`', () => {
@Component({
standalone: true,
selector: 'my-comp',
template: `<iframe src="${TEST_IFRAME_URL}" sandbox srcdoc="Hi!"></iframe>`,
})
@ -377,7 +363,6 @@ describe('iframe processing', () => {
it('should work when a directive sets a security-sensitive attribute before setting `src`', () => {
@Directive({
standalone: true,
selector: '[dir]',
host: {
'sandbox': '',
@ -387,7 +372,6 @@ describe('iframe processing', () => {
class IframeDir {}
@Component({
standalone: true,
imports: [IframeDir],
selector: 'my-comp',
template: '<iframe dir></iframe>',
@ -403,7 +387,6 @@ describe('iframe processing', () => {
'(directive attribute after `sandbox`)',
() => {
@Directive({
standalone: true,
selector: '[dir]',
host: {
'src': TEST_IFRAME_URL,
@ -412,7 +395,6 @@ describe('iframe processing', () => {
class IframeDir {}
@Component({
standalone: true,
imports: [IframeDir],
selector: 'my-comp',
template: '<iframe sandbox dir></iframe>',
@ -428,7 +410,6 @@ describe('iframe processing', () => {
"as an attribute binding (checking that it's case-insensitive)",
() => {
@Directive({
standalone: true,
selector: '[dir]',
host: {
'[attr.SANDBOX]': "''",
@ -437,7 +418,6 @@ describe('iframe processing', () => {
class IframeDir {}
@Component({
standalone: true,
imports: [IframeDir],
selector: 'my-comp',
template: `<IFRAME dir src="${TEST_IFRAME_URL}"></IFRAME>`,
@ -454,7 +434,6 @@ describe('iframe processing', () => {
'(directive attribute before `sandbox`)',
() => {
@Directive({
standalone: true,
selector: '[dir]',
host: {
'src': TEST_IFRAME_URL,
@ -463,7 +442,6 @@ describe('iframe processing', () => {
class IframeDir {}
@Component({
standalone: true,
imports: [IframeDir],
selector: 'my-comp',
template: '<iframe dir sandbox></iframe>',
@ -480,7 +458,6 @@ describe('iframe processing', () => {
'(directive attribute after `src`)',
() => {
@Directive({
standalone: true,
selector: '[dir]',
host: {
'sandbox': '',
@ -489,7 +466,6 @@ describe('iframe processing', () => {
class IframeDir {}
@Component({
standalone: true,
imports: [IframeDir],
selector: 'my-comp',
template: `<iframe src="${TEST_IFRAME_URL}" dir></iframe>`,
@ -502,7 +478,6 @@ describe('iframe processing', () => {
it('should work when a security-sensitive attribute is set as a static attribute', () => {
@Component({
standalone: true,
selector: 'my-comp',
template: `
<iframe referrerPolicy="no-referrer" src="${TEST_IFRAME_URL}"></iframe>
@ -521,7 +496,6 @@ describe('iframe processing', () => {
'as a property binding and an <iframe> is wrapped into another element',
() => {
@Component({
standalone: true,
selector: 'my-comp',
template: `
<section>
@ -543,7 +517,6 @@ describe('iframe processing', () => {
'(directive attribute before `src`)',
() => {
@Directive({
standalone: true,
selector: '[dir]',
host: {
'sandbox': '',
@ -552,7 +525,6 @@ describe('iframe processing', () => {
class IframeDir {}
@Component({
standalone: true,
imports: [IframeDir],
selector: 'my-comp',
template: `<iframe dir src="${TEST_IFRAME_URL}"></iframe>`,
@ -568,7 +540,6 @@ describe('iframe processing', () => {
'before the directive that sets an `src` attribute value',
() => {
@Directive({
standalone: true,
selector: '[set-src]',
host: {
'src': TEST_IFRAME_URL,
@ -577,7 +548,6 @@ describe('iframe processing', () => {
class DirThatSetsSrc {}
@Directive({
standalone: true,
selector: '[set-sandbox]',
host: {
'sandbox': '',
@ -586,7 +556,6 @@ describe('iframe processing', () => {
class DirThatSetsSandbox {}
@Component({
standalone: true,
imports: [DirThatSetsSandbox, DirThatSetsSrc],
selector: 'my-comp',
// Important note: even though the `set-sandbox` goes after the `set-src`,
@ -605,7 +574,6 @@ describe('iframe processing', () => {
'a host directive that sets an `src` attribute value',
() => {
@Directive({
standalone: true,
selector: '[set-src-dir]',
host: {
'src': TEST_IFRAME_URL,
@ -614,7 +582,6 @@ describe('iframe processing', () => {
class DirThatSetsSrc {}
@Directive({
standalone: true,
selector: '[dir]',
hostDirectives: [DirThatSetsSrc],
host: {
@ -624,7 +591,6 @@ describe('iframe processing', () => {
class DirThatSetsSandbox {}
@Component({
standalone: true,
imports: [DirThatSetsSandbox],
selector: 'my-comp',
template: '<iframe dir></iframe>',
@ -640,7 +606,6 @@ describe('iframe processing', () => {
'a host directive that sets a security-sensitive attribute value',
() => {
@Directive({
standalone: true,
selector: '[set-sandbox-dir]',
host: {
'sandbox': '',
@ -649,7 +614,6 @@ describe('iframe processing', () => {
class DirThatSetsSandbox {}
@Directive({
standalone: true,
selector: '[dir]',
hostDirectives: [DirThatSetsSandbox],
host: {
@ -659,7 +623,6 @@ describe('iframe processing', () => {
class DirThatSetsSrc {}
@Component({
standalone: true,
imports: [DirThatSetsSrc],
selector: 'my-comp',
template: '<iframe dir></iframe>',
@ -675,7 +638,6 @@ describe('iframe processing', () => {
'with security-sensitive attributes set via property bindings',
() => {
@Component({
standalone: true,
selector: 'my-comp',
template: `
<ng-container #container></ng-container>
@ -711,7 +673,6 @@ describe('iframe processing', () => {
'a property binding on an <iframe> inside i18n block',
() => {
@Component({
standalone: true,
selector: 'my-comp',
template: `
<section i18n>
@ -731,7 +692,6 @@ describe('iframe processing', () => {
'a property binding on an <iframe> annotated with i18n attribute',
() => {
@Component({
standalone: true,
selector: 'my-comp',
template: `
<iframe i18n src="${TEST_IFRAME_URL}" [sandbox]="''">
@ -746,7 +706,6 @@ describe('iframe processing', () => {
it('should work when a security-sensitive attributes are marked for translation', () => {
@Component({
standalone: true,
selector: 'my-comp',
template: `
<iframe src="${TEST_IFRAME_URL}" i18n-sandbox sandbox="">

2
packages/core/test/acceptance/standalone_injector_spec.ts
View file

@ -30,7 +30,6 @@ describe('standalone injector', () => {
@Component({
selector: 'standalone',
standalone: true,
imports: [ModuleWithAService],
template: `({{service.value}})`,
})
@ -81,7 +80,6 @@ describe('standalone injector', () => {
@Component({
selector: 'standalone',
standalone: true,
imports: [ModuleWithAService],
template: `{{service.value}}`,
})

69
packages/core/test/acceptance/standalone_spec.ts
View file

@ -31,7 +31,6 @@ import {TestBed} from '@angular/core/testing';
describe('standalone components, directives, and pipes', () => {
it('should render a standalone component', () => {
@Component({
standalone: true,
template: 'Look at me, no NgModule!',
})
class StandaloneCmp {}
@ -44,7 +43,6 @@ describe('standalone components, directives, and pipes', () => {
it('should render a recursive standalone component', () => {
@Component({
selector: 'tree',
standalone: true,
template: `({{level}})<ng-template [ngIf]="level > 0"><tree [level]="level - 1"></tree></ng-template>`,
imports: [CommonModule],
})
@ -52,7 +50,7 @@ describe('standalone components, directives, and pipes', () => {
@Input() level = 0;
}
@Component({standalone: true, template: '<tree [level]="3"></tree>', imports: [TreeCmp]})
@Component({template: '<tree [level]="3"></tree>', imports: [TreeCmp]})
class StandaloneCmp {}
const fixture = TestBed.createComponent(StandaloneCmp);
@ -84,7 +82,6 @@ describe('standalone components, directives, and pipes', () => {
@Component({
selector: 'inner-cmp',
template: 'Look at me, no NgModule!',
standalone: true,
})
class InnerCmp {}
@ -116,7 +113,6 @@ describe('standalone components, directives, and pipes', () => {
class Module {}
@Component({
standalone: true,
template: '<inner-cmp></inner-cmp>',
imports: [Module],
})
@ -132,7 +128,6 @@ describe('standalone components, directives, and pipes', () => {
it('should allow exporting standalone components, directives, and pipes from NgModule', () => {
@Component({
selector: 'standalone-cmp',
standalone: true,
template: `standalone`,
})
class StandaloneCmp {}
@ -142,11 +137,10 @@ describe('standalone components, directives, and pipes', () => {
host: {
'[attr.id]': '"standalone"',
},
standalone: true,
})
class StandaloneDir {}
@Pipe({name: 'standalonePipe', standalone: true})
@Pipe({name: 'standalonePipe'})
class StandalonePipe implements PipeTransform {
transform(value: any) {
return `|${value}`;
@ -182,7 +176,6 @@ describe('standalone components, directives, and pipes', () => {
it('should render a standalone component with dependencies and ambient providers', () => {
@Component({
standalone: true,
template: 'Inner',
selector: 'inner-cmp',
})
@ -196,7 +189,6 @@ describe('standalone components, directives, and pipes', () => {
class ModuleWithAProvider {}
@Component({
standalone: true,
template: 'Outer<inner-cmp></inner-cmp>{{service.value}}',
imports: [InnerCmp, ModuleWithAProvider],
})
@ -218,7 +210,6 @@ describe('standalone components, directives, and pipes', () => {
class ModuleWithAProvider {}
@Component({
standalone: true,
template: 'Inner({{service.value}})',
selector: 'inner-cmp',
imports: [ModuleWithAProvider],
@ -228,7 +219,6 @@ describe('standalone components, directives, and pipes', () => {
}
@Component({
standalone: true,
template: 'Outer<inner-cmp></inner-cmp>{{service.value}}',
imports: [InnerCmp],
})
@ -263,7 +253,6 @@ describe('standalone components, directives, and pipes', () => {
@Component({
selector: 'duplicate-selector',
template: `ComponentA: {{ service ? 'service found' : 'service not found' }}`,
standalone: true,
imports: [MyModuleA],
})
class ComponentA {
@ -273,7 +262,6 @@ describe('standalone components, directives, and pipes', () => {
@Component({
selector: 'duplicate-selector',
template: `ComponentB: {{ service ? 'service found' : 'service not found' }}`,
standalone: true,
imports: [MyModuleB],
})
class ComponentB {
@ -286,7 +274,6 @@ describe('standalone components, directives, and pipes', () => {
<ng-container [ngComponentOutlet]="ComponentA" />
<ng-container [ngComponentOutlet]="ComponentB" />
`,
standalone: true,
imports: [NgComponentOutlet],
})
class AppCmp {
@ -311,7 +298,6 @@ describe('standalone components, directives, and pipes', () => {
class Module {}
@Component({
standalone: true,
template: 'Inner({{service.value}})',
selector: 'inner-cmp',
imports: [Module],
@ -321,7 +307,6 @@ describe('standalone components, directives, and pipes', () => {
}
@Component({
standalone: true,
template: '<ng-template #insert></ng-template>',
imports: [InnerCmp],
})
@ -359,7 +344,6 @@ describe('standalone components, directives, and pipes', () => {
class Module {}
@Component({
standalone: true,
template: 'Inner({{service.value}})',
selector: 'inner-cmp',
imports: [Module],
@ -369,7 +353,6 @@ describe('standalone components, directives, and pipes', () => {
}
@Component({
standalone: true,
template: '<ng-template #insert></ng-template>',
imports: [InnerCmp],
})
@ -416,7 +399,6 @@ describe('standalone components, directives, and pipes', () => {
class Module {}
@Component({
standalone: true,
template: 'Inner({{service.value}})',
selector: 'inner-cmp',
imports: [Module],
@ -426,7 +408,6 @@ describe('standalone components, directives, and pipes', () => {
}
@Component({
standalone: true,
template: '<ng-template #insert></ng-template>',
imports: [InnerCmp],
})
@ -456,7 +437,6 @@ describe('standalone components, directives, and pipes', () => {
it('should render a recursive cycle of standalone components', () => {
@Component({
selector: 'cmp-a',
standalone: true,
template: '<ng-template [ngIf]="false"><cmp-c></cmp-c></ng-template>A',
imports: [forwardRef(() => StandaloneCmpC)],
})
@ -464,7 +444,6 @@ describe('standalone components, directives, and pipes', () => {
@Component({
selector: 'cmp-b',
standalone: true,
template: '(<cmp-a></cmp-a>)B',
imports: [StandaloneCmpA],
})
@ -472,7 +451,6 @@ describe('standalone components, directives, and pipes', () => {
@Component({
selector: 'cmp-c',
standalone: true,
template: '(<cmp-b></cmp-b>)C',
imports: [StandaloneCmpB],
})
@ -495,7 +473,6 @@ describe('standalone components, directives, and pipes', () => {
class ExportingModule {}
@Component({
selector: 'standalone',
standalone: true,
imports: [ExportingModule],
template: `({{service.value}})`,
})
@ -509,10 +486,10 @@ describe('standalone components, directives, and pipes', () => {
});
it('should support nested arrays in @Component.imports', () => {
@Directive({selector: '[red]', standalone: true, host: {'[attr.red]': 'true'}})
@Directive({selector: '[red]', host: {'[attr.red]': 'true'}})
class RedIdDirective {}
@Pipe({name: 'blue', pure: true, standalone: true})
@Pipe({name: 'blue', pure: true})
class BluePipe implements PipeTransform {
transform() {
return 'blue';
@ -521,7 +498,6 @@ describe('standalone components, directives, and pipes', () => {
@Component({
selector: 'standalone',
standalone: true,
template: `<div red>{{'' | blue}}</div>`,
imports: [[RedIdDirective, [BluePipe]]],
})
@ -533,10 +509,10 @@ describe('standalone components, directives, and pipes', () => {
});
it('should support readonly arrays in @Component.imports', () => {
@Directive({selector: '[red]', standalone: true, host: {'[attr.red]': 'true'}})
@Directive({selector: '[red]', host: {'[attr.red]': 'true'}})
class RedIdDirective {}
@Pipe({name: 'blue', pure: true, standalone: true})
@Pipe({name: 'blue', pure: true})
class BluePipe implements PipeTransform {
transform() {
return 'blue';
@ -547,7 +523,6 @@ describe('standalone components, directives, and pipes', () => {
@Component({
selector: 'standalone',
standalone: true,
template: `<div red>{{'' | blue}}</div>`,
imports: [DirAndPipe],
})
@ -559,7 +534,7 @@ describe('standalone components, directives, and pipes', () => {
});
it('should deduplicate declarations', () => {
@Component({selector: 'test-red', standalone: true, template: 'red(<ng-content></ng-content>)'})
@Component({selector: 'test-red', template: 'red(<ng-content></ng-content>)'})
class RedComponent {}
@Component({
@ -580,7 +555,6 @@ describe('standalone components, directives, and pipes', () => {
@Component({
selector: 'standalone',
standalone: true,
template: `<test-red><test-blue>orange</test-blue></test-red>`,
imports: [RedComponent, RedComponent, BlueAModule, BlueBModule],
})
@ -596,7 +570,6 @@ describe('standalone components, directives, and pipes', () => {
it('should error when forwardRef does not resolve to a truthy value', () => {
@Component({
selector: 'test',
standalone: true,
imports: [forwardRef(() => null)],
template: '',
})
@ -618,7 +591,6 @@ describe('standalone components, directives, and pipes', () => {
@Component({
selector: 'standalone',
standalone: true,
template: '',
imports: [NonStandaloneCmp],
})
@ -640,7 +612,6 @@ describe('standalone components, directives, and pipes', () => {
@Component({
selector: 'standalone',
standalone: true,
template: '',
imports: [NonStandaloneDirective],
})
@ -662,7 +633,6 @@ describe('standalone components, directives, and pipes', () => {
@Component({
selector: 'standalone',
standalone: true,
template: '',
imports: [NonStandalonePipe],
})
@ -680,7 +650,6 @@ describe('standalone components, directives, and pipes', () => {
@Component({
selector: 'standalone',
standalone: true,
template: '',
imports: [SthElse],
})
@ -705,7 +674,6 @@ describe('standalone components, directives, and pipes', () => {
}
@Component({
standalone: true,
template: '',
// we need to import a module with a provider in a nested array since module with providers
// are disallowed on the type level
@ -723,13 +691,12 @@ describe('standalone components, directives, and pipes', () => {
it('should support forwardRef imports', () => {
@Component({
selector: 'test',
standalone: true,
imports: [forwardRef(() => StandaloneComponent)],
template: `(<other-standalone></other-standalone>)`,
})
class TestComponent {}
@Component({selector: 'other-standalone', standalone: true, template: `standalone component`})
@Component({selector: 'other-standalone', template: `standalone component`})
class StandaloneComponent {}
const fixture = TestBed.createComponent(TestComponent);
@ -740,7 +707,6 @@ describe('standalone components, directives, and pipes', () => {
describe('schemas', () => {
it('should allow schemas in standalone component', () => {
@Component({
standalone: true,
template: '<maybe-custom-elm></maybe-custom-elm>',
schemas: [NO_ERRORS_SCHEMA],
})
@ -778,7 +744,6 @@ describe('standalone components, directives, and pipes', () => {
it('should warn the user when an unknown element is present', () => {
const spy = spyOn(console, 'error');
@Component({
standalone: true,
template: '<unknown-tag></unknown-tag>',
})
class AppCmp {}
@ -792,7 +757,6 @@ describe('standalone components, directives, and pipes', () => {
it('should warn the user when multiple unknown elements are present', () => {
const spy = spyOn(console, 'error');
@Component({
standalone: true,
template: '<unknown-tag-A></unknown-tag-A><unknown-tag-B></unknown-tag-B>',
})
class AppCmp {}
@ -809,7 +773,6 @@ describe('standalone components, directives, and pipes', () => {
it('should not warn the user when an unknown element is present inside an ng-template', () => {
const spy = spyOn(console, 'error');
@Component({
standalone: true,
template: '<ng-template><unknown-tag></unknown-tag><ng-template>',
})
class AppCmp {}
@ -822,7 +785,6 @@ describe('standalone components, directives, and pipes', () => {
it('should warn the user when an unknown element is present in an instantiated embedded view', () => {
const spy = spyOn(console, 'error');
@Component({
standalone: true,
template: '<ng-template [ngIf]="true"><unknown-tag></unknown-tag><ng-template>',
imports: [CommonModule],
})
@ -859,7 +821,7 @@ describe('standalone components, directives, and pipes', () => {
@Input() in: string | undefined;
}
@Component({selector: 'standalone', template: 'standalone: {{in}}', standalone: true})
@Component({selector: 'standalone', template: 'standalone: {{in}}'})
class StandaloneCmp extends RegularCmp {}
const fixture = TestBed.createComponent(StandaloneCmp);
@ -869,7 +831,7 @@ describe('standalone components, directives, and pipes', () => {
});
it('should allow extending a regular component and turn it into a standalone one', () => {
@Component({selector: 'standalone', template: 'standalone: {{in}}', standalone: true})
@Component({selector: 'standalone', template: 'standalone: {{in}}'})
class StandaloneCmp {
@Input() in: string | undefined;
}
@ -891,13 +853,11 @@ describe('standalone components, directives, and pipes', () => {
@Component({
selector: 'inner',
template: 'inner',
standalone: true,
})
class InnerCmp {}
@Component({
selector: 'standalone',
standalone: true,
template: 'standalone: {{in}}; (<inner></inner>)',
imports: [InnerCmp],
})
@ -929,7 +889,7 @@ describe('standalone components, directives, and pipes', () => {
});
it('should return `true` if component is standalone (with `standalone:true`)', () => {
@Component({selector: 'standalone-cmp', standalone: true})
@Component({selector: 'standalone-cmp'})
class StandaloneCmp {}
expect(isStandalone(StandaloneCmp)).toBeTrue();
@ -943,7 +903,7 @@ describe('standalone components, directives, and pipes', () => {
});
it('should return `true` if directive is standalone', () => {
@Directive({selector: '[standaloneDir]', standalone: true})
@Directive({selector: '[standaloneDir]'})
class StandAloneDirective {}
expect(isStandalone(StandAloneDirective)).toBeTrue();
@ -957,7 +917,7 @@ describe('standalone components, directives, and pipes', () => {
});
it('should return `true` if pipe is standalone', () => {
@Pipe({name: 'standalonePipe', standalone: true})
@Pipe({name: 'standalonePipe'})
class StandAlonePipe {}
expect(isStandalone(StandAlonePipe)).toBeTrue();
@ -986,7 +946,6 @@ describe('standalone components, directives, and pipes', () => {
it('should render a recursive cycle of standalone components', () => {
@Component({
selector: 'cmp-a',
standalone: true,
template: '<ng-template [ngIf]="false"><cmp-c></cmp-c></ng-template>A',
imports: [forwardRef(() => StandaloneCmpC)],
})
@ -994,7 +953,6 @@ describe('standalone components, directives, and pipes', () => {
@Component({
selector: 'cmp-b',
standalone: true,
template: '(<cmp-a></cmp-a>)B',
imports: [StandaloneCmpA],
})
@ -1002,7 +960,6 @@ describe('standalone components, directives, and pipes', () => {
@Component({
selector: 'cmp-c',
standalone: true,
template: '(<cmp-b></cmp-b>)C',
imports: [StandaloneCmpB],
})

9
packages/core/test/acceptance/styling_spec.ts
View file

@ -331,7 +331,6 @@ describe('styling', () => {
it('should allow null in a class array binding', () => {
@Component({
template: `<div [class]="['a', null, 'c']" [class.extra]="true"></div>`,
standalone: true,
})
class Cmp {}
@ -344,7 +343,6 @@ describe('styling', () => {
it('should allow undefined in a class array binding', () => {
@Component({
template: `<div [class]="['a', undefined, 'c']" [class.extra]="true"></div>`,
standalone: true,
})
class Cmp {}
@ -357,7 +355,6 @@ describe('styling', () => {
it('should allow zero in a class array binding', () => {
@Component({
template: `<div [class]="['a', 0, 'c']" [class.extra]="true"></div>`,
standalone: true,
})
class Cmp {}
@ -370,7 +367,6 @@ describe('styling', () => {
it('should allow false in a class array binding', () => {
@Component({
template: `<div [class]="['a', false, 'c']" [class.extra]="true"></div>`,
standalone: true,
})
class Cmp {}
@ -383,7 +379,6 @@ describe('styling', () => {
it('should ignore an empty string in a class array binding', () => {
@Component({
template: `<div [class]="['a', '', 'c']" [class.extra]="true"></div>`,
standalone: true,
})
class Cmp {}
@ -396,7 +391,6 @@ describe('styling', () => {
it('should ignore a string containing spaces in a class array binding', () => {
@Component({
template: `<div [class]="['a', 'hello there', 'c']" [class.extra]="true"></div>`,
standalone: true,
})
class Cmp {}
@ -409,7 +403,6 @@ describe('styling', () => {
it('should ignore a string containing spaces in a class object literal binding', () => {
@Component({
template: `<div [class]="{a: true, 'hello there': true, c: true}" [class.extra]="true"></div>`,
standalone: true,
})
class Cmp {}
@ -422,7 +415,6 @@ describe('styling', () => {
it('should ignore an object literal in a class array binding', () => {
@Component({
template: `<div [class]="['a', {foo: true}, 'c']" [class.extra]="true"></div>`,
standalone: true,
})
class Cmp {}
@ -435,7 +427,6 @@ describe('styling', () => {
it('should handle a string array in a class array binding', () => {
@Component({
template: `<div [class]="['a', ['foo', 'bar'], 'c']" [class.extra]="true"></div>`,
standalone: true,
})
class Cmp {}

1
packages/core/test/application_ref_spec.ts
View file

@ -744,7 +744,6 @@ describe('bootstrap', () => {
@Component({
template: '',
host: {'[class]': 'clazz'},
standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush,
})
class HostBindingComp {

61
packages/core/test/change_detection_scheduler_spec.ts
View file

@ -74,7 +74,7 @@ describe('Angular with zoneless enabled', () => {
describe('notifies scheduler', () => {
it('contributes to application stableness', async () => {
const val = signal('initial');
@Component({template: '{{val()}}', standalone: true})
@Component({template: '{{val()}}'})
class TestComponent {
val = val;
}
@ -92,7 +92,7 @@ describe('Angular with zoneless enabled', () => {
it('when signal updates', async () => {
const val = signal('initial');
@Component({template: '{{val()}}', standalone: true})
@Component({template: '{{val()}}'})
class TestComponent {
val = val;
}
@ -107,7 +107,7 @@ describe('Angular with zoneless enabled', () => {
});
it('when using markForCheck()', async () => {
@Component({template: '{{val}}', standalone: true})
@Component({template: '{{val}}'})
class TestComponent {
cdr = inject(ChangeDetectorRef);
val = 'initial';
@ -127,7 +127,7 @@ describe('Angular with zoneless enabled', () => {
});
it('on input binding', async () => {
@Component({template: '{{val}}', standalone: true})
@Component({template: '{{val}}'})
class TestComponent {
@Input() val = 'initial';
}
@ -142,7 +142,7 @@ describe('Angular with zoneless enabled', () => {
});
it('on event listener bound in template', async () => {
@Component({template: '<div (click)="updateVal()">{{val}}</div>', standalone: true})
@Component({template: '<div (click)="updateVal()">{{val}}</div>'})
class TestComponent {
val = 'initial';
@ -163,7 +163,7 @@ describe('Angular with zoneless enabled', () => {
});
it('on event listener bound in host', async () => {
@Component({host: {'(click)': 'updateVal()'}, template: '{{val}}', standalone: true})
@Component({host: {'(click)': 'updateVal()'}, template: '{{val}}'})
class TestComponent {
val = 'initial';
@ -182,7 +182,7 @@ describe('Angular with zoneless enabled', () => {
});
it('with async pipe', async () => {
@Component({template: '{{val | async}}', standalone: true, imports: [AsyncPipe]})
@Component({template: '{{val | async}}', imports: [AsyncPipe]})
class TestComponent {
val = new BehaviorSubject('initial');
}
@ -199,7 +199,6 @@ describe('Angular with zoneless enabled', () => {
it('when creating a view', async () => {
@Component({
template: '<ng-template #ref>{{"binding"}}</ng-template>',
standalone: true,
})
class TestComponent {
@ViewChild(TemplateRef) template!: TemplateRef<unknown>;
@ -221,14 +220,12 @@ describe('Angular with zoneless enabled', () => {
it('when inserting a view', async () => {
@Component({
template: '{{"binding"}}',
standalone: true,
})
class DynamicCmp {
elementRef = inject(ElementRef);
}
@Component({
template: '<ng-template #ref></ng-template>',
standalone: true,
})
class TestComponent {
@ViewChild('ref', {read: ViewContainerRef}) viewContainer!: ViewContainerRef;
@ -248,14 +245,12 @@ describe('Angular with zoneless enabled', () => {
it('when destroying a view (with animations)', async () => {
@Component({
template: '{{"binding"}}',
standalone: true,
})
class DynamicCmp {
elementRef = inject(ElementRef);
}
@Component({
template: '<ng-template #ref></ng-template>',
standalone: true,
})
class TestComponent {
@ViewChild('ref', {read: ViewContainerRef}) viewContainer!: ViewContainerRef;
@ -296,7 +291,6 @@ describe('Angular with zoneless enabled', () => {
let renderHookCalls = 0;
@Component({
template: '{{"binding"}}',
standalone: true,
})
class DynamicCmp {
elementRef = inject(ElementRef);
@ -304,7 +298,6 @@ describe('Angular with zoneless enabled', () => {
@Component({
selector: 'app',
template: '<ng-template #ref></ng-template>',
standalone: true,
})
class App {
@ViewChild('ref', {read: ViewContainerRef}) viewContainer!: ViewContainerRef;
@ -354,7 +347,6 @@ describe('Angular with zoneless enabled', () => {
@Component({
selector: 'dynamic-cmp',
template: '{{"binding"}}',
standalone: true,
})
class DynamicCmp {
elementRef = inject(ElementRef);
@ -385,7 +377,7 @@ describe('Angular with zoneless enabled', () => {
it('when a stable subscription synchronously causes another notification', async () => {
const val = signal('initial');
@Component({template: '{{val()}}', standalone: true})
@Component({template: '{{val()}}'})
class TestComponent {
val = val;
}
@ -422,7 +414,6 @@ describe('Angular with zoneless enabled', () => {
let checks = 0;
@Component({
template: '',
standalone: true,
})
class Dummy {
ngDoCheck() {
@ -452,7 +443,7 @@ describe('Angular with zoneless enabled', () => {
it('can recover when an error is re-thrown by the ErrorHandler', async () => {
const val = signal('initial');
let throwError = false;
@Component({template: '{{val()}}{{maybeThrow()}}', standalone: true})
@Component({template: '{{val()}}{{maybeThrow()}}'})
class TestComponent {
val = val;
maybeThrow() {
@ -494,7 +485,6 @@ describe('Angular with zoneless enabled', () => {
it('change detects embedded view when attached to a host on ApplicationRef and declaration is marked for check', async () => {
@Component({
template: '<ng-template #template><div>{{thing}}</div></ng-template>',
standalone: true,
})
class DynamicCmp {
@ViewChild('template') templateRef!: TemplateRef<{}>;
@ -502,7 +492,6 @@ describe('Angular with zoneless enabled', () => {
}
@Component({
template: '',
standalone: true,
})
class Host {
readonly vcr = inject(ViewContainerRef);
@ -527,7 +516,6 @@ describe('Angular with zoneless enabled', () => {
it('change detects embedded view when attached directly to ApplicationRef and declaration is marked for check', async () => {
@Component({
template: '<ng-template #template><div>{{thing}}</div></ng-template>',
standalone: true,
})
class DynamicCmp {
@ViewChild('template') templateRef!: TemplateRef<{}>;
@ -549,7 +537,7 @@ describe('Angular with zoneless enabled', () => {
});
it('does not fail when global timing functions are patched and unpatched', async () => {
@Component({template: '', standalone: true})
@Component({template: ''})
class App {
cdr = inject(ChangeDetectorRef);
}
@ -582,7 +570,7 @@ describe('Angular with zoneless enabled', () => {
changeDetectionRuns++;
});
});
@Component({template: '', standalone: true})
@Component({template: ''})
class MyComponent {
cdr = inject(ChangeDetectorRef);
}
@ -606,7 +594,6 @@ describe('Angular with zoneless enabled', () => {
}
@Component({
template: '{{thing}}',
standalone: true,
})
class App {
thing = 'initial';
@ -631,7 +618,6 @@ describe('Angular with zoneless enabled', () => {
};
@Component({
template: '',
standalone: true,
})
class App {
cdr = inject(ChangeDetectorRef);
@ -654,7 +640,7 @@ describe('Angular with zoneless enabled', () => {
it('runs inside fakeAsync zone', fakeAsync(() => {
let didRun = false;
@Component({standalone: true, template: ''})
@Component({template: ''})
class App {
ngOnInit() {
didRun = true;
@ -675,7 +661,7 @@ describe('Angular with zoneless enabled', () => {
it('can run inside fakeAsync zone', fakeAsync(() => {
let didRun = false;
@Component({standalone: true, template: ''})
@Component({template: ''})
class App {
ngDoCheck() {
didRun = true;
@ -708,7 +694,7 @@ describe('Angular with scheduler and ZoneJS', () => {
TestBed.configureTestingModule({
providers: [provideZoneChangeDetection({ignoreChangesOutsideZone: true})],
});
@Component({template: '{{thing()}}', standalone: true})
@Component({template: '{{thing()}}'})
class App {
thing = signal('initial');
}
@ -733,13 +719,12 @@ describe('Angular with scheduler and ZoneJS', () => {
});
});
@Component({selector: 'component-with-output', template: '', standalone: true})
@Component({selector: 'component-with-output', template: ''})
class ComponentWithOutput {
@Output() out = new EventEmitter();
}
let called = false;
@Component({
standalone: true,
imports: [ComponentWithOutput],
template: '<component-with-output (out)="onOut()" />',
})
@ -764,7 +749,7 @@ describe('Angular with scheduler and ZoneJS', () => {
});
it('updating signal outside of zone still schedules update when in hybrid mode', async () => {
@Component({template: '{{thing()}}', standalone: true})
@Component({template: '{{thing()}}'})
class App {
thing = signal('initial');
}
@ -782,7 +767,7 @@ describe('Angular with scheduler and ZoneJS', () => {
});
it('updating signal in another "Angular" zone schedules update when in hybrid mode', async () => {
@Component({template: '{{thing()}}', standalone: true})
@Component({template: '{{thing()}}'})
class App {
thing = signal('initial');
}
@ -801,7 +786,7 @@ describe('Angular with scheduler and ZoneJS', () => {
});
it('updating signal in a child zone of Angular does not schedule extra CD', async () => {
@Component({template: '{{thing()}}', standalone: true})
@Component({template: '{{thing()}}'})
class App {
thing = signal('initial');
}
@ -818,7 +803,7 @@ describe('Angular with scheduler and ZoneJS', () => {
});
it('updating signal in a child Angular zone of Angular does not schedule extra CD', async () => {
@Component({template: '{{thing()}}', standalone: true})
@Component({template: '{{thing()}}'})
class App {
thing = signal('initial');
}
@ -848,7 +833,7 @@ describe('Angular with scheduler and ZoneJS', () => {
changeDetectionRuns++;
});
});
@Component({template: '', standalone: true})
@Component({template: ''})
class MyComponent {
cdr = inject(ChangeDetectorRef);
ngDoCheck() {
@ -878,7 +863,7 @@ describe('Angular with scheduler and ZoneJS', () => {
provideZoneChangeDetection({runCoalescing: true, ignoreChangesOutsideZone: false}),
],
});
@Component({template: '{{thing()}}', standalone: true})
@Component({template: '{{thing()}}'})
class App {
thing = signal('initial');
}
@ -906,7 +891,7 @@ describe('Angular with scheduler and ZoneJS', () => {
provideZoneChangeDetection({runCoalescing: true, ignoreChangesOutsideZone: false}),
],
});
@Component({template: '{{thing()}}', standalone: true})
@Component({template: '{{thing()}}'})
class App {
thing = signal('initial');
}
@ -932,7 +917,7 @@ describe('Angular with scheduler and ZoneJS', () => {
providers: [provideZoneChangeDetection({scheduleInRootZone: false} as any)],
});
let didRun = false;
@Component({standalone: true, template: ''})
@Component({template: ''})
class App {
ngDoCheck() {
didRun = true;

13
packages/core/test/component_fixture_spec.ts
View file

@ -43,14 +43,12 @@ class SimpleComp {
@Component({
selector: 'deferred-comp',
standalone: true,
template: `<div>Deferred Component</div>`,
})
class DeferredComp {}
@Component({
selector: 'second-deferred-comp',
standalone: true,
template: `<div>More Deferred Component</div>`,
})
class SecondDeferredComp {}
@ -363,7 +361,6 @@ describe('ComponentFixture', () => {
it('throws errors that happen during detectChanges', () => {
@Component({
template: '',
standalone: true,
})
class App {
ngOnInit() {
@ -378,7 +375,6 @@ describe('ComponentFixture', () => {
describe('errors during ApplicationRef.tick', () => {
@Component({
template: '',
standalone: true,
})
class ThrowingThing {
ngOnInit() {
@ -387,7 +383,6 @@ describe('ComponentFixture', () => {
}
@Component({
template: '',
standalone: true,
})
class Blank {}
@ -417,7 +412,6 @@ describe('ComponentFixture', () => {
it('should return all defer blocks in the component', async () => {
@Component({
selector: 'defer-comp',
standalone: true,
imports: [DeferredComp, SecondDeferredComp],
template: `<div>
@defer (on immediate) {
@ -472,7 +466,6 @@ describe('ComponentFixture', () => {
it('throws errors that happen during detectChanges', () => {
@Component({
template: '',
standalone: true,
})
class App {
ngOnInit() {
@ -544,7 +537,7 @@ describe('ComponentFixture with zoneless', () => {
});
it('will not refresh CheckAlways views when detectChanges is called if not marked dirty', () => {
@Component({standalone: true, template: '{{signalThing()}}|{{regularThing}}'})
@Component({template: '{{signalThing()}}|{{regularThing}}'})
class CheckAlwaysCmp {
regularThing = 'initial';
signalThing = signal('initial');
@ -566,7 +559,6 @@ describe('ComponentFixture with zoneless', () => {
it('throws errors that happen during detectChanges', () => {
@Component({
template: '',
standalone: true,
})
class App {
ngOnInit() {
@ -581,7 +573,6 @@ describe('ComponentFixture with zoneless', () => {
it('rejects whenStable promise when errors happen during detectChanges', async () => {
@Component({
template: '',
standalone: true,
})
class App {
ngOnInit() {
@ -596,7 +587,6 @@ describe('ComponentFixture with zoneless', () => {
it('can disable checkNoChanges', () => {
@Component({
template: '{{thing}}',
standalone: true,
})
class App {
thing = 1;
@ -614,7 +604,6 @@ describe('ComponentFixture with zoneless', () => {
it('runs change detection when autoDetect is false', () => {
@Component({
template: '{{thing()}}',
standalone: true,
})
class App {
thing = signal(1);

15
packages/core/test/defer_fixture_spec.ts
View file

@ -13,7 +13,6 @@ import {expect} from '@angular/platform-browser/testing/src/matchers';
@Component({
selector: 'second-deferred-comp',
standalone: true,
template: `<div class="more">More Deferred Component</div>`,
})
class SecondDeferredComp {}
@ -24,7 +23,6 @@ describe('DeferFixture', () => {
it('should start in manual behavior mode', async () => {
@Component({
selector: 'defer-comp',
standalone: true,
imports: [SecondDeferredComp],
template: `
<div>
@ -51,7 +49,6 @@ describe('DeferFixture', () => {
it('should start in manual trigger mode by default', async () => {
@Component({
selector: 'defer-comp',
standalone: true,
imports: [SecondDeferredComp],
template: `
<div>
@ -76,7 +73,6 @@ describe('DeferFixture', () => {
it('should defer load immediately on playthrough', async () => {
@Component({
selector: 'defer-comp',
standalone: true,
imports: [SecondDeferredComp],
template: `
<div>
@ -110,7 +106,6 @@ describe('DeferFixture', () => {
it('should not defer load immediately when set to manual', async () => {
@Component({
selector: 'defer-comp',
standalone: true,
imports: [SecondDeferredComp],
template: `
<div>
@ -145,7 +140,6 @@ describe('DeferFixture', () => {
it('should render a completed defer state', async () => {
@Component({
selector: 'defer-comp',
standalone: true,
imports: [SecondDeferredComp],
template: `
<div>
@ -173,7 +167,6 @@ describe('DeferFixture', () => {
it('should not wait forever if application is unstable for a long time', async () => {
@Component({
selector: 'defer-comp',
standalone: true,
imports: [SecondDeferredComp],
template: `
<div>
@ -206,7 +199,6 @@ describe('DeferFixture', () => {
it('should work with templates that have local refs', async () => {
@Component({
selector: 'defer-comp',
standalone: true,
imports: [SecondDeferredComp],
template: `
<ng-template #template>Hello</ng-template>
@ -235,7 +227,6 @@ describe('DeferFixture', () => {
it('should render a placeholder defer state', async () => {
@Component({
selector: 'defer-comp',
standalone: true,
imports: [SecondDeferredComp],
template: `
<div>
@ -268,7 +259,6 @@ describe('DeferFixture', () => {
it('should render a loading defer state', async () => {
@Component({
selector: 'defer-comp',
standalone: true,
imports: [SecondDeferredComp],
template: `
<div>
@ -301,7 +291,6 @@ describe('DeferFixture', () => {
it('should render an error defer state', async () => {
@Component({
selector: 'defer-comp',
standalone: true,
imports: [SecondDeferredComp],
template: `
<div>
@ -334,7 +323,6 @@ describe('DeferFixture', () => {
it('should throw when rendering a template that does not exist', async () => {
@Component({
selector: 'defer-comp',
standalone: true,
imports: [SecondDeferredComp],
template: `
<div>
@ -367,7 +355,6 @@ describe('DeferFixture', () => {
it('should transition between states when `after` and `minimum` are used', async () => {
@Component({
selector: 'defer-comp',
standalone: true,
imports: [SecondDeferredComp],
template: `
<div>
@ -405,7 +392,6 @@ describe('DeferFixture', () => {
it('should get child defer blocks', async () => {
@Component({
selector: 'deferred-comp',
standalone: true,
imports: [SecondDeferredComp],
template: `
<div>
@ -419,7 +405,6 @@ describe('DeferFixture', () => {
@Component({
selector: 'defer-comp',
standalone: true,
imports: [DeferredComp],
template: `
<div>

1
packages/core/test/render3/change_detection_spec.ts
View file

@ -18,7 +18,6 @@ describe('change detection', () => {
const log: string[] = [];
@Component({
selector: 'my-comp',
standalone: true,
template: '{{ value }}',
})
class MyComponent {

5
packages/core/test/render3/component_ref_spec.ts
View file

@ -48,7 +48,6 @@ describe('ComponentFactory', () => {
it('should correctly populate default properties', () => {
@Component({
selector: 'test[foo], bar',
standalone: true,
template: '',
})
class TestComponent {}
@ -67,7 +66,6 @@ describe('ComponentFactory', () => {
@Component({
selector: 'test[foo], bar',
standalone: true,
template: `
<ng-content></ng-content>
<ng-content select="a"></ng-content>
@ -407,7 +405,6 @@ describe('ComponentFactory', () => {
let log: string[] = [];
@Component({
template: `{{in}}`,
standalone: true,
})
class DynamicCmp {
@Input()
@ -429,7 +426,6 @@ describe('ComponentFactory', () => {
it('marks parents dirty so component is not "shielded" by a non-dirty OnPush parent', () => {
@Component({
template: `{{input}}`,
standalone: true,
selector: 'dynamic',
})
class DynamicCmp {
@ -438,7 +434,6 @@ describe('ComponentFactory', () => {
@Component({
template: '<ng-template #template></ng-template>',
standalone: true,
imports: [DynamicCmp],
changeDetection: ChangeDetectionStrategy.OnPush,
})

80
packages/core/test/render3/deps_tracker_spec.ts
View file

@ -212,13 +212,13 @@ describe('runtime dependency tracker', () => {
});
it('should contain imported standalone components/directive/pipes in compilation scope', () => {
@Directive({standalone: true})
@Directive()
class Directive1 {}
@Pipe({name: 'pipe1', standalone: true})
@Pipe({name: 'pipe1'})
class Pipe1 {}
@Component({standalone: true})
@Component({})
class Component1 {}
@NgModule({
@ -331,7 +331,7 @@ describe('runtime dependency tracker', () => {
});
it('should poison the compilation scope if a standalone component is declared', () => {
@Component({standalone: true})
@Component({})
class Component1 {}
@NgModule({
@ -487,7 +487,7 @@ describe('runtime dependency tracker', () => {
@NgModule({imports: [forwardRef(() => Component1)]})
class MainModule {}
@Component({standalone: true})
@Component({})
class Component1 {}
const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
@ -502,7 +502,7 @@ describe('runtime dependency tracker', () => {
class MainModule {}
(MainModule as NgModuleType).ɵmod = createNgModuleDef({imports: () => [Component1]});
@Component({standalone: true})
@Component({})
class Component1 {}
const ans = depsTracker.getNgModuleScope(MainModule as NgModuleType);
@ -727,13 +727,13 @@ describe('runtime dependency tracker', () => {
});
it('should include the imported standalone component/directive/pipes in the compilation scope', () => {
@Component({standalone: true})
@Component({})
class Component1 {}
@Directive({standalone: true})
@Directive()
class Directive1 {}
@Pipe({name: 'pipe1', standalone: true})
@Pipe({name: 'pipe1'})
class Pipe1 {}
class MainComponent {}
@ -752,13 +752,13 @@ describe('runtime dependency tracker', () => {
});
it('should include the imported standalone component/directive/pipes in the compilation scope - nested array case', () => {
@Component({standalone: true})
@Component({})
class Component1 {}
@Directive({standalone: true})
@Directive()
class Directive1 {}
@Pipe({name: 'pipe1', standalone: true})
@Pipe({name: 'pipe1'})
class Pipe1 {}
class MainComponent {}
@ -873,13 +873,13 @@ describe('runtime dependency tracker', () => {
});
it('should resolve the imported forward refs and include them in the compilation scope', () => {
@Component({standalone: true})
@Component({})
class Component1 {}
@Directive({standalone: true})
@Directive()
class Directive1 {}
@Pipe({name: 'pipe1', standalone: true})
@Pipe({name: 'pipe1'})
class Pipe1 {}
@Component({
@ -924,13 +924,13 @@ describe('runtime dependency tracker', () => {
});
it('should resolve the imported forward refs and include them in the compilation scope - case of nested array imports', () => {
@Component({standalone: true})
@Component({})
class Component1 {}
@Directive({standalone: true})
@Directive()
class Directive1 {}
@Pipe({name: 'pipe1', standalone: true})
@Pipe({name: 'pipe1'})
class Pipe1 {}
@Component({
@ -975,13 +975,13 @@ describe('runtime dependency tracker', () => {
});
it('should cache the computed scopes', () => {
@Component({standalone: true})
@Component({})
class Component1 {}
@Directive({standalone: true})
@Directive()
class Directive1 {}
@Pipe({name: 'pipe1', standalone: true})
@Pipe({name: 'pipe1'})
class Pipe1 {}
class MainComponent {}
@ -1008,13 +1008,13 @@ describe('runtime dependency tracker', () => {
});
it('should clear the cache correctly', () => {
@Component({standalone: true})
@Component({})
class Component1 {}
@Directive({standalone: true})
@Directive()
class Directive1 {}
@Pipe({name: 'pipe1', standalone: true})
@Pipe({name: 'pipe1'})
class Pipe1 {}
@Component({
@ -1157,7 +1157,7 @@ describe('runtime dependency tracker', () => {
describe('for standalone component', () => {
it('should always return self (even if component has empty imports)', () => {
@Component({standalone: true})
@Component({})
class MainComponent {}
const ans = depsTracker.getComponentDependencies(MainComponent as ComponentType<any>);
@ -1166,16 +1166,16 @@ describe('runtime dependency tracker', () => {
});
it('should include imported standalone component/directive/pipe', () => {
@Component({standalone: true})
@Component({})
class Component1 {}
@Directive({standalone: true})
@Directive()
class Directive1 {}
@Pipe({name: 'pipe1', standalone: true})
@Pipe({name: 'pipe1'})
class Pipe1 {}
@Component({standalone: true})
@Component({})
class MainComponent {}
const ans = depsTracker.getComponentDependencies(MainComponent as ComponentType<any>, [
@ -1190,16 +1190,16 @@ describe('runtime dependency tracker', () => {
});
it('should include imported forward ref standalone component/directive/pipe', () => {
@Component({standalone: true})
@Component({})
class Component1 {}
@Directive({standalone: true})
@Directive()
class Directive1 {}
@Pipe({name: 'pipe1', standalone: true})
@Pipe({name: 'pipe1'})
class Pipe1 {}
@Component({standalone: true})
@Component({})
class MainComponent {}
const ans = depsTracker.getComponentDependencies(MainComponent as ComponentType<any>, [
@ -1230,7 +1230,7 @@ describe('runtime dependency tracker', () => {
})
class Pipe1 {}
@Component({standalone: true})
@Component({})
class MainComponent {}
const ans = depsTracker.getComponentDependencies(MainComponent as ComponentType<any>, [
@ -1264,7 +1264,7 @@ describe('runtime dependency tracker', () => {
})
class SubModule {}
@Component({standalone: true})
@Component({})
class MainComponent {}
const ans = depsTracker.getComponentDependencies(MainComponent as ComponentType<any>, [
@ -1298,7 +1298,7 @@ describe('runtime dependency tracker', () => {
})
class SubModule {}
@Component({standalone: true})
@Component({})
class MainComponent {}
const ans = depsTracker.getComponentDependencies(MainComponent as ComponentType<any>, [
@ -1311,10 +1311,10 @@ describe('runtime dependency tracker', () => {
});
it('should use cache for re-calculation', () => {
@Component({standalone: true})
@Component({})
class Component1 {}
@Component({standalone: true})
@Component({})
class MainComponent {}
let ans = depsTracker.getComponentDependencies(MainComponent as ComponentType<any>, [
@ -1347,9 +1347,7 @@ describe('runtime dependency tracker', () => {
});
it('should return false for standalone component', () => {
@Component({
standalone: true,
})
@Component({})
class MainComponent {}
expect(depsTracker.isOrphanComponent(MainComponent as ComponentType<any>)).toBeFalse();

5
packages/core/test/render3/di_spec.ts
View file

@ -26,10 +26,10 @@ describe('di', () => {
describe('directive injection', () => {
describe('flags', () => {
it('should check only the current node with @Self even with false positive', () => {
@Directive({selector: '[notOnSelf]', standalone: true})
@Directive({selector: '[notOnSelf]'})
class DirNotOnSelf {}
@Directive({selector: '[tryInjectFromSelf]', standalone: true})
@Directive({selector: '[tryInjectFromSelf]'})
class DirTryInjectFromSelf {
constructor(@Self() private dir: DirNotOnSelf) {}
}
@ -40,7 +40,6 @@ describe('di', () => {
<div tryInjectFromSelf></div>
</div>
`,
standalone: true,
imports: [DirNotOnSelf, DirTryInjectFromSelf],
})
class App {}

2
packages/core/test/render3/instructions_spec.ts
View file

@ -158,7 +158,6 @@ describe('instructions', () => {
it('should instantiate nodes at high indices', () => {
@Component({
selector: 'comp',
standalone: true,
template: '{{ name }}',
})
class Comp {
@ -323,7 +322,6 @@ describe('instructions', () => {
it('should create tView only once for each nested level', () => {
@Component({
selector: 'nested-loops',
standalone: true,
template: `
<ul *ngFor="let row of rows">
<li *ngFor="let col of row.cols">{{col}}</li>

25
packages/core/test/render3/integration_spec.ts
View file

@ -18,7 +18,6 @@ import {SecurityContext} from '../../src/sanitization/security';
describe('element discovery', () => {
it('should only monkey-patch immediate child nodes in a component', () => {
@Component({
standalone: true,
template: '<div><p></p></div>',
})
class StructuredComp {}
@ -37,7 +36,6 @@ describe('element discovery', () => {
it('should only monkey-patch immediate child nodes in a sub component', () => {
@Component({
selector: 'child-comp',
standalone: true,
template: `
<div></div>
<div></div>
@ -48,7 +46,6 @@ describe('element discovery', () => {
@Component({
selector: 'parent-comp',
standalone: true,
imports: [ChildComp],
template: `
<section>
@ -75,7 +72,6 @@ describe('element discovery', () => {
@Component({
selector: 'structured-comp',
imports: [CommonModule],
standalone: true,
template: `
<section>
<ng-container *ngIf="true">
@ -111,7 +107,6 @@ describe('element discovery', () => {
it('should return a context object from a given dom node', () => {
@Component({
selector: 'structured-comp',
standalone: true,
template: `
<section></section>
<div></div>
@ -140,7 +135,6 @@ describe('element discovery', () => {
it('should cache the element context on a element was preemptively monkey-patched', () => {
@Component({
selector: 'structured-comp',
standalone: true,
template: `
<section></section>
`,
@ -165,7 +159,6 @@ describe('element discovery', () => {
it("should cache the element context on an intermediate element that isn't preemptively monkey-patched", () => {
@Component({
selector: 'structured-comp',
standalone: true,
template: `
<section>
<p></p>
@ -191,7 +184,6 @@ describe('element discovery', () => {
it('should be able to pull in element context data even if the element is decorated using styling', () => {
@Component({
selector: 'structured-comp',
standalone: true,
template: `
<section></section>
`,
@ -232,7 +224,6 @@ describe('element discovery', () => {
*/
@Component({
selector: 'projector-comp',
standalone: true,
template: `
welcome
<header>
@ -246,7 +237,6 @@ describe('element discovery', () => {
@Component({
selector: 'parent-comp',
standalone: true,
imports: [ProjectorComp],
template: `
<section>
@ -310,7 +300,6 @@ describe('element discovery', () => {
it('should return `null` when an element context is retrieved that is a DOM node that was not created by Angular', () => {
@Component({
selector: 'structured-comp',
standalone: true,
template: `
<section></section>
`,
@ -331,7 +320,6 @@ describe('element discovery', () => {
it('should by default monkey-patch the bootstrap component with context details', () => {
@Component({
selector: 'structured-comp',
standalone: true,
template: ``,
})
class StructuredComp {}
@ -365,7 +353,6 @@ describe('element discovery', () => {
@Directive({
selector: '[my-dir-1]',
standalone: true,
})
class MyDir1 {
constructor() {
@ -375,7 +362,6 @@ describe('element discovery', () => {
@Directive({
selector: '[my-dir-2]',
standalone: true,
})
class MyDir2 {
constructor() {
@ -385,7 +371,6 @@ describe('element discovery', () => {
@Directive({
selector: '[my-dir-3]',
standalone: true,
})
class MyDir3 {
constructor() {
@ -395,7 +380,6 @@ describe('element discovery', () => {
@Component({
selector: 'structured-comp',
standalone: true,
imports: [MyDir1, MyDir2, MyDir3],
template: `
<div my-dir-1 my-dir-2></div>
@ -453,7 +437,6 @@ describe('element discovery', () => {
@Directive({
selector: '[my-dir-1]',
standalone: true,
})
class MyDir1 {
constructor() {
@ -463,7 +446,6 @@ describe('element discovery', () => {
@Directive({
selector: '[my-dir-2]',
standalone: true,
})
class MyDir2 {
constructor() {
@ -473,7 +455,6 @@ describe('element discovery', () => {
@Component({
selector: 'child-comp',
standalone: true,
template: `
<div></div>
`,
@ -486,7 +467,6 @@ describe('element discovery', () => {
@Component({
selector: 'parent-comp',
standalone: true,
imports: [ChildComp, MyDir1, MyDir2],
template: `
<child-comp my-dir-1 my-dir-2></child-comp>
@ -541,7 +521,6 @@ describe('element discovery', () => {
it('should monkey-patch sub components with the view data and then replace them with the context result once a lookup occurs', () => {
@Component({
selector: 'child-comp',
standalone: true,
template: `
<div></div>
<div></div>
@ -552,7 +531,6 @@ describe('element discovery', () => {
@Component({
selector: 'parent-comp',
standalone: true,
imports: [ChildComp],
template: `
<section>
@ -589,7 +567,6 @@ describe('sanitization', () => {
it('should sanitize data using the provided sanitization interface', () => {
@Component({
selector: 'sanitize-this',
standalone: true,
template: `
<a [href]="href"></a>
`,
@ -632,7 +609,6 @@ describe('sanitization', () => {
@Directive({
selector: '[unsafeUrlHostBindingDir]',
standalone: true,
})
class UnsafeUrlHostBindingDir {
@HostBinding() cite: any = 'http://cite-dir-value';
@ -644,7 +620,6 @@ describe('sanitization', () => {
@Component({
selector: 'sanitize-this',
standalone: true,
imports: [UnsafeUrlHostBindingDir],
template: `
<blockquote unsafeUrlHostBindingDir></blockquote>

27
packages/core/test/render3/microtask_effect_spec.ts
View file

@ -47,7 +47,6 @@ describe('microtask effects', () => {
const log: string[] = [];
@Component({
selector: 'test-cmp',
standalone: true,
template: '',
})
class Cmp {
@ -74,7 +73,6 @@ describe('microtask effects', () => {
const someSignal = signal('initial');
@Component({
standalone: true,
template: '',
})
class App {
@ -149,7 +147,6 @@ describe('microtask effects', () => {
}
@Component({
standalone: true,
template: '',
providers: [{provide: ErrorHandler, useClass: FakeErrorHandler}],
})
@ -175,7 +172,6 @@ describe('microtask effects', () => {
@Component({
selector: 'test-cmp',
standalone: true,
template: '',
})
class Cmp {
@ -211,7 +207,6 @@ describe('microtask effects', () => {
@Component({
selector: 'test-cmp',
standalone: true,
template: '',
})
class Cmp implements AfterViewInit {
@ -238,7 +233,6 @@ describe('microtask effects', () => {
withBody('<test-cmp></test-cmp>', async () => {
@Component({
selector: 'test-cmp',
standalone: true,
template: '',
})
class Cmp {
@ -268,7 +262,6 @@ describe('microtask effects', () => {
it('should allow writing to signals in ngOnChanges', () => {
@Component({
selector: 'with-input',
standalone: true,
template: '{{inSignal()}}',
})
class WithInput implements OnChanges {
@ -284,7 +277,6 @@ describe('microtask effects', () => {
@Component({
selector: 'test-cmp',
standalone: true,
imports: [WithInput],
template: `<with-input [in]="'A'" />|<with-input [in]="'B'" />`,
})
@ -298,7 +290,6 @@ describe('microtask effects', () => {
it('should allow writing to signals in a constructor', () => {
@Component({
selector: 'with-constructor',
standalone: true,
template: '{{state()}}',
})
class WithConstructor {
@ -311,7 +302,6 @@ describe('microtask effects', () => {
@Component({
selector: 'test-cmp',
standalone: true,
imports: [WithConstructor],
template: `<with-constructor />`,
})
@ -325,7 +315,6 @@ describe('microtask effects', () => {
it('should allow writing to signals in input setters', () => {
@Component({
selector: 'with-input-setter',
standalone: true,
template: '{{state()}}',
})
class WithInputSetter {
@ -339,7 +328,6 @@ describe('microtask effects', () => {
@Component({
selector: 'test-cmp',
standalone: true,
imports: [WithInputSetter],
template: `
<with-input-setter [testInput]="'binding'" />|<with-input-setter testInput="static" />
@ -355,7 +343,6 @@ describe('microtask effects', () => {
it('should allow writing to signals in query result setters', () => {
@Component({
selector: 'with-query',
standalone: true,
template: '{{items().length}}',
})
class WithQuery {
@ -369,7 +356,6 @@ describe('microtask effects', () => {
@Component({
selector: 'test-cmp',
standalone: true,
imports: [WithQuery],
template: `<with-query><div #item></div></with-query>`,
})
@ -385,7 +371,6 @@ describe('microtask effects', () => {
@Component({
selector: 'with-query-setter',
standalone: true,
template: '<div #el></div>',
})
class WithQuerySetter {
@ -401,7 +386,6 @@ describe('microtask effects', () => {
@Component({
selector: 'test-cmp',
standalone: true,
template: ``,
})
class Cmp {
@ -434,7 +418,6 @@ describe('microtask effects', () => {
it('should allow toObservable subscription in template (with async pipe)', () => {
@Component({
selector: 'test-cmp',
standalone: true,
imports: [AsyncPipe],
template: '{{counter$ | async}}',
})
@ -453,7 +436,6 @@ describe('microtask effects', () => {
it('when created during bootstrapping', () => {
let log: string[] = [];
@Component({
standalone: true,
selector: 'test-cmp',
template: '',
})
@ -478,7 +460,6 @@ describe('microtask effects', () => {
let log: string[] = [];
@Component({
standalone: true,
selector: 'test-cmp',
template: '',
})
@ -494,7 +475,6 @@ describe('microtask effects', () => {
}
@Component({
standalone: true,
selector: 'driver-cmp',
imports: [TestCmp],
template: `
@ -520,7 +500,6 @@ describe('microtask effects', () => {
it('when created dynamically', () => {
let log: string[] = [];
@Component({
standalone: true,
selector: 'test-cmp',
template: '',
})
@ -536,7 +515,6 @@ describe('microtask effects', () => {
}
@Component({
standalone: true,
selector: 'driver-cmp',
template: '',
})
@ -570,7 +548,6 @@ describe('microtask effects', () => {
}
@Component({
standalone: true,
selector: 'test-cmp',
template: '',
providers: [EffectService],
@ -593,7 +570,6 @@ describe('microtask effects', () => {
it('if multiple effects are created', () => {
let log: string[] = [];
@Component({
standalone: true,
selector: 'test-cmp',
template: '',
})
@ -685,7 +661,6 @@ describe('microtask effects in TestBed', () => {
const log: string[] = [];
@Component({
selector: 'test-cmp',
standalone: true,
template: '',
})
class Cmp {
@ -721,7 +696,6 @@ describe('microtask effects in TestBed', () => {
const log: string[] = [];
@Component({
selector: 'test-cmp',
standalone: true,
template: '',
})
class Cmp {
@ -765,7 +739,6 @@ describe('microtask effects in TestBed', () => {
let observed = '';
@Component({
selector: 'test-cmp',
standalone: true,
template: '',
})
class Cmp {

5
packages/core/test/render3/providers_spec.ts
View file

@ -1045,7 +1045,6 @@ describe('providers', () => {
let hostComponent: HostComponent | null = null;
@Component({
standalone: true,
template: `{{s}}`,
selector: 'embedded-cmp',
})
@ -1054,7 +1053,6 @@ describe('providers', () => {
}
@Component({
standalone: true,
selector: 'host-cmp',
template: `foo`,
providers: [{provide: String, useValue: 'From host component'}],
@ -1066,7 +1064,6 @@ describe('providers', () => {
}
@Component({
standalone: true,
imports: [HostComponent],
template: `<host-cmp></host-cmp>`,
providers: [{provide: String, useValue: 'From app component'}],
@ -1197,7 +1194,6 @@ describe('providers', () => {
}
@Component({
standalone: true,
selector: 'my-cmp',
template: `<p></p>`,
providers: [{provide: String, useValue: 'From my component'}],
@ -1206,7 +1202,6 @@ describe('providers', () => {
class MyComponent {}
@Component({
standalone: true,
imports: [MyComponent],
template: `<my-cmp></my-cmp>`,
providers: [

5
packages/core/test/render3/query_spec.ts
View file

@ -31,7 +31,6 @@ describe('query', () => {
@Directive({
selector: '[myDir]',
standalone: true,
providers: [Service, {provide: Alias, useExisting: Service}],
})
class MyDirective {
@ -48,7 +47,6 @@ describe('query', () => {
selector: 'app',
template: '<div myDir></div>',
imports: [MyDirective],
standalone: true,
})
class App {
@ViewChild(MyDirective) directive!: MyDirective;
@ -67,7 +65,6 @@ describe('query', () => {
it('should resolve a provider if given as read token', () => {
@Component({
selector: 'app',
standalone: true,
template: '<div myDir></div>',
imports: [MyDirective],
})
@ -85,7 +82,6 @@ describe('query', () => {
it('should restore queries if view changes', () => {
@Directive({
selector: '[someDir]',
standalone: true,
})
class SomeDir {
constructor(
@ -98,7 +94,6 @@ describe('query', () => {
@Component({
selector: 'app',
standalone: true,
template: `
<div *someDir></div>
<div #foo></div>

8
packages/core/test/render3/reactive_safety_spec.ts
View file

@ -44,7 +44,6 @@ describe('reactive safety', () => {
describe('view creation', () => {
it('should be safe to call ViewContainerRef.createEmbeddedView', () => {
@Component({
standalone: true,
template: `<ng-template #tmpl>Template</ng-template>`,
})
class TestCmp {
@ -60,7 +59,6 @@ describe('reactive safety', () => {
it('should be safe to call TemplateRef.create', () => {
@Component({
standalone: true,
template: `<ng-template #tmpl>Template</ng-template>`,
})
class TestCmp {
@ -75,7 +73,6 @@ describe('reactive safety', () => {
it('should be safe to call createComponent', () => {
@Component({
standalone: true,
template: '',
})
class TestCmp {
@ -90,7 +87,6 @@ describe('reactive safety', () => {
it('should be safe to call ComponentFactory.create()', () => {
@Component({
standalone: true,
template: '',
})
class TestCmp {
@ -107,7 +103,6 @@ describe('reactive safety', () => {
it('should be safe to flip @if to true', () => {
@Component({
standalone: true,
template: `
@if (cond) {
(creating this view should not throw)
@ -130,7 +125,6 @@ describe('reactive safety', () => {
describe('view destruction', () => {
it('should be safe to destroy a ComponentRef', () => {
@Component({
standalone: true,
template: '',
})
class HostCmp {
@ -138,7 +132,6 @@ describe('reactive safety', () => {
}
@Component({
standalone: true,
template: '',
})
class GuestCmp {
@ -227,7 +220,6 @@ describe('reactive safety', () => {
describe('outputs', () => {
it('should be safe to emit an output', () => {
@Component({
standalone: true,
template: '',
})
class TestCmp {

40
packages/core/test/render3/reactivity_spec.ts
View file

@ -62,7 +62,6 @@ describe('reactivity', () => {
const log: string[] = [];
@Component({
selector: 'test-cmp',
standalone: true,
template: '',
})
class Cmp {
@ -172,7 +171,6 @@ describe('reactivity', () => {
@Component({
selector: 'test-cmp',
standalone: true,
template: '',
})
class Cmp {
@ -208,7 +206,6 @@ describe('reactivity', () => {
@Component({
selector: 'test-cmp',
standalone: true,
template: '',
})
class Cmp implements AfterViewInit {
@ -264,7 +261,6 @@ describe('reactivity', () => {
const log: number[] = [];
@Component({
standalone: true,
template: '',
})
class TestCmp {
@ -291,7 +287,6 @@ describe('reactivity', () => {
const source = signal('');
@Component({
standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush,
template: '{{ data }}',
})
@ -335,7 +330,6 @@ describe('reactivity', () => {
}
@Component({
standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [Service],
template: '{{ service.data }}',
@ -361,7 +355,6 @@ describe('reactivity', () => {
const source = signal('');
@Directive({
standalone: true,
selector: '[dir]',
})
class Dir {
@ -382,7 +375,6 @@ describe('reactivity', () => {
}
@Component({
standalone: true,
imports: [Dir],
template: `<ng-template dir let-data>{{data}}</ng-template>`,
changeDetection: ChangeDetectionStrategy.OnPush,
@ -405,7 +397,6 @@ describe('reactivity', () => {
const log: number[] = [];
@Component({
standalone: true,
template: '',
})
class TestCmp {
@ -429,9 +420,7 @@ describe('reactivity', () => {
it('should destroy effects when the parent component is destroyed', () => {
let destroyed = false;
@Component({
standalone: true,
})
@Component({})
class TestCmp {
constructor() {
effect((onCleanup) => onCleanup(() => (destroyed = true)));
@ -447,9 +436,7 @@ describe('reactivity', () => {
it('should destroy effects when their view is destroyed, separately from DestroyRef', () => {
let destroyed = false;
@Component({
standalone: true,
})
@Component({})
class TestCmp {
readonly injector = Injector.create({providers: [], parent: inject(Injector)});
@ -467,9 +454,7 @@ describe('reactivity', () => {
it('should destroy effects when their DestroyRef is separately destroyed', () => {
let destroyed = false;
@Component({
standalone: true,
})
@Component({})
class TestCmp {
readonly injector = Injector.create({providers: [], parent: inject(Injector)});
@ -546,7 +531,6 @@ describe('reactivity', () => {
it('should allow writing to signals in ngOnChanges', () => {
@Component({
selector: 'with-input',
standalone: true,
template: '{{inSignal()}}',
})
class WithInput implements OnChanges {
@ -562,7 +546,6 @@ describe('reactivity', () => {
@Component({
selector: 'test-cmp',
standalone: true,
imports: [WithInput],
template: `<with-input [in]="'A'" />|<with-input [in]="'B'" />`,
})
@ -576,7 +559,6 @@ describe('reactivity', () => {
it('should allow writing to signals in a constructor', () => {
@Component({
selector: 'with-constructor',
standalone: true,
template: '{{state()}}',
})
class WithConstructor {
@ -589,7 +571,6 @@ describe('reactivity', () => {
@Component({
selector: 'test-cmp',
standalone: true,
imports: [WithConstructor],
template: `<with-constructor />`,
})
@ -603,7 +584,6 @@ describe('reactivity', () => {
it('should allow writing to signals in input setters', () => {
@Component({
selector: 'with-input-setter',
standalone: true,
template: '{{state()}}',
})
class WithInputSetter {
@ -617,7 +597,6 @@ describe('reactivity', () => {
@Component({
selector: 'test-cmp',
standalone: true,
imports: [WithInputSetter],
template: `
<with-input-setter [testInput]="'binding'" />|<with-input-setter testInput="static" />
@ -633,7 +612,6 @@ describe('reactivity', () => {
it('should allow writing to signals in query result setters', () => {
@Component({
selector: 'with-query',
standalone: true,
template: '{{items().length}}',
})
class WithQuery {
@ -647,7 +625,6 @@ describe('reactivity', () => {
@Component({
selector: 'test-cmp',
standalone: true,
imports: [WithQuery],
template: `<with-query><div #item></div></with-query>`,
})
@ -663,7 +640,6 @@ describe('reactivity', () => {
@Component({
selector: 'with-query-setter',
standalone: true,
template: '<div #el></div>',
})
class WithQuerySetter {
@ -679,7 +655,6 @@ describe('reactivity', () => {
@Component({
selector: 'test-cmp',
standalone: true,
template: ``,
})
class Cmp {
@ -712,7 +687,6 @@ describe('reactivity', () => {
it('should allow toObservable subscription in template (with async pipe)', () => {
@Component({
selector: 'test-cmp',
standalone: true,
imports: [AsyncPipe],
template: '{{counter$ | async}}',
})
@ -730,7 +704,6 @@ describe('reactivity', () => {
it('should assign a debugName to the underlying node for an effect', async () => {
@Component({
selector: 'test-cmp',
standalone: true,
template: '',
})
class Cmp {
@ -748,7 +721,6 @@ describe('reactivity', () => {
it('when created during bootstrapping', () => {
let log: string[] = [];
@Component({
standalone: true,
selector: 'test-cmp',
template: '',
})
@ -773,7 +745,6 @@ describe('reactivity', () => {
let log: string[] = [];
@Component({
standalone: true,
selector: 'test-cmp',
template: '',
})
@ -789,7 +760,6 @@ describe('reactivity', () => {
}
@Component({
standalone: true,
selector: 'driver-cmp',
imports: [TestCmp],
template: `
@ -815,7 +785,6 @@ describe('reactivity', () => {
it('when created dynamically', () => {
let log: string[] = [];
@Component({
standalone: true,
selector: 'test-cmp',
template: '',
})
@ -831,7 +800,6 @@ describe('reactivity', () => {
}
@Component({
standalone: true,
selector: 'driver-cmp',
template: '',
})
@ -864,7 +832,6 @@ describe('reactivity', () => {
}
@Component({
standalone: true,
selector: 'test-cmp',
template: '',
providers: [EffectService],
@ -887,7 +854,6 @@ describe('reactivity', () => {
it('if multiple effects are created', () => {
let log: string[] = [];
@Component({
standalone: true,
selector: 'test-cmp',
template: '',
})

5
packages/core/test/test_bed_effect_spec.ts
View file

@ -32,7 +32,6 @@ describe('effects in TestBed', () => {
const log: string[] = [];
@Component({
selector: 'test-cmp',
standalone: true,
template: '',
})
class Cmp {
@ -68,7 +67,6 @@ describe('effects in TestBed', () => {
const log: string[] = [];
@Component({
selector: 'test-cmp',
standalone: true,
template: '',
})
class Cmp {
@ -112,7 +110,6 @@ describe('effects in TestBed', () => {
let observed = '';
@Component({
selector: 'test-cmp',
standalone: true,
template: '',
})
class Cmp {
@ -137,7 +134,6 @@ describe('effects in TestBed', () => {
let observed: string | null = null;
@Component({
standalone: true,
template: '',
})
class Cmp {
@ -163,7 +159,6 @@ describe('effects in TestBed', () => {
const log: string[] = [];
@Component({
standalone: true,
template: `{{ sentinel }}`,
})
class TestCmp {

36
packages/core/test/test_bed_spec.ts
View file

@ -237,21 +237,18 @@ describe('TestBed with Standalone types', () => {
it('should override dependencies of standalone components', () => {
@Component({
selector: 'dep',
standalone: true,
template: 'main dep',
})
class MainDep {}
@Component({
selector: 'dep',
standalone: true,
template: 'mock dep',
})
class MockDep {}
@Component({
selector: 'app-root',
standalone: true,
imports: [MainDep],
template: '<dep />',
})
@ -284,7 +281,6 @@ describe('TestBed with Standalone types', () => {
const A = new InjectionToken('A');
@Component({
standalone: true,
template: '{{ a }}',
providers: [{provide: A, useValue: 'A'}],
})
@ -316,7 +312,6 @@ describe('TestBed with Standalone types', () => {
@Component({
selector: 'dep',
standalone: true,
template: '{{ service.id }}',
providers: [Service],
})
@ -325,7 +320,6 @@ describe('TestBed with Standalone types', () => {
}
@Component({
standalone: true,
template: '<dep />',
imports: [Dep],
})
@ -361,7 +355,6 @@ describe('TestBed with Standalone types', () => {
class ComponentDependenciesModule {}
@Component({
standalone: true,
template: '{{ a }}',
imports: [ComponentDependenciesModule],
})
@ -388,7 +381,6 @@ describe('TestBed with Standalone types', () => {
class ComponentDependenciesModule {}
@Component({
standalone: true,
template: '{{ a }}',
imports: [ComponentDependenciesModule],
})
@ -410,7 +402,6 @@ describe('TestBed with Standalone types', () => {
it('should allow overriding a template of a standalone component', () => {
@Component({
standalone: true,
template: 'Original',
})
class MyStandaloneComp {}
@ -428,7 +419,6 @@ describe('TestBed with Standalone types', () => {
it('should allow overriding the set of directives and pipes used in a standalone component', () => {
@Directive({
selector: '[dir]',
standalone: true,
host: {'[id]': 'id'},
})
class MyStandaloneDirectiveA {
@ -437,20 +427,19 @@ describe('TestBed with Standalone types', () => {
@Directive({
selector: '[dir]',
standalone: true,
host: {'[id]': 'id'},
})
class MyStandaloneDirectiveB {
id = 'B';
}
@Pipe({name: 'pipe', standalone: true})
@Pipe({name: 'pipe'})
class MyStandalonePipeA {
transform(value: string): string {
return `transformed ${value} (A)`;
}
}
@Pipe({name: 'pipe', standalone: true})
@Pipe({name: 'pipe'})
class MyStandalonePipeB {
transform(value: string): string {
return `transformed ${value} (B)`;
@ -458,7 +447,6 @@ describe('TestBed with Standalone types', () => {
}
@Component({
standalone: true,
template: '<div dir>{{ name | pipe }}</div>',
imports: [MyStandalonePipeA, MyStandaloneDirectiveA],
})
@ -483,7 +471,6 @@ describe('TestBed with Standalone types', () => {
it('should reflect overrides on imported standalone directive', () => {
@Directive({
selector: '[dir]',
standalone: true,
host: {'[id]': 'id'},
})
class DepStandaloneDirective {
@ -492,7 +479,6 @@ describe('TestBed with Standalone types', () => {
@Component({
selector: 'standalone-cmp',
standalone: true,
template: 'Original MyStandaloneComponent',
})
class DepStandaloneComponent {
@ -500,7 +486,6 @@ describe('TestBed with Standalone types', () => {
}
@Component({
standalone: true,
template: '<standalone-cmp dir>Hello world!</standalone-cmp>',
imports: [DepStandaloneDirective, DepStandaloneComponent],
})
@ -526,7 +511,6 @@ describe('TestBed with Standalone types', () => {
const TOKEN_A = new InjectionToken('TOKEN_A');
@Pipe({
name: 'testPipe',
standalone: true,
})
class TestPipe {
constructor(@Inject(TOKEN_A) private token: string) {}
@ -544,7 +528,6 @@ describe('TestBed with Standalone types', () => {
@Component({
selector: 'test-component',
standalone: true,
imports: [TestNgModule],
template: `{{ 'original value' | testPipe }}`,
})
@ -588,7 +571,6 @@ describe('TestBed with Standalone types', () => {
class TestModule {}
@Component({
standalone: true,
selector: 'app-root',
template: `<test-cmp #testCmpCtrl></test-cmp>`,
imports: [TestModule],
@ -663,7 +645,6 @@ describe('TestBed', () => {
it('should not allow overrides of the `standalone` field', () => {
@Component({
standalone: true,
selector: 'standalone-comp',
template: '...',
})
@ -676,7 +657,7 @@ describe('TestBed', () => {
})
class NonStandaloneComponent {}
@Directive({standalone: true})
@Directive()
class StandaloneDirective {}
@Directive({
@ -684,7 +665,7 @@ describe('TestBed', () => {
})
class NonStandaloneDirective {}
@Pipe({standalone: true, name: 'test'})
@Pipe({name: 'test'})
class StandalonePipe {}
@Pipe({
@ -1613,8 +1594,7 @@ describe('TestBed', () => {
* Function returns a class that represents AOT-compiled version of the following Component:
*
* @Component({
* standalone: true,
* imports: [...],
* * imports: [...],
* selector: '...',
* template: '...',
* })
@ -1631,7 +1611,6 @@ describe('TestBed', () => {
class ComponentClass {
static ɵfac = () => new ComponentClass();
static ɵcmp = defineComponent({
standalone: true,
type: ComponentClass,
selectors: [[selector]],
decls: 2,
@ -1665,7 +1644,6 @@ describe('TestBed', () => {
args: [
{
selector,
standalone: true,
imports: [...dependencies, ...deferrableSymbols],
template: `<div>root cmp!</div>`,
},
@ -1682,7 +1660,6 @@ describe('TestBed', () => {
it('should handle async metadata on root and nested components', async () => {
@Component({
standalone: true,
selector: 'cmp-a',
template: 'CmpA!',
})
@ -1728,7 +1705,6 @@ describe('TestBed', () => {
class ThisModuleProvidesService {}
@Component({
standalone: true,
selector: 'child',
imports: [ThisModuleProvidesService],
template: '<h1>{{value}}</h1>',
@ -1739,7 +1715,6 @@ describe('TestBed', () => {
}
@Component({
standalone: true,
selector: 'parent',
imports: [ChildCmp],
template: `
@ -1769,7 +1744,6 @@ describe('TestBed', () => {
args: [
{
selector: 'parent',
standalone: true,
imports: [...deferrableSymbols],
template: `<div>root cmp!</div>`,
},

1
packages/core/test/zone/ng_zone_spec.ts
View file

@ -935,7 +935,6 @@ function commonTests() {
}
@Component({
standalone: true,
template: `
<div class="clickable" (click)="clicked = true"></div>
{{clicked ? 'clicked' : '' }}