refactor(core): Migrate modules directory with the schematic. (#58160)

All components, directives and pipes will now use standalone as default. Non-standalone decorators have now .

PR Close #58160
This commit is contained in:
Matthieu Riegler
2024-10-11 14:35:38 +02:00
committed by Paul Gschwendtner
parent e85021a7ba
commit afcc3ee209
62 changed files with 108 additions and 56 deletions
@@ -26,6 +26,7 @@ import {newArray} from '../util';
<ng-container *ngFor="let n of views; template: template; trackBy: trackByIndex"></ng-container>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: false,
})
export class InsertionComponent {
@Input() template!: TemplateRef<NgForOfContext<any, any[]>>;
@@ -49,6 +50,7 @@ export class InsertionComponent {
<ng-template #template>{{ trackTemplateRefresh() }}</ng-template>
<insertion-component [template]="template" [viewCount]="viewCount"></insertion-component>
`,
standalone: false,
})
export class DeclarationComponent {
@Input() viewCount = 1;
@@ -17,6 +17,7 @@ import {Component} from '@angular/core';
><class-bindings> </class-bindings
></class-bindings>
`,
standalone: false,
})
export class AppComponent {
show = false;
@@ -29,6 +29,7 @@ import {Component, Input} from '@angular/core';
</div>
</div>
`,
standalone: false,
})
export class ClassBindingsComponent {
@Input() msg: string = '';
@@ -28,6 +28,7 @@ import {BenchmarkableExpandingRowModule} from './benchmarkable_expanding_row_mod
<benchmark-area>
<benchmarkable-expanding-row></benchmarkable-expanding-row>
</benchmark-area>`,
standalone: false,
})
export class InitializationRoot implements AfterViewInit {
@ViewChild(BenchmarkableExpandingRow, {static: true}) expandingRow!: BenchmarkableExpandingRow;
@@ -25,6 +25,7 @@ import {Component, ErrorHandler, Injectable, NgModule} from '@angular/core';
host: {
'class': 'cfc-ng2-region',
},
standalone: false,
})
export class BenchmarkArea {}
@@ -38,6 +38,7 @@ export interface MlbTeam {
</cfc-expanding-row-details-content>
</cfc-expanding-row>
</cfc-expanding-row-host>`,
standalone: false,
})
export class BenchmarkableExpandingRow {
// TODO(b/109816955): remove '!', see go/strict-prop-init-fix.
@@ -121,6 +121,7 @@ export interface ExpandingRowHostBase {
<ng-content></ng-content>
</div>`,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: false,
})
export class ExpandingRow {
/**
@@ -36,6 +36,7 @@ import {expanding_row_css} from './expanding_row_css';
<ng-content></ng-content>
</div>`,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: false,
})
export class ExpandingRowDetailsCaption implements OnDestroy {
/** The background color of this component. */
@@ -29,6 +29,7 @@ import {expanding_row_css} from './expanding_row_css';
<ng-content></ng-content>
</div>`,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: false,
})
export class ExpandingRowDetailsContent implements OnDestroy {
/** Used for unsubscribing to changes in isExpanded parent property. */
@@ -58,6 +58,7 @@ type UpOrDown = 'up' | 'down';
<div #lastFocusable (focus)="focusOnLastFocusedRow()" tabindex="0"></div>`,
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [{provide: EXPANDING_ROW_HOST_INJECTION_TOKEN, useExisting: ExpandingRowHost}],
standalone: false,
})
export class ExpandingRowHost implements AfterViewInit, OnDestroy, ExpandingRowHostBase {
/**
@@ -55,6 +55,7 @@ const KEY_CODE_TAB = 9;
</div>
</div>`,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: false,
})
export class ExpandingRowSummary implements OnDestroy {
/**
@@ -14,5 +14,6 @@ import {Directive} from '@angular/core';
*/
@Directive({
selector: '[cfcUncollapsible]',
standalone: false,
})
export class ExpandingRowUncollapsible {}
@@ -36,6 +36,7 @@ export interface RowData {
</tbody>
</table>
`,
standalone: false,
})
export class JsWebFrameworksComponent {
data: Array<RowData> = [];
@@ -64,6 +64,7 @@ import {BrowserModule} from '@angular/platform-browser';
<input type="text" [(ngModel)]="values[48]" name="value48" />
<input type="text" [(ngModel)]="values[49]" name="value49" />
</form>`,
standalone: false,
})
export class AppComponent {
copies: number[] = [];
@@ -28,6 +28,7 @@ let trustedGreyColor: SafeStyle;
</tr>
</tbody>
</table>`,
standalone: false,
})
export class TableComponent {
@Input() data: TableCell[][] = emptyTable;
@@ -25,6 +25,7 @@ import {emptyTable, TableCell} from '../util';
</tr>
</tbody>
</table>`,
standalone: false,
})
export class TableComponent {
@Input() data: TableCell[][] = emptyTable;
@@ -42,6 +42,7 @@ import {BrowserModule} from '@angular/platform-browser';
></ng-template>
</div>
`,
standalone: false,
})
export class StylingComponent {
data: number[] = [];
+1
View File
@@ -20,6 +20,7 @@ let trustedGreyColor: SafeStyle;
template: `<span [style.backgroundColor]="bgColor"> {{ data.value }} </span
><tree *ngIf="data.right != null" [data]="data.right"></tree
><tree *ngIf="data.left != null" [data]="data.left"></tree>`,
standalone: false,
})
export class TreeComponent {
data: TreeNode = emptyTree;
@@ -21,7 +21,11 @@ function createTreeComponent(level: number, isLeaf: boolean) {
template += `<${nextTreeEl} [data]='data.right'></${nextTreeEl}><${nextTreeEl} [data]='data.left'></${nextTreeEl}>`;
}
@Component({selector: `tree${level}`, template: template})
@Component({
selector: `tree${level}`,
template: template,
standalone: false,
})
class TreeComponent {
@Input() data: TreeNode;
get bgColor() {
@@ -35,6 +39,7 @@ function createTreeComponent(level: number, isLeaf: boolean) {
@Component({
selector: 'tree',
template: `<tree0 *ngIf="data.left != null" [data]="data"></tree0>`,
standalone: false,
})
export class RootTreeComponent {
@Input() data: TreeNode = emptyTree;
@@ -19,6 +19,7 @@ import {emptyTree, TreeNode} from '../util';
<tree *ngIf="data.right != null" [data]="data.right"></tree
><tree *ngIf="data.left != null" [data]="data.left"></tree
></ng-container>`,
standalone: false,
})
export class TreeComponent {
@Input() data: TreeNode = emptyTree;
@@ -45,12 +45,10 @@ import {Component} from '@angular/core';
'active',
style({'background-color': 'orange', 'color': 'white', 'font-size': '100px'}),
),
transition('active <=> start', [
animate(500, style({'transform': 'scale(2)'})),
animate(500),
]),
transition('* => *', [
animate(1000, style({'opacity': 1, 'height': 300})),
animate(1000, style({'background-color': 'blue'})),
@@ -66,6 +64,7 @@ import {Component} from '@angular/core';
]),
]),
],
standalone: false,
})
export class AnimateApp {
public items: number[] = [];
+1
View File
@@ -43,6 +43,7 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
</button>
</div>
`,
standalone: false,
})
class AsyncApplication {
val1: number = 0;
+5 -1
View File
@@ -10,7 +10,11 @@ import {Component, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
@Component({selector: 'gestures-app', templateUrl: 'template.html'})
@Component({
selector: 'gestures-app',
templateUrl: 'template.html',
standalone: false,
})
class GesturesCmp {
swipeDirection: string = '-';
pinchScale: number = 1;
+5 -1
View File
@@ -18,7 +18,10 @@ export class GreetingService {
// Directives are light-weight. They don't allow new
// expression contexts (use @Component for those needs).
@Directive({selector: '[red]'})
@Directive({
selector: '[red]',
standalone: false,
})
export class RedDec {
// ElementRef is always injectable and it wraps the element on which the
// directive was found by the compiler.
@@ -44,6 +47,7 @@ export class RedDec {
// context of the HelloCmp class below.
template: `<div class="greeting">{{ greeting }} <span red>world</span>!</div>
<button class="changeButton" (click)="changeGreeting()">change greeting</button>`,
standalone: false,
})
export class HelloCmp {
greeting: string;
@@ -17,6 +17,7 @@ import {Component} from '@angular/core';
<li *ngFor="let person of people">hello, {{ person['name'] }}</li>
</ul>
`,
standalone: false,
})
export class HttpCmp {
people: Object[];
@@ -17,6 +17,7 @@ import {Component} from '@angular/core';
<li *ngFor="let person of people">hello, {{ person.name }}</li>
</ul>
`,
standalone: false,
})
export class JsonpCmp {
people: Object;
@@ -24,6 +24,7 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
>
{{ shiftEnter ? 'You pressed shift.enter!' : '' }}
</div>`,
standalone: false,
})
export class KeyEventsApp {
lastKey: string = '(none)';
@@ -51,6 +51,7 @@ function creditCardValidator(c: AbstractControl): {[key: string]: boolean} {
selector: 'show-error',
inputs: ['controlPath: control', 'errorTypes: errors'],
template: ` <span *ngIf="errorMessage !== null">{{ errorMessage }}</span> `,
standalone: false,
})
export class ShowError {
formDir: FormGroupDirective;
@@ -140,6 +141,7 @@ export class ShowError {
<button type="submit" [disabled]="!f.form.valid">Submit</button>
</form>
`,
standalone: false,
})
export class ReactiveForms {
form: UntypedFormGroup;
@@ -115,6 +115,7 @@ export class DataService {
<button (click)="select(order)">Select</button>
</div>
`,
standalone: false,
})
export class OrderListComponent {
orders: Order[];
@@ -158,6 +159,7 @@ export class OrderListComponent {
<button (click)="onDelete()">Delete</button>
</div>
`,
standalone: false,
})
export class OrderItemComponent {
@Input() item: OrderItem;
@@ -203,6 +205,7 @@ export class OrderItemComponent {
></order-item-cmp>
</div>
`,
standalone: false,
})
export class OrderDetailsComponent {
constructor(private _service: DataService) {}
@@ -227,6 +230,7 @@ export class OrderDetailsComponent {
<order-list-cmp></order-list-cmp>
<order-details-cmp></order-details-cmp>
`,
standalone: false,
})
export class OrderManagementApplication {}
@@ -124,6 +124,7 @@ export class DataService {
</form>
</div>
`,
standalone: false,
})
export class FullNameComponent {
constructor(private _service: DataService) {}
@@ -213,6 +214,7 @@ export class FullNameComponent {
</form>
</div>
`,
standalone: false,
})
export class PersonsDetailComponent {
constructor(private _service: DataService) {}
@@ -235,6 +237,7 @@ export class PersonsDetailComponent {
<person-detail-cmp></person-detail-cmp>
</div>
`,
standalone: false,
})
export class PersonsComponent {
persons: Person[];
@@ -258,6 +261,7 @@ export class PersonsComponent {
<full-name-cmp *ngIf="mode == 'editName'"></full-name-cmp>
<persons-cmp *ngIf="mode == 'personList'"></persons-cmp>
`,
standalone: false,
})
export class PersonManagementApplication {
mode: string;
@@ -12,5 +12,6 @@ import {Component} from '@angular/core';
selector: 'my-cmp',
templateUrl: './tpl.html',
styleUrls: ['./style.css'],
standalone: false,
})
export class MyCmp {}
@@ -15,6 +15,7 @@ import {MyCmp} from './app/my_cmp';
@Component({
selector: 'relative-app',
template: `component = <my-cmp></my-cmp>`,
standalone: false,
})
export class RelativeApp {}
@@ -92,7 +92,11 @@ export class DbService {
}
}
@Component({selector: 'inbox', templateUrl: './inbox.html'})
@Component({
selector: 'inbox',
templateUrl: './inbox.html',
standalone: false,
})
export class InboxCmp {
items: InboxRecord[] = [];
private ready: boolean = false;
@@ -119,7 +123,11 @@ export class InboxCmp {
}
}
@Component({selector: 'drafts', templateUrl: './drafts.html'})
@Component({
selector: 'drafts',
templateUrl: './drafts.html',
standalone: false,
})
export class DraftsCmp {
items: InboxRecord[] = [];
private ready: boolean = false;
@@ -142,5 +150,9 @@ export const ROUTER_CONFIG: Routes = [
{path: 'detail', loadChildren: () => import('./inbox-detail').then((mod) => mod.default)},
];
@Component({selector: 'inbox-app', templateUrl: './inbox-app.html'})
@Component({
selector: 'inbox-app',
templateUrl: './inbox-app.html',
standalone: false,
})
export class InboxApp {}
@@ -11,7 +11,11 @@ import {ActivatedRoute, RouterModule} from '@angular/router';
import {DbService, InboxRecord} from './inbox-app';
@Component({selector: 'inbox-detail', templateUrl: './inbox-detail.html'})
@Component({
selector: 'inbox-detail',
templateUrl: './inbox-detail.html',
standalone: false,
})
export class InboxDetailCmp {
record: InboxRecord = new InboxRecord();
private ready: boolean = false;
@@ -13,6 +13,7 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
@Component({
selector: 'error-app',
template: ` <button class="errorButton" (click)="createError()">create error</button>`,
standalone: false,
})
export class ErrorComponent {
createError(): void {
+6 -1
View File
@@ -10,7 +10,11 @@ import {Component, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
@Component({selector: '[svg-group]', template: `<svg:text x="20" y="20">Hello</svg:text>`})
@Component({
selector: '[svg-group]',
template: `<svg:text x="20" y="20">Hello</svg:text>`,
standalone: false,
})
export class SvgGroup {}
@Component({
@@ -18,6 +22,7 @@ export class SvgGroup {}
template: `<svg>
<g svg-group></g>
</svg>`,
standalone: false,
})
export class SvgApp {}
@@ -45,7 +45,11 @@ export const creditCardValidatorBinding = {
multi: true,
};
@Directive({selector: '[credit-card]', providers: [creditCardValidatorBinding]})
@Directive({
selector: '[credit-card]',
providers: [creditCardValidatorBinding],
standalone: false,
})
export class CreditCardValidator {}
/**
@@ -67,6 +71,7 @@ export class CreditCardValidator {}
selector: 'show-error',
inputs: ['controlPath: control', 'errorTypes: errors'],
template: ` <span *ngIf="errorMessage !== null">{{ errorMessage }}</span> `,
standalone: false,
})
export class ShowError {
formDir: NgForm;
@@ -162,6 +167,7 @@ export class ShowError {
<button type="submit" [disabled]="!f.form.valid">Submit</button>
</form>
`,
standalone: false,
})
export class TemplateDrivenForms {
model = new CheckoutModel();
+6 -1
View File
@@ -12,7 +12,12 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {Store, Todo, TodoFactory} from './app/TodoStore';
@Component({selector: 'todo-app', viewProviders: [Store, TodoFactory], templateUrl: 'todo.html'})
@Component({
selector: 'todo-app',
viewProviders: [Store, TodoFactory],
templateUrl: 'todo.html',
standalone: false,
})
export class TodoApp {
todoEdit: Todo = null;
+2
View File
@@ -52,6 +52,7 @@ ng1module.directive('ng1User', function () {
<div class="content"><ng-content></ng-content></div>
</div>`,
styles: styles,
standalone: false,
})
export class Pane {
@Input() title: string;
@@ -70,6 +71,7 @@ export class Pane {
</pane>
</div>`,
styles: styles,
standalone: false,
})
export class UpgradeApp {
@Input() user: string;
@@ -8,7 +8,11 @@
import {Component, EventEmitter, Input, Output} from '@angular/core';
@Component({selector: 'zippy', templateUrl: './zippy.html'})
@Component({
selector: 'zippy',
templateUrl: './zippy.html',
standalone: false,
})
export class Zippy {
visible: boolean = true;
@Input() title: string = '';
@@ -22,6 +22,7 @@ import {Zippy} from './app/zippy';
<li *ngFor="let log of logs">{{ log }}</li>
</ul>
`,
standalone: false,
})
export class ZippyApp {
logs: string[] = [];
@@ -6,7 +6,6 @@ import {Component, Input} from '@angular/core';
template: `
{{label}}
`,
standalone: false,
})
class Group {
@Input() label!: string;
@@ -20,7 +19,6 @@ class Group {
{{group.label}}
`,
standalone: false,
})
class Option {
constructor(public group: Group) {}
@@ -10,6 +10,5 @@ class Base {
@Directive({
inputs: [{name: 'bla', alias: 'matDerivedBla'}],
standalone: false,
})
class Derived extends Base {}
@@ -14,7 +14,6 @@ export class MatHint {
@Component({
template: ``,
standalone: false,
})
export class MatFormFieldTest {
private declare _hintChildren: MatHint[];
@@ -2,9 +2,7 @@
import {Directive, Input} from '@angular/core';
@Directive({
standalone: false,
})
@Directive({})
export class WithGetters {
@Input()
get disabled() {
@@ -10,7 +10,6 @@ import {Component, Input} from '@angular/core';
'[receiverNarrowing]': 'receiverNarrowing ? receiverNarrowing.id',
// normal narrowing is irrelevant as we don't type check host bindings.
},
standalone: false,
})
class HostBindingTestCmp {
@Input() id = 'works';
@@ -29,7 +28,6 @@ const SHARED = {
@Component({
template: '',
host: SHARED,
standalone: false,
})
class HostBindingsShared {
@Input() id = false;
@@ -38,7 +36,6 @@ class HostBindingsShared {
@Component({
template: '',
host: SHARED,
standalone: false,
})
class HostBindingsShared2 {
@Input() id = false;
@@ -12,10 +12,7 @@ import {Component, Input} from '@angular/core';
const complex = 'some global variable';
@Component({
template: '',
standalone: false,
})
@Component({template: ''})
class MyComp {
@Input() name: string | null = null;
@Input() complex: string | null = null;
@@ -13,7 +13,6 @@ interface Audi extends Car {
@Component({
selector: 'app-component',
templateUrl: './template.html',
standalone: false,
})
export class AppComponent {
@Input() input: string | null = null;
@@ -2,10 +2,7 @@
import {Component, Input} from '@angular/core';
@Component({
template: '',
standalone: false,
})
@Component({template: ''})
class IndexAccessInput {
@Input() items: string[] = [];
@@ -13,7 +13,6 @@ describe('bla', () => {
<app-component #ref />
{{ref.input.ok}}
`,
standalone: false,
})
class TestCmp {}
TestBed.configureTestingModule({
@@ -7,7 +7,6 @@ import {Component, Input} from '@angular/core';
<div *someTemplateDir [style.ok]="justify">
</div>
`,
standalone: false,
})
export class InlineTmpl {
@Input() justify: 'start' | 'end' = 'end';
@@ -13,7 +13,6 @@ import {Component, Input} from '@angular/core';
@Component({
jit: true,
template: '{{test}}',
standalone: false,
})
class JitTrueComponent {
@Input() test = true;
@@ -22,7 +21,6 @@ class JitTrueComponent {
@Component({
jit: true,
templateUrl: './jit_true_component_external_tmpl.html',
standalone: false,
})
class JitTrueComponentExternalTmpl {
@Input() test = true;
@@ -2,9 +2,7 @@
import {Component, Input} from '@angular/core';
@Component({
standalone: false,
})
@Component({})
export class ManualInstantiation {
@Input() bla: string = '';
}
@@ -6,10 +6,7 @@ function CustomDecorator() {
return (a: any, b: any) => {};
}
@Component({
template: '',
standalone: false,
})
@Component({template: ''})
class ModifierScenarios {
@Input() readonly alreadyReadonly = true;
@Input() protected ImProtected = true;
@@ -12,7 +12,6 @@ interface Config {
Test
</span>
`,
standalone: false,
})
export class NestedTemplatePropAccess {
@Input() config: Config = {};
@@ -2,9 +2,7 @@
import {Component, Input} from '@angular/core';
@Component({
standalone: false,
})
@Component({})
export class ObjectExpansion {
@Input() bla: string = '';
@@ -6,7 +6,6 @@ import {Component, Directive, QueryList, Input} from '@angular/core';
template: `
{{label}}
`,
standalone: false,
})
class Group {
@Input() label!: string;
@@ -19,9 +18,7 @@ class Base {
}>();
}
@Directive({
standalone: false,
})
@Directive({})
class Option extends Base {
_items = new QueryList<Group>();
}
@@ -14,7 +14,6 @@ import {Component, Input} from '@angular/core';
template: `
{{bla?.myInput}}
`,
standalone: false,
})
class WithSafePropertyReads {
@Input() myInput = 0;
@@ -9,7 +9,6 @@ class SomeDir {
@Component({
template: ``,
standalone: false,
})
export class ScopeMismatchTest {
eachScopeRedeclared() {
@@ -24,7 +24,6 @@ import {Component, Input} from '@angular/core';
{{notTheInput}}
}
`,
standalone: false,
})
export class MyComp {
@Input() first = true;
@@ -10,7 +10,6 @@ import {Component, Input} from '@angular/core';
host: {
'[style]': '{myInput}',
},
standalone: false,
})
export class TemplateObjectShorthand {
@Input() myInput = true;
@@ -11,7 +11,6 @@ import {Component, Input} from '@angular/core';
host: {
'(click)': 'inputC = true',
},
standalone: false,
})
class TwoWayBinding {
@Input() inputA = '';