feat: standalone component architecture (#122)

Author: herefishyfish

packages/angular/src/lib/cdk/action-bar/index.ts

@@ -78,6 +78,7 @@ const appendActionItem = (bar: NgActionBar, item: ActionItem) => {
 @Component({
   selector: 'ActionBar',
   template: '<ng-content></ng-content>',
+  standalone: true,
 })
 export class ActionBarComponent {
   constructor(public element: ElementRef, @Optional() private page: Page) {
@@ -96,6 +97,7 @@ export class ActionBarComponent {
 @Component({
   selector: 'ActionBarExtension',
   template: '',
+  standalone: true,
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 export class ActionBarScope {
@@ -130,6 +132,7 @@ export class ActionBarScope {
 
 @Directive({
   selector: 'ActionItem', // tslint:disable-line:directive-selector
+  standalone: true,
 })
 export class ActionItemDirective implements OnDestroy {
   constructor(public element: ElementRef, @Optional() private ownerScope: ActionBarScope) {
@@ -147,6 +150,7 @@ export class ActionItemDirective implements OnDestroy {
 
 @Directive({
   selector: 'NavigationButton', // tslint:disable-line:directive-selector
+  standalone: true,
 })
 export class NavigationButtonDirective implements OnDestroy {
   constructor(public element: ElementRef, @Optional() private ownerScope: ActionBarScope) {

packages/angular/src/lib/cdk/detached-loader.ts

@@ -1,8 +1,8 @@
-import { ComponentRef, ComponentFactory, ViewContainerRef, Component, Type, ComponentFactoryResolver, ChangeDetectorRef, ApplicationRef, OnDestroy, TemplateRef, ViewChild, Injector } from '@angular/core';
+import { ApplicationRef, ChangeDetectorRef, Component, ComponentFactory, ComponentFactoryResolver, ComponentRef, Injector, NO_ERRORS_SCHEMA, OnDestroy, TemplateRef, Type, ViewChild, ViewContainerRef } from '@angular/core';
 import { ProxyViewContainer, Trace } from '@nativescript/core';
-import { ComponentPortal, TemplatePortal } from './portal';
-import type { ComponentType } from '../utils/general';
 import { registerElement } from '../element-registry';
+import type { ComponentType } from '../utils/general';
+import { ComponentPortal, TemplatePortal } from './portal';
 
 registerElement('DetachedContainer', () => ProxyViewContainer, {
   skipAddToDom: true,
@@ -19,6 +19,8 @@ registerElement('DetachedContainer', () => ProxyViewContainer, {
   template: `<Placeholder #loader></Placeholder>
     <ng-container #vc></ng-container>
     <ng-content></ng-content>`,
+  standalone: true,
+  schemas: [NO_ERRORS_SCHEMA],
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 export class DetachedLoader implements OnDestroy {

packages/angular/src/lib/cdk/dialog/dialog-content-directives.ts

@@ -18,6 +18,7 @@ import { NativeDialogRef } from './dialog-ref';
   // eslint-disable-next-line @angular-eslint/directive-selector
   selector: '[native-dialog-close], [nativeDialogClose]',
   exportAs: 'nativeDialogClose',
+  standalone: true,
 })
 export class NativeDialogCloseDirective implements OnInit, OnChanges {
   /** Dialog close input. */

packages/angular/src/lib/cdk/dialog/dialog-module.ts

@@ -3,7 +3,7 @@ import { NativeDialogCloseDirective } from './dialog-content-directives';
 import { NativeDialogService } from './dialog-services';
 
 @NgModule({
-  declarations: [NativeDialogCloseDirective],
+  imports: [NativeDialogCloseDirective],
   exports: [NativeDialogCloseDirective],
   providers: [NativeDialogService],
 })

packages/angular/src/lib/cdk/frame-page/frame-page.component.ts

@@ -24,6 +24,7 @@ registerElement('FramePage', () => Frame, {
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'FramePage',
   template: `<ng-content></ng-content>`,
+  standalone: true,
   providers: [
     {
       provide: Frame,

packages/angular/src/lib/cdk/frame-page/frame-page.module.ts

@@ -4,7 +4,7 @@ import { FrameDirective } from './frame.directive';
 import { PageDirective } from './page.directive';
 
 @NgModule({
-  declarations: [FrameDirective, PageDirective, FramePageComponent],
+  imports: [FrameDirective, PageDirective, FramePageComponent],
   exports: [FrameDirective, PageDirective, FramePageComponent],
 })
 export class FramePageModule {}

packages/angular/src/lib/cdk/frame-page/frame.directive.ts

@@ -8,6 +8,7 @@ export function customFrameDirectiveFactory(v: FrameDirective) {
 @Directive({
   // eslint-disable-next-line @angular-eslint/directive-selector
   selector: 'Frame',
+  standalone: true,
   providers: [
     {
       provide: Frame,

packages/angular/src/lib/cdk/frame-page/page.directive.ts

@@ -9,6 +9,7 @@ export function customPageFactory(v: PageDirective) {
 @Directive({
   // eslint-disable-next-line @angular-eslint/directive-selector
   selector: 'Page',
+  standalone: true,
   providers: [
     {
       provide: Page,

packages/angular/src/lib/cdk/list-view/list-view.component.ts

@@ -3,8 +3,9 @@ import { ItemEventData, KeyedTemplate, LayoutBase, ListView, ObservableArray, pr
 
 import { extractSingleViewRecursive } from '../../element-registry/registry';
 import { NativeScriptDebug } from '../../trace';
-import { NgViewTemplate } from '../../view-refs';
 import { isListLikeIterable } from '../../utils/general';
+import { NgViewTemplate } from '../../view-refs';
+import { DetachedLoader } from '../detached-loader';
 
 const NG_VIEW = '_ngViewRef';
 
@@ -89,7 +90,9 @@ export interface SetupItemViewArgs<T> {
   template: `<DetachedContainer>
     <ng-container #loader></ng-container>
   </DetachedContainer>`,
+  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [DetachedLoader],
   providers: [{ provide: TEMPLATED_ITEMS_COMPONENT, useExisting: forwardRef(() => ListViewComponent) }],
 })
 export class ListViewComponent<T = any> implements DoCheck, OnDestroy, AfterContentInit, TemplatedItemsHost {
@@ -293,7 +296,10 @@ export function getItemViewRoot(viewRef: EmbeddedViewRef<unknown>, rootLocator:
 }
 
 // eslint-disable-next-line @angular-eslint/directive-selector
-@Directive({ selector: '[nsTemplateKey],[nsTemplateKeys]' })
+@Directive({
+  selector: '[nsTemplateKey],[nsTemplateKeys]',
+  standalone: true,
+})
 export class TemplateKeyDirective<T> {
   constructor(private templateRef: TemplateRef<T>, @Host() @Inject(TEMPLATED_ITEMS_COMPONENT) private comp: TemplatedItemsHost<T>) {}
 

packages/angular/src/lib/cdk/platform-filters/android-filter.component.ts

@@ -1,11 +1,14 @@
 /* eslint-disable @angular-eslint/component-selector */
 import { Component, Inject } from '@angular/core';
-import { platformNames, IDevice } from '@nativescript/core';
+import { IDevice, platformNames } from '@nativescript/core';
 import { DEVICE } from '../../tokens';
 
 @Component({
   selector: 'android',
-  template: `<ng-content *ngIf="show"></ng-content>`,
+  template: `@if (show) { 
+    <ng-content></ng-content>
+  }`,
+  standalone: true,
 })
 export class AndroidFilterComponent {
   public show: boolean;

packages/angular/src/lib/cdk/platform-filters/ios-filter.component.ts

@@ -1,11 +1,14 @@
 /* eslint-disable @angular-eslint/component-selector */
 import { Component, Inject } from '@angular/core';
-import { platformNames, IDevice } from '@nativescript/core';
+import { IDevice, platformNames } from '@nativescript/core';
 import { DEVICE } from '../../tokens';
 
 @Component({
   selector: 'ios',
-  template: `<ng-content *ngIf="show"></ng-content>`,
+  template: `@if (show) { 
+    <ng-content></ng-content>
+  }`,
+  standalone: true,
 })
 export class IOSFilterComponent {
   public show: boolean;

packages/angular/src/lib/cdk/platform-filters/vision-filter.component.ts

@@ -5,7 +5,10 @@ import { DEVICE } from '../../tokens';
 
 @Component({
   selector: 'visionos',
-  template: `<ng-content *ngIf="show"></ng-content>`,
+  template: `@if (show) { 
+    <ng-content></ng-content>
+  }`,
+  standalone: true,
 })
 export class VisionOSFilterComponent {
   public show: boolean;

packages/angular/src/lib/cdk/portal/portal-directives.ts

@@ -18,6 +18,7 @@ import { BasePortalOutlet, ComponentPortal, DomPortal, Portal, TemplatePortal }
 @Directive({
   selector: '[cdkPortal]',
   exportAs: 'cdkPortal',
+  standalone: true,
 })
 export class CdkPortal extends TemplatePortal {
   constructor(templateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef) {
@@ -40,6 +41,7 @@ export type CdkPortalOutletAttachedRef = ComponentRef<any> | EmbeddedViewRef<any
 @Directive({
   selector: '[cdkPortalOutlet]',
   exportAs: 'cdkPortalOutlet',
+  standalone: true,
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
   inputs: ['portal: cdkPortalOutlet'],
 })
@@ -191,7 +193,7 @@ export class CdkPortalOutlet extends BasePortalOutlet implements OnInit, OnDestr
 }
 
 @NgModule({
+  imports: [CdkPortal, CdkPortalOutlet],
   exports: [CdkPortal, CdkPortalOutlet],
-  declarations: [CdkPortal, CdkPortalOutlet],
 })
 export class PortalModule {}

packages/angular/src/lib/cdk/tab-view/index.ts

@@ -14,6 +14,7 @@ export interface TabViewItemDef {
 
 @Directive({
   selector: 'TabView', // eslint-disable-line @angular-eslint/directive-selector
+  standalone: true,
 })
 export class TabViewDirective implements AfterViewInit {
   public tabView: TabView;
@@ -49,6 +50,7 @@ export class TabViewDirective implements AfterViewInit {
 
 @Directive({
   selector: '[tabItem]', // eslint-disable-line @angular-eslint/directive-selector
+  standalone: true,
 })
 export class TabViewItemDirective implements OnInit {
   private item: TabViewItem;

packages/angular/src/lib/legacy/router/ns-empty-outlet.component.ts

@@ -6,6 +6,8 @@ import { PageRouterOutlet } from './page-router-outlet';
   // tslint:disable-next-line:component-selector
   selector: 'ns-empty-outlet',
   template: "<page-router-outlet isEmptyOutlet='true'></page-router-outlet>",
+  standalone: true,
+  imports: [PageRouterOutlet],
 })
 export class NSEmptyOutletComponent {
   @ViewChild(PageRouterOutlet, { read: PageRouterOutlet, static: false }) pageRouterOutlet: PageRouterOutlet;

packages/angular/src/lib/legacy/router/ns-router-link-active.ts

@@ -51,6 +51,7 @@ import { NSRouterLink } from './ns-router-link';
 @Directive({
   selector: '[nsRouterLinkActive]',
   exportAs: 'routerLinkActive',
+  standalone: true,
 })
 export class NSRouterLinkActive implements OnChanges, OnDestroy, AfterContentInit {
   // tslint:disable-line:max-line-length directive-class-suffix

packages/angular/src/lib/legacy/router/ns-router-link.ts

@@ -33,7 +33,10 @@ export type QueryParamsHandling = 'merge' | 'preserve' | '';
  * instead look in the current component"s children for the route.
  * And if the segment begins with `../`, the router will go up one level.
  */
-@Directive({ selector: '[nsRouterLink]' })
+@Directive({ 
+  selector: '[nsRouterLink]', 
+  standalone: true,
+})
 export class NSRouterLink implements AfterViewInit {
   // tslint:disable-line:directive-class-suffix
   @Input() target: string;

packages/angular/src/lib/legacy/router/page-router-outlet.ts

@@ -77,7 +77,10 @@ const routeToString = function (activatedRoute: ActivatedRoute | ActivatedRouteS
 
 registerElement('page-router-outlet', () => Frame);
 // eslint-disable-next-line @angular-eslint/directive-selector
-@Directive({ selector: 'page-router-outlet' }) // tslint:disable-line:directive-selector
+@Directive({ 
+  selector: 'page-router-outlet',
+  standalone: true,
+}) // tslint:disable-line:directive-selector
 export class PageRouterOutlet implements OnDestroy, RouterOutletContract {
   // tslint:disable-line:directive-class-suffix
   private activated: ComponentRef<any> | null = null;

packages/angular/src/lib/legacy/router/router.module.ts

@@ -26,10 +26,11 @@ export function provideLocationStrategy(locationStrategy: NSLocationStrategy, fr
   return locationStrategy ? locationStrategy : new NSLocationStrategy(frameService, startPath);
 }
 
+const ROUTER_COMPONENTS = [NSRouterLink, NSRouterLinkActive, PageRouterOutlet, NSEmptyOutletComponent];
+
 @NgModule({
-  declarations: [NSRouterLink, NSRouterLinkActive, PageRouterOutlet, NSEmptyOutletComponent],
-  imports: [RouterModule, NativeScriptCommonModule],
-  exports: [RouterModule, NSRouterLink, NSRouterLinkActive, PageRouterOutlet, NSEmptyOutletComponent],
+  imports: [RouterModule, NativeScriptCommonModule, ...ROUTER_COMPONENTS],
+  exports: [RouterModule, ...ROUTER_COMPONENTS],
   schemas: [NO_ERRORS_SCHEMA],
 })
 export class NativeScriptRouterModule {

packages/angular/src/lib/nativescript-common.module.ts

@@ -15,8 +15,7 @@ const CDK_COMPONENTS = [ActionBarComponent, ActionBarScope, ActionItemDirective,
 registerNativeScriptViewComponents();
 
 @NgModule({
-  imports: [CommonModule, FramePageModule],
-  declarations: [...CDK_COMPONENTS],
+  imports: [CommonModule, FramePageModule, ...CDK_COMPONENTS],
   exports: [CommonModule, FramePageModule, ...CDK_COMPONENTS],
   providers: [ModalDialogService],
   schemas: [NO_ERRORS_SCHEMA],

packages/angular/src/lib/nativescript.ts

@@ -43,8 +43,7 @@ export const NATIVESCRIPT_MODULE_STATIC_PROVIDERS: StaticProvider[] = [
 export const NATIVESCRIPT_MODULE_PROVIDERS: Provider[] = [{ provide: ViewportScroller, useClass: NullViewportScroller }];
 
 @NgModule({
-  imports: [ApplicationModule, NativeScriptCommonModule],
-  declarations: [DetachedLoader],
+  imports: [ApplicationModule, DetachedLoader, NativeScriptCommonModule],
   providers: [...NATIVESCRIPT_MODULE_STATIC_PROVIDERS, ...NATIVESCRIPT_MODULE_PROVIDERS],
   exports: [ApplicationModule, DetachedLoader, NativeScriptCommonModule],
   schemas: [NO_ERRORS_SCHEMA],