mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-17 02:31:34 +08:00
feat(angular,angular-server): angular v14 minimum support (#26822)
BREAKING CHANGE: Angular v14 is now required to use `@ionic/angular` and `@ionic/angular-server`. Upgrade your project to Angular v14 by following the [Angular v14 update guide](https://update.angular.io/?l=3&v=13.0-14.0). The dev-preview `environmentInjector` property has been removed from `ion-tabs` and `ion-router-outlet`. Standalone component routing is now available without additional custom configuration. Remove the `environmentInjector` property from your `ion-tabs` and `ion-router-outlet` components.
This commit is contained in:
Sean Perkins
2
.github/workflows/build.yml
vendored
2
.github/workflows/build.yml
vendored
@ -135,7 +135,7 @@ jobs:
|
||||
strategy:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
apps: [ng12, ng13, ng14, ng15]
|
||||
apps: [ng14, ng15]
|
||||
needs: [build-angular, build-angular-server]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
|
||||
@ -59,7 +59,7 @@ This section details the desktop browser, JavaScript framework, and mobile platf
|
||||
|
||||
| Framework | Supported Version |
|
||||
| --------- | --------------------- |
|
||||
| Angular | 13+ |
|
||||
| Angular | 14+ |
|
||||
| React | 17+ |
|
||||
| Vue | 3.0.6+ |
|
||||
|
||||
@ -74,7 +74,7 @@ This section details the desktop browser, JavaScript framework, and mobile platf
|
||||
|
||||
<h4 id="version-7x-accordion-group">Accordion Group</h4>
|
||||
|
||||
-`ionChange` is no longer emitted when the `value` of `ion-accordion-group` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping the accordion header.
|
||||
- `ionChange` is no longer emitted when the `value` of `ion-accordion-group` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping the accordion header.
|
||||
|
||||
- Accordion Group no longer automatically adjusts the `value` property when passed an array and `multiple="false"`. Developers should update their apps to ensure they are using the API correctly.
|
||||
|
||||
@ -289,8 +289,12 @@ Any references to the virtual scroll types from `@ionic/core` have been removed.
|
||||
|
||||
<h4 id="version-7x-angular">Angular</h4>
|
||||
|
||||
- Angular v14 is now required to use `@ionic/angular` and `@ionic/angular-server`. Upgrade your project to Angular v14 by following the [Angular v14 update guide](https://update.angular.io/?l=3&v=13.0-14.0).
|
||||
|
||||
- `null` values on form components will no longer be converted to the empty string (`''`) or `false`. This impacts `ion-checkbox`, `ion-datetime`, `ion-input`, `ion-radio`, `ion-radio-group`, `ion-range`, `ion-searchbar`, `ion-segment`, `ion-select`, `ion-textarea`, and `ion-toggle`.
|
||||
|
||||
- The dev-preview `environmentInjector` property has been removed from `ion-tabs` and `ion-router-outlet`. Standalone component routing is now available without additional custom configuration. Remove the `environmentInjector` property from your `ion-tabs` and `ion-router-outlet` components.
|
||||
|
||||
<h4 id="version-7x-react">React</h4>
|
||||
|
||||
`@ionic/react` and `@ionic/react-router` no longer ship a CommonJS entry point. Instead, only an ES Module entry point is provided for improved compatibility with Vite.
|
||||
|
||||
7
angular/ng-package.json
Normal file
7
angular/ng-package.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
|
||||
"lib": {
|
||||
"entryFile": "src/index.ts"
|
||||
},
|
||||
"allowedNonPeerDependencies": ["@ionic/core", "ionicons", "jsonc-parser"]
|
||||
}
|
||||
9393
angular/package-lock.json
generated
9393
angular/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -27,7 +27,7 @@
|
||||
"build": "npm run clean && npm run build.ng && npm run build.core && npm run clean-generated",
|
||||
"build.core": "node scripts/build-core.js",
|
||||
"build.link": "npm run build && node scripts/link-copy.js",
|
||||
"build.ng": "ng-packagr -p package.json -c tsconfig.json",
|
||||
"build.ng": "ng-packagr -p ng-package.json -c tsconfig.json",
|
||||
"clean": "node scripts/clean.js",
|
||||
"clean-generated": "node ./scripts/clean-generated.js",
|
||||
"lint": "npm run eslint && npm run prettier -- --write --cache",
|
||||
@ -45,53 +45,45 @@
|
||||
"@ionic/core": "^7.0.0-beta.4",
|
||||
"ionicons": "^6.1.3",
|
||||
"jsonc-parser": "^3.0.0",
|
||||
"tslib": "^2.0.0"
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/core": ">=12.0.0",
|
||||
"@angular/forms": ">=12.0.0",
|
||||
"@angular/router": ">=12.0.0",
|
||||
"rxjs": ">=6.6.0",
|
||||
"@angular/core": ">=14.0.0",
|
||||
"@angular/forms": ">=14.0.0",
|
||||
"@angular/router": ">=14.0.0",
|
||||
"rxjs": ">=7.5.0",
|
||||
"zone.js": ">=0.11.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/core": "^12.0.0",
|
||||
"@angular-devkit/schematics": "^12.0.0",
|
||||
"@angular-eslint/eslint-plugin": "^12.5.0",
|
||||
"@angular-eslint/eslint-plugin-template": "^12.5.0",
|
||||
"@angular-eslint/template-parser": "^12.5.0",
|
||||
"@angular/common": "^12.0.0",
|
||||
"@angular/compiler": "^12.0.0",
|
||||
"@angular/compiler-cli": "^12.0.0",
|
||||
"@angular/core": "^12.0.0",
|
||||
"@angular/forms": "^12.0.0",
|
||||
"@angular/router": "^12.0.0",
|
||||
"@angular-devkit/core": "^14.0.0",
|
||||
"@angular-devkit/schematics": "^14.0.0",
|
||||
"@angular-eslint/eslint-plugin": "^14.0.0",
|
||||
"@angular-eslint/eslint-plugin-template": "^14.0.0",
|
||||
"@angular-eslint/template-parser": "^14.0.0",
|
||||
"@angular/common": "^14.0.0",
|
||||
"@angular/compiler": "^14.0.0",
|
||||
"@angular/compiler-cli": "^14.0.0",
|
||||
"@angular/core": "^14.0.0",
|
||||
"@angular/forms": "^14.0.0",
|
||||
"@angular/platform-browser": "^14.0.0",
|
||||
"@angular/platform-browser-dynamic": "^14.0.0",
|
||||
"@angular/router": "^14.0.0",
|
||||
"@ionic/eslint-config": "^0.3.0",
|
||||
"@ionic/prettier-config": "^2.0.0",
|
||||
"@schematics/angular": "^12.2.9",
|
||||
"@schematics/angular": "^14.0.0",
|
||||
"@types/node": "12.12.5",
|
||||
"@typescript-eslint/eslint-plugin": "^4.32.0",
|
||||
"@typescript-eslint/parser": "^4.32.0",
|
||||
"eslint": "^7.32.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.0.0",
|
||||
"@typescript-eslint/parser": "^5.0.0",
|
||||
"eslint": "^8.0.0",
|
||||
"eslint-plugin-import": "^2.25.2",
|
||||
"fs-extra": "^7.0.0",
|
||||
"ng-packagr": "^12.0.0",
|
||||
"ng-packagr": "^14.0.0",
|
||||
"prettier": "^2.4.1",
|
||||
"rxjs": "^6.6.2",
|
||||
"typescript": "4.2.4",
|
||||
"typescript-eslint-language-service": "^4.1.5",
|
||||
"rxjs": "~7.5.0",
|
||||
"typescript": "~4.7.2",
|
||||
"typescript-eslint-language-service": "^5.0.0",
|
||||
"zone.js": "~0.11.4"
|
||||
},
|
||||
"prettier": "@ionic/prettier-config",
|
||||
"schematics": "./schematics/collection.json",
|
||||
"ngPackage": {
|
||||
"lib": {
|
||||
"entryFile": "src/index.ts"
|
||||
},
|
||||
"allowedNonPeerDependencies": [
|
||||
"@ionic/core",
|
||||
"ionicons",
|
||||
"jsonc-parser"
|
||||
]
|
||||
}
|
||||
"schematics": "./schematics/collection.json"
|
||||
}
|
||||
|
||||
@ -1,34 +0,0 @@
|
||||
/**
|
||||
* This class is taken directly from Angular's codebase. It can be removed once
|
||||
* we remove support for < Angular 14. The replacement class will come from @angular/core.
|
||||
*
|
||||
* TODO: FW-1641: Remove this class once Angular 13 support is dropped.
|
||||
*
|
||||
*/
|
||||
import { Injector, ProviderToken, InjectFlags } from '@angular/core';
|
||||
/**
|
||||
* An `Injector` that's part of the environment injector hierarchy, which exists outside of the
|
||||
* component tree.
|
||||
*
|
||||
* @developerPreview
|
||||
*/
|
||||
export abstract class EnvironmentInjector implements Injector {
|
||||
/**
|
||||
* Retrieves an instance from the injector based on the provided token.
|
||||
* @returns The instance from the injector if defined, otherwise the `notFoundValue`.
|
||||
* @throws When the `notFoundValue` is `undefined` or `Injector.THROW_IF_NOT_FOUND`.
|
||||
*/
|
||||
abstract get<T>(token: ProviderToken<T>, notFoundValue?: T, flags?: InjectFlags): T;
|
||||
/**
|
||||
* @deprecated from v4.0.0 use ProviderToken<T>
|
||||
* @suppress {duplicate}
|
||||
*/
|
||||
abstract get(token: any, notFoundValue?: any): any;
|
||||
|
||||
abstract destroy(): void;
|
||||
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
abstract onDestroy?(callback: () => void): void;
|
||||
}
|
||||
@ -1,6 +1,5 @@
|
||||
import { Location } from '@angular/common';
|
||||
import {
|
||||
ComponentFactoryResolver,
|
||||
ComponentRef,
|
||||
ElementRef,
|
||||
Injector,
|
||||
@ -8,24 +7,23 @@ import {
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
ViewContainerRef,
|
||||
inject,
|
||||
Attribute,
|
||||
Directive,
|
||||
EventEmitter,
|
||||
Optional,
|
||||
Output,
|
||||
SkipSelf,
|
||||
Input,
|
||||
EnvironmentInjector,
|
||||
} from '@angular/core';
|
||||
import { OutletContext, Router, ActivatedRoute, ChildrenOutletContexts, PRIMARY_OUTLET } from '@angular/router';
|
||||
import { OutletContext, Router, ActivatedRoute, ChildrenOutletContexts, PRIMARY_OUTLET, Data } from '@angular/router';
|
||||
import { componentOnReady } from '@ionic/core';
|
||||
import { Observable, BehaviorSubject } from 'rxjs';
|
||||
import { distinctUntilChanged, filter, switchMap } from 'rxjs/operators';
|
||||
|
||||
import { EnvironmentInjector } from '../../di/r3_injector';
|
||||
import { AnimationBuilder } from '../../ionic-core';
|
||||
import { Config } from '../../providers/config';
|
||||
import { NavController } from '../../providers/nav-controller';
|
||||
import { isComponentFactoryResolver } from '../../util/util';
|
||||
|
||||
import { StackController } from './stack-controller';
|
||||
import { RouteView, getUrl } from './stack-utils';
|
||||
@ -58,22 +56,20 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
|
||||
|
||||
tabsPrefix: string | undefined;
|
||||
|
||||
/**
|
||||
* @experimental
|
||||
*
|
||||
* The `EnvironmentInjector` provider instance from the parent component.
|
||||
* Required for using standalone components with `ion-router-outlet`.
|
||||
*
|
||||
* Will be deprecated and removed when Angular 13 support is dropped.
|
||||
*/
|
||||
@Input() environmentInjector: EnvironmentInjector;
|
||||
|
||||
@Output() stackEvents = new EventEmitter<any>();
|
||||
// eslint-disable-next-line @angular-eslint/no-output-rename
|
||||
@Output('activate') activateEvents = new EventEmitter<any>();
|
||||
// eslint-disable-next-line @angular-eslint/no-output-rename
|
||||
@Output('deactivate') deactivateEvents = new EventEmitter<any>();
|
||||
|
||||
private parentContexts = inject(ChildrenOutletContexts);
|
||||
private location = inject(ViewContainerRef);
|
||||
private environmentInjector = inject(EnvironmentInjector);
|
||||
|
||||
// Ionic providers
|
||||
private config = inject(Config);
|
||||
private navCtrl = inject(NavController);
|
||||
|
||||
set animation(animation: AnimationBuilder) {
|
||||
this.nativeEl.animation = animation;
|
||||
}
|
||||
@ -95,13 +91,8 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
|
||||
}
|
||||
|
||||
constructor(
|
||||
private parentContexts: ChildrenOutletContexts,
|
||||
private location: ViewContainerRef,
|
||||
@Attribute('name') name: string,
|
||||
@Optional() @Attribute('tabs') tabs: string,
|
||||
private config: Config,
|
||||
private navCtrl: NavController,
|
||||
@Optional() private componentFactoryResolver: ComponentFactoryResolver,
|
||||
commonLocation: Location,
|
||||
elementRef: ElementRef,
|
||||
router: Router,
|
||||
@ -112,8 +103,8 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
|
||||
this.nativeEl = elementRef.nativeElement;
|
||||
this.name = name || PRIMARY_OUTLET;
|
||||
this.tabsPrefix = tabs === 'true' ? getUrl(router, activatedRoute) : undefined;
|
||||
this.stackCtrl = new StackController(this.tabsPrefix, this.nativeEl, router, navCtrl, zone, commonLocation);
|
||||
parentContexts.onChildOutletCreated(this.name, this as any);
|
||||
this.stackCtrl = new StackController(this.tabsPrefix, this.nativeEl, router, this.navCtrl, zone, commonLocation);
|
||||
this.parentContexts.onChildOutletCreated(this.name, this as any);
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
@ -125,12 +116,17 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.initializeOutletWithName();
|
||||
}
|
||||
|
||||
// Note: Ionic deviates from the Angular Router implementation here
|
||||
private initializeOutletWithName() {
|
||||
if (!this.activated) {
|
||||
// If the outlet was not instantiated at the time the route got activated we need to populate
|
||||
// the outlet when it is initialized (ie inside a NgIf)
|
||||
const context = this.getContext();
|
||||
if (context?.route) {
|
||||
this.activateWith(context.route, context.resolver || null);
|
||||
this.activateWith(context.route, context.injector);
|
||||
}
|
||||
}
|
||||
|
||||
@ -159,7 +155,7 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
|
||||
return this._activatedRoute as ActivatedRoute;
|
||||
}
|
||||
|
||||
get activatedRouteData(): any {
|
||||
get activatedRouteData(): Data {
|
||||
if (this._activatedRoute) {
|
||||
return this._activatedRoute.snapshot.data;
|
||||
}
|
||||
@ -221,10 +217,7 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
|
||||
}
|
||||
}
|
||||
|
||||
activateWith(
|
||||
activatedRoute: ActivatedRoute,
|
||||
resolverOrInjector?: ComponentFactoryResolver | EnvironmentInjector | null
|
||||
): void {
|
||||
activateWith(activatedRoute: ActivatedRoute, environmentInjector: EnvironmentInjector | null): void {
|
||||
if (this.isActivated) {
|
||||
throw new Error('Cannot activate an already activated outlet');
|
||||
}
|
||||
@ -252,22 +245,6 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
|
||||
* We check for the presence of this property to determine if the route is
|
||||
* using standalone components.
|
||||
*/
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
if (snapshot.routeConfig!.component == null && this.environmentInjector == null) {
|
||||
console.warn(
|
||||
'[Ionic Warning]: You must supply an environmentInjector to use standalone components with routing:\n\n' +
|
||||
'In your component class, add:\n\n' +
|
||||
` import { EnvironmentInjector } from '@angular/core';\n` +
|
||||
' constructor(public environmentInjector: EnvironmentInjector) {}\n' +
|
||||
'\n' +
|
||||
'In your router outlet template, add:\n\n' +
|
||||
' <ion-router-outlet [environmentInjector]="environmentInjector"></ion-router-outlet>\n\n' +
|
||||
'Alternatively, if you are routing within ion-tabs:\n\n' +
|
||||
' <ion-tabs [environmentInjector]="environmentInjector"></ion-tabs>'
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const childContexts = this.parentContexts.getOrCreateContext(this.name).children;
|
||||
|
||||
// We create an activated route proxy object that will maintain future updates for this component
|
||||
@ -277,43 +254,15 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
|
||||
|
||||
const injector = new OutletInjector(activatedRouteProxy, childContexts, this.location.injector);
|
||||
|
||||
/**
|
||||
* The resolver is not always provided and is required in Angular 12.
|
||||
* Fallback to the class-level provider when the resolver is not set.
|
||||
*/
|
||||
resolverOrInjector = resolverOrInjector || this.componentFactoryResolver;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
const component = snapshot.routeConfig!.component ?? snapshot.component;
|
||||
|
||||
if (resolverOrInjector && isComponentFactoryResolver(resolverOrInjector)) {
|
||||
// Backwards compatibility for Angular 13 and lower
|
||||
const factory = resolverOrInjector.resolveComponentFactory(component);
|
||||
cmpRef = this.activated = this.location.createComponent(factory, this.location.length, injector);
|
||||
} else {
|
||||
/**
|
||||
* Angular 14 and higher.
|
||||
*
|
||||
* TODO: FW-1641: Migrate once Angular 13 support is dropped.
|
||||
*
|
||||
* When we drop < Angular 14, we can replace the following code with:
|
||||
* ```ts
|
||||
const environmentInjector = resolverOrInjector ?? this.environmentInjector;
|
||||
cmpRef = this.activated = location.createComponent(component, {
|
||||
index: location.length,
|
||||
injector,
|
||||
environmentInjector,
|
||||
});
|
||||
* ```
|
||||
* where `this.environmentInjector` is a provider of `EnvironmentInjector` from @angular/core.
|
||||
*/
|
||||
const environmentInjector = resolverOrInjector ?? this.environmentInjector;
|
||||
cmpRef = this.activated = this.location.createComponent(component, {
|
||||
index: this.location.length,
|
||||
injector,
|
||||
environmentInjector,
|
||||
} as any);
|
||||
}
|
||||
cmpRef = this.activated = this.location.createComponent(component, {
|
||||
index: this.location.length,
|
||||
injector,
|
||||
environmentInjector: environmentInjector ?? this.environmentInjector,
|
||||
});
|
||||
|
||||
// Once the component is created we can push it to our local subject supplied to the proxy
|
||||
component$.next(cmpRef.instance);
|
||||
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { Component, ContentChild, EventEmitter, HostListener, Input, Output, ViewChild } from '@angular/core';
|
||||
import { Component, ContentChild, EventEmitter, HostListener, Output, ViewChild } from '@angular/core';
|
||||
|
||||
import { EnvironmentInjector } from '../../di/r3_injector';
|
||||
import { NavController } from '../../providers/nav-controller';
|
||||
import { IonTabBar } from '../proxies';
|
||||
|
||||
@ -11,12 +10,7 @@ import { StackEvent } from './stack-utils';
|
||||
selector: 'ion-tabs',
|
||||
template: ` <ng-content select="[slot=top]"></ng-content>
|
||||
<div class="tabs-inner">
|
||||
<ion-router-outlet
|
||||
#outlet
|
||||
tabs="true"
|
||||
[environmentInjector]="environmentInjector"
|
||||
(stackEvents)="onPageSelected($event)"
|
||||
></ion-router-outlet>
|
||||
<ion-router-outlet #outlet tabs="true" (stackEvents)="onPageSelected($event)"></ion-router-outlet>
|
||||
</div>
|
||||
<ng-content></ng-content>`,
|
||||
styles: [
|
||||
@ -52,16 +46,6 @@ export class IonTabs {
|
||||
@ViewChild('outlet', { read: IonRouterOutlet, static: false }) outlet: IonRouterOutlet;
|
||||
@ContentChild(IonTabBar, { static: false }) tabBar: IonTabBar | undefined;
|
||||
|
||||
/**
|
||||
* @experimental
|
||||
*
|
||||
* The `EnvironmentInjector` provider instance from the parent component.
|
||||
* Required for using standalone components with `ion-router-outlet`.
|
||||
*
|
||||
* Will be deprecated and removed when Angular 13 support is dropped.
|
||||
*/
|
||||
@Input() environmentInjector: EnvironmentInjector;
|
||||
|
||||
@Output() ionTabsWillChange = new EventEmitter<{ tab: string }>();
|
||||
@Output() ionTabsDidChange = new EventEmitter<{ tab: string }>();
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { ComponentFactoryResolver, ElementRef, Injector, ViewContainerRef, Directive } from '@angular/core';
|
||||
import { ElementRef, Injector, Directive, EnvironmentInjector } from '@angular/core';
|
||||
|
||||
import { AngularDelegate } from '../../providers/angular-delegate';
|
||||
import { ProxyCmp, proxyOutputs } from '../angular-component-lib/utils';
|
||||
@ -29,13 +29,12 @@ export class NavDelegate {
|
||||
protected el: HTMLElement;
|
||||
constructor(
|
||||
ref: ElementRef,
|
||||
resolver: ComponentFactoryResolver,
|
||||
environmentInjector: EnvironmentInjector,
|
||||
injector: Injector,
|
||||
angularDelegate: AngularDelegate,
|
||||
location: ViewContainerRef
|
||||
angularDelegate: AngularDelegate
|
||||
) {
|
||||
this.el = ref.nativeElement;
|
||||
ref.nativeElement.delegate = angularDelegate.create(resolver, injector, location);
|
||||
ref.nativeElement.delegate = angularDelegate.create(environmentInjector, injector);
|
||||
proxyOutputs(this, this.el, ['ionNavDidChange', 'ionNavWillChange']);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
import {
|
||||
ApplicationRef,
|
||||
ComponentFactoryResolver,
|
||||
NgZone,
|
||||
ViewContainerRef,
|
||||
Injectable,
|
||||
InjectionToken,
|
||||
Injector,
|
||||
EnvironmentInjector,
|
||||
inject,
|
||||
createComponent,
|
||||
InjectionToken,
|
||||
ComponentRef,
|
||||
} from '@angular/core';
|
||||
import {
|
||||
@ -17,27 +18,24 @@ import {
|
||||
LIFECYCLE_WILL_UNLOAD,
|
||||
} from '@ionic/core';
|
||||
|
||||
import { EnvironmentInjector } from '../di/r3_injector';
|
||||
import { NavParams } from '../directives/navigation/nav-params';
|
||||
import { isComponentFactoryResolver } from '../util/util';
|
||||
|
||||
// TODO(FW-2827): types
|
||||
|
||||
@Injectable()
|
||||
export class AngularDelegate {
|
||||
constructor(private zone: NgZone, private appRef: ApplicationRef) {}
|
||||
private zone = inject(NgZone);
|
||||
private applicationRef = inject(ApplicationRef);
|
||||
|
||||
create(
|
||||
resolverOrInjector: ComponentFactoryResolver,
|
||||
environmentInjector: EnvironmentInjector,
|
||||
injector: Injector,
|
||||
location?: ViewContainerRef,
|
||||
elementReferenceKey?: string
|
||||
): AngularFrameworkDelegate {
|
||||
return new AngularFrameworkDelegate(
|
||||
resolverOrInjector,
|
||||
environmentInjector,
|
||||
injector,
|
||||
location,
|
||||
this.appRef,
|
||||
this.applicationRef,
|
||||
this.zone,
|
||||
elementReferenceKey
|
||||
);
|
||||
@ -45,14 +43,13 @@ export class AngularDelegate {
|
||||
}
|
||||
|
||||
export class AngularFrameworkDelegate implements FrameworkDelegate {
|
||||
private elRefMap = new WeakMap<HTMLElement, any>();
|
||||
private elRefMap = new WeakMap<HTMLElement, ComponentRef<any>>();
|
||||
private elEventsMap = new WeakMap<HTMLElement, () => void>();
|
||||
|
||||
constructor(
|
||||
private resolverOrInjector: ComponentFactoryResolver | EnvironmentInjector,
|
||||
private environmentInjector: EnvironmentInjector,
|
||||
private injector: Injector,
|
||||
private location: ViewContainerRef | undefined,
|
||||
private appRef: ApplicationRef,
|
||||
private applicationRef: ApplicationRef,
|
||||
private zone: NgZone,
|
||||
private elementReferenceKey?: string
|
||||
) {}
|
||||
@ -78,10 +75,9 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
|
||||
|
||||
const el = attachView(
|
||||
this.zone,
|
||||
this.resolverOrInjector,
|
||||
this.environmentInjector,
|
||||
this.injector,
|
||||
this.location,
|
||||
this.appRef,
|
||||
this.applicationRef,
|
||||
this.elRefMap,
|
||||
this.elEventsMap,
|
||||
container,
|
||||
@ -115,40 +111,37 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
|
||||
|
||||
export const attachView = (
|
||||
zone: NgZone,
|
||||
resolverOrInjector: ComponentFactoryResolver | EnvironmentInjector,
|
||||
environmentInjector: EnvironmentInjector,
|
||||
injector: Injector,
|
||||
location: ViewContainerRef | undefined,
|
||||
appRef: ApplicationRef,
|
||||
elRefMap: WeakMap<HTMLElement, any>,
|
||||
applicationRef: ApplicationRef,
|
||||
elRefMap: WeakMap<HTMLElement, ComponentRef<any>>,
|
||||
elEventsMap: WeakMap<HTMLElement, () => void>,
|
||||
container: any,
|
||||
component: any,
|
||||
params: any,
|
||||
cssClasses: string[] | undefined
|
||||
): any => {
|
||||
let componentRef: ComponentRef<any>;
|
||||
/**
|
||||
* Wraps the injector with a custom injector that
|
||||
* provides NavParams to the component.
|
||||
*
|
||||
* NavParams is a legacy feature from Ionic v3 that allows
|
||||
* Angular developers to provide data to a component
|
||||
* and access it by providing NavParams as a dependency
|
||||
* in the constructor.
|
||||
*
|
||||
* The modern approach is to access the data directly
|
||||
* from the component's class instance.
|
||||
*/
|
||||
const childInjector = Injector.create({
|
||||
providers: getProviders(params),
|
||||
parent: injector,
|
||||
});
|
||||
|
||||
if (resolverOrInjector && isComponentFactoryResolver(resolverOrInjector)) {
|
||||
// Angular 13 and lower
|
||||
const factory = resolverOrInjector.resolveComponentFactory(component);
|
||||
componentRef = location
|
||||
? location.createComponent(factory, location.length, childInjector)
|
||||
: factory.create(childInjector);
|
||||
} else if (location) {
|
||||
// Angular 14
|
||||
const environmentInjector = resolverOrInjector;
|
||||
componentRef = location.createComponent(component, {
|
||||
index: location.indexOf,
|
||||
injector: childInjector,
|
||||
environmentInjector,
|
||||
} as any);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
const componentRef = createComponent<any>(component, {
|
||||
environmentInjector,
|
||||
elementInjector: childInjector,
|
||||
});
|
||||
|
||||
const instance = componentRef.instance;
|
||||
const hostElement = componentRef.location.nativeElement;
|
||||
@ -156,17 +149,15 @@ export const attachView = (
|
||||
Object.assign(instance, params);
|
||||
}
|
||||
if (cssClasses) {
|
||||
for (const clazz of cssClasses) {
|
||||
hostElement.classList.add(clazz);
|
||||
for (const cssClass of cssClasses) {
|
||||
hostElement.classList.add(cssClass);
|
||||
}
|
||||
}
|
||||
const unbindEvents = bindLifecycleEvents(zone, instance, hostElement);
|
||||
container.appendChild(hostElement);
|
||||
|
||||
if (!location) {
|
||||
appRef.attachView(componentRef.hostView);
|
||||
}
|
||||
componentRef.changeDetectorRef.reattach();
|
||||
applicationRef.attachView(componentRef.hostView);
|
||||
|
||||
elRefMap.set(hostElement, componentRef);
|
||||
elEventsMap.set(hostElement, unbindEvents);
|
||||
return hostElement;
|
||||
|
||||
@ -1,32 +1,24 @@
|
||||
import { ComponentFactoryResolver, Injector, Injectable, Optional } from '@angular/core';
|
||||
import { Injector, Injectable, EnvironmentInjector, inject } from '@angular/core';
|
||||
import { ModalOptions, modalController } from '@ionic/core';
|
||||
|
||||
import { EnvironmentInjector } from '../di/r3_injector';
|
||||
import { OverlayBaseController } from '../util/overlay';
|
||||
|
||||
import { AngularDelegate } from './angular-delegate';
|
||||
|
||||
@Injectable()
|
||||
export class ModalController extends OverlayBaseController<ModalOptions, HTMLIonModalElement> {
|
||||
constructor(
|
||||
private angularDelegate: AngularDelegate,
|
||||
private resolver: ComponentFactoryResolver,
|
||||
private injector: Injector,
|
||||
// TODO: FW-1641: Migrate to Angular's version once Angular 13 is dropped
|
||||
@Optional() private environmentInjector: EnvironmentInjector
|
||||
) {
|
||||
private angularDelegate = inject(AngularDelegate);
|
||||
private injector = inject(Injector);
|
||||
private environmentInjector = inject(EnvironmentInjector);
|
||||
|
||||
constructor() {
|
||||
super(modalController);
|
||||
}
|
||||
|
||||
create(opts: ModalOptions): Promise<HTMLIonModalElement> {
|
||||
return super.create({
|
||||
...opts,
|
||||
delegate: this.angularDelegate.create(
|
||||
this.resolver ?? this.environmentInjector,
|
||||
this.injector,
|
||||
undefined,
|
||||
'modal'
|
||||
),
|
||||
delegate: this.angularDelegate.create(this.environmentInjector, this.injector, 'modal'),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -262,10 +262,11 @@ const readQueryParam = (url: string, key: string) => {
|
||||
};
|
||||
|
||||
const proxyEvent = <T>(emitter: Subject<T>, el: EventTarget, eventName: string) => {
|
||||
if (el as any) {
|
||||
el.addEventListener(eventName, (ev: Event | undefined | null) => {
|
||||
if (el) {
|
||||
el.addEventListener(eventName, (ev) => {
|
||||
// ?? cordova might emit "null" events
|
||||
emitter.next(ev != null ? ((ev as any).detail as T) : undefined);
|
||||
const value = ev != null ? (ev as any).detail : undefined;
|
||||
emitter.next(value);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,32 +1,24 @@
|
||||
import { ComponentFactoryResolver, Injector, Injectable, Optional } from '@angular/core';
|
||||
import { Injector, Injectable, inject, EnvironmentInjector } from '@angular/core';
|
||||
import { PopoverOptions, popoverController } from '@ionic/core';
|
||||
|
||||
import { EnvironmentInjector } from '../di/r3_injector';
|
||||
import { OverlayBaseController } from '../util/overlay';
|
||||
|
||||
import { AngularDelegate } from './angular-delegate';
|
||||
|
||||
@Injectable()
|
||||
export class PopoverController extends OverlayBaseController<PopoverOptions, HTMLIonPopoverElement> {
|
||||
constructor(
|
||||
private angularDelegate: AngularDelegate,
|
||||
private resolver: ComponentFactoryResolver,
|
||||
private injector: Injector,
|
||||
// TODO: FW-1641: Migrate to Angular's version once Angular 13 is dropped
|
||||
@Optional() private environmentInjector: EnvironmentInjector
|
||||
) {
|
||||
private angularDelegate = inject(AngularDelegate);
|
||||
private injector = inject(Injector);
|
||||
private environmentInjector = inject(EnvironmentInjector);
|
||||
|
||||
constructor() {
|
||||
super(popoverController);
|
||||
}
|
||||
|
||||
create(opts: PopoverOptions): Promise<HTMLIonPopoverElement> {
|
||||
return super.create({
|
||||
...opts,
|
||||
delegate: this.angularDelegate.create(
|
||||
this.resolver ?? this.environmentInjector,
|
||||
this.injector,
|
||||
undefined,
|
||||
'popover'
|
||||
),
|
||||
delegate: this.angularDelegate.create(this.environmentInjector, this.injector, 'popover'),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -332,7 +332,7 @@ export function getFirstNgModuleName(source: ts.SourceFile): string | undefined
|
||||
// Then walk parent pointers up the AST, looking for the ClassDeclaration parent of the NgModule
|
||||
// metadata.
|
||||
const moduleClass = findClassDeclarationParent(ngModulesMetadata[0]);
|
||||
if (!moduleClass || !moduleClass.name) {
|
||||
if (!moduleClass?.name) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
import { ComponentFactoryResolver } from '@angular/core';
|
||||
|
||||
declare const __zone_symbol__requestAnimationFrame: any;
|
||||
declare const requestAnimationFrame: any;
|
||||
|
||||
@ -12,7 +10,3 @@ export const raf = (h: any): any => {
|
||||
}
|
||||
return setTimeout(h);
|
||||
};
|
||||
|
||||
export const isComponentFactoryResolver = (item: any): item is ComponentFactoryResolver => {
|
||||
return !!item.resolveComponentFactory;
|
||||
};
|
||||
|
||||
34763
angular/test/apps/ng12/package-lock.json
generated
34763
angular/test/apps/ng12/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,68 +0,0 @@
|
||||
{
|
||||
"name": "ionic-angular-test-app",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"sync:build": "sh scripts/build-ionic.sh",
|
||||
"sync": "sh scripts/sync.sh",
|
||||
"build": "ng build --configuration production --no-progress",
|
||||
"lint": "ng lint",
|
||||
"postinstall": "ngcc",
|
||||
"serve:ssr": "node dist/test-app/server/main.js",
|
||||
"build:ssr": "ng build --prod && ng run test-app:server:production",
|
||||
"dev:ssr": "ng run test-app:serve-ssr",
|
||||
"prerender": "ng run test-app:prerender",
|
||||
"cy.open": "cypress open",
|
||||
"cy.run": "cypress run",
|
||||
"test": "concurrently \"npm run start -- --configuration production\" \"wait-on http-get://localhost:4200 && npm run cy.run\" --kill-others --success first",
|
||||
"test.watch": "concurrently \"npm run start\" \"wait-on http-get://localhost:4200 && npm run cy.open\" --kill-others --success first"
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/animations": "^12.2.16",
|
||||
"@angular/common": "^12.2.16",
|
||||
"@angular/compiler": "^12.2.16",
|
||||
"@angular/core": "^12.2.16",
|
||||
"@angular/forms": "^12.2.16",
|
||||
"@angular/platform-browser": "^12.2.16",
|
||||
"@angular/platform-browser-dynamic": "^12.2.16",
|
||||
"@angular/platform-server": "^12.2.16",
|
||||
"@angular/router": "^12.2.16",
|
||||
"@ionic/angular": "^6.1.15",
|
||||
"@ionic/angular-server": "^6.1.15",
|
||||
"@nguniversal/express-engine": "^12.1.3",
|
||||
"core-js": "^2.6.11",
|
||||
"express": "^4.15.2",
|
||||
"ionicons": "^6.0.4",
|
||||
"rxjs": "^6.5.5",
|
||||
"tslib": "^2.0.0",
|
||||
"typescript-eslint-language-service": "^4.1.5",
|
||||
"zone.js": "^0.11.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^12.2.18",
|
||||
"@angular-eslint/builder": "^12.7.0",
|
||||
"@angular-eslint/eslint-plugin": "^12.7.0",
|
||||
"@angular-eslint/eslint-plugin-template": "^12.7.0",
|
||||
"@angular-eslint/schematics": "^12.7.0",
|
||||
"@angular-eslint/template-parser": "^12.7.0",
|
||||
"@angular/cli": "^12.2.16",
|
||||
"@angular/compiler-cli": "^12.2.16",
|
||||
"@angular/language-service": "^12.2.16",
|
||||
"@nguniversal/builders": "^12.1.3",
|
||||
"@types/express": "^4.17.7",
|
||||
"@types/node": "^12.12.54",
|
||||
"@typescript-eslint/eslint-plugin": "4.28.2",
|
||||
"@typescript-eslint/parser": "4.28.2",
|
||||
"concurrently": "^6.0.0",
|
||||
"cypress": "^10.2.0",
|
||||
"eslint": "^7.26.0",
|
||||
"ts-loader": "^6.2.2",
|
||||
"ts-node": "^8.3.0",
|
||||
"typescript": "~4.3.5",
|
||||
"wait-on": "^5.2.1",
|
||||
"webpack": "^5.61.0",
|
||||
"webpack-cli": "^4.9.2"
|
||||
}
|
||||
}
|
||||
@ -1,51 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector: 'app-form',
|
||||
templateUrl: './form.component.html',
|
||||
})
|
||||
export class FormComponent {
|
||||
|
||||
submitted = 'false';
|
||||
profileForm: FormGroup;
|
||||
outsideToggle = new FormControl(true);
|
||||
|
||||
constructor(fb: FormBuilder) {
|
||||
this.profileForm = fb.group({
|
||||
datetime: ['2010-08-20', Validators.required],
|
||||
select: [undefined, Validators.required],
|
||||
toggle: [false],
|
||||
input: ['', Validators.required],
|
||||
input2: ['Default Value'],
|
||||
checkbox: [false],
|
||||
}, {
|
||||
updateOn: typeof (window as any) !== 'undefined' && window.location.hash === '#blur' ? 'blur' : 'change'
|
||||
});
|
||||
}
|
||||
|
||||
setTouched() {
|
||||
const formControl = this.profileForm.get('input');
|
||||
formControl.markAsTouched();
|
||||
}
|
||||
|
||||
onSubmit() {
|
||||
this.submitted = 'true';
|
||||
}
|
||||
|
||||
setValues() {
|
||||
this.profileForm.patchValue({
|
||||
datetime: '2010-08-20',
|
||||
select: 'nes',
|
||||
toggle: true,
|
||||
input: 'Some value',
|
||||
input2: 'Another values',
|
||||
checkbox: true
|
||||
});
|
||||
}
|
||||
|
||||
markAllAsTouched() {
|
||||
this.profileForm.markAllAsTouched();
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,74 +0,0 @@
|
||||
import { Component, Input, NgZone, OnInit, Optional } from '@angular/core';
|
||||
import { FormControl, FormGroup } from '@angular/forms';
|
||||
import { ModalController, NavParams, IonNav, ViewWillLeave, ViewDidEnter, ViewDidLeave } from '@ionic/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'app-modal-example',
|
||||
templateUrl: './modal-example.component.html',
|
||||
})
|
||||
export class ModalExampleComponent implements OnInit, ViewWillLeave, ViewDidEnter, ViewWillLeave, ViewDidLeave {
|
||||
|
||||
@Input() value: string;
|
||||
|
||||
form = new FormGroup({
|
||||
select: new FormControl([])
|
||||
});
|
||||
|
||||
valueFromParams: string;
|
||||
onInit = 0;
|
||||
willEnter = 0;
|
||||
didEnter = 0;
|
||||
willLeave = 0;
|
||||
didLeave = 0;
|
||||
|
||||
modal: HTMLElement;
|
||||
|
||||
constructor(
|
||||
private modalCtrl: ModalController,
|
||||
@Optional() public nav: IonNav,
|
||||
navParams: NavParams
|
||||
) {
|
||||
this.valueFromParams = navParams.get('prop');
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
NgZone.assertInAngularZone();
|
||||
this.onInit++;
|
||||
}
|
||||
|
||||
setSelect(value: null | undefined) {
|
||||
this.form.get('select').setValue(value);
|
||||
}
|
||||
|
||||
ionViewWillEnter() {
|
||||
if (this.onInit !== 1) {
|
||||
throw new Error('ngOnInit was not called');
|
||||
}
|
||||
NgZone.assertInAngularZone();
|
||||
this.willEnter++;
|
||||
}
|
||||
ionViewDidEnter() {
|
||||
NgZone.assertInAngularZone();
|
||||
this.didEnter++;
|
||||
}
|
||||
ionViewWillLeave() {
|
||||
NgZone.assertInAngularZone();
|
||||
this.willLeave++;
|
||||
}
|
||||
ionViewDidLeave() {
|
||||
NgZone.assertInAngularZone();
|
||||
this.didLeave++;
|
||||
}
|
||||
closeModal() {
|
||||
this.modalCtrl.dismiss();
|
||||
}
|
||||
|
||||
push() {
|
||||
this.nav.push(ModalExampleComponent, {
|
||||
'value': 'pushed!'
|
||||
});
|
||||
}
|
||||
pop() {
|
||||
this.nav.pop();
|
||||
}
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"importHelpers": true,
|
||||
"outDir": "./dist/out-tsc",
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"moduleResolution": "node",
|
||||
"module": "es2020",
|
||||
"target": "es2015",
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"typeRoots": [
|
||||
"node_modules/@types"
|
||||
],
|
||||
"lib": [
|
||||
"es2018",
|
||||
"dom"
|
||||
],
|
||||
"plugins": [
|
||||
{
|
||||
"name": "typescript-eslint-language-service"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
28298
angular/test/apps/ng13/package-lock.json
generated
28298
angular/test/apps/ng13/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,68 +0,0 @@
|
||||
{
|
||||
"name": "ionic-angular-test-app",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"sync:build": "sh scripts/build-ionic.sh",
|
||||
"sync": "sh scripts/sync.sh",
|
||||
"build": "ng build --configuration production --no-progress",
|
||||
"lint": "ng lint",
|
||||
"postinstall": "ngcc",
|
||||
"serve:ssr": "node dist/test-app/server/main.js",
|
||||
"build:ssr": "ng build --prod && ng run test-app:server:production",
|
||||
"dev:ssr": "ng run test-app:serve-ssr",
|
||||
"prerender": "ng run test-app:prerender",
|
||||
"cy.open": "cypress open",
|
||||
"cy.run": "cypress run",
|
||||
"test": "concurrently \"npm run start -- --configuration production\" \"wait-on http-get://localhost:4200 && npm run cy.run\" --kill-others --success first",
|
||||
"test.watch": "concurrently \"npm run start\" \"wait-on http-get://localhost:4200 && npm run cy.open\" --kill-others --success first"
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/animations": "^13.1.3",
|
||||
"@angular/common": "^13.1.3",
|
||||
"@angular/compiler": "^13.1.3",
|
||||
"@angular/core": "^13.1.3",
|
||||
"@angular/forms": "^13.1.3",
|
||||
"@angular/platform-browser": "^13.1.3",
|
||||
"@angular/platform-browser-dynamic": "^13.1.3",
|
||||
"@angular/platform-server": "^13.1.3",
|
||||
"@angular/router": "^13.1.3",
|
||||
"@ionic/angular": "^6.1.15",
|
||||
"@ionic/angular-server": "^6.1.15",
|
||||
"@nguniversal/express-engine": "^13.1.1",
|
||||
"core-js": "^2.6.11",
|
||||
"express": "^4.15.2",
|
||||
"ionicons": "^6.0.4",
|
||||
"rxjs": "^6.5.5",
|
||||
"tslib": "^2.0.0",
|
||||
"typescript-eslint-language-service": "^4.1.5",
|
||||
"zone.js": "^0.11.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^13.1.4",
|
||||
"@angular-eslint/builder": "13.0.1",
|
||||
"@angular-eslint/eslint-plugin": "13.0.1",
|
||||
"@angular-eslint/eslint-plugin-template": "13.0.1",
|
||||
"@angular-eslint/schematics": "13.0.1",
|
||||
"@angular-eslint/template-parser": "13.0.1",
|
||||
"@angular/cli": "^13.1.4",
|
||||
"@angular/compiler-cli": "^13.1.3",
|
||||
"@angular/language-service": "^13.1.3",
|
||||
"@nguniversal/builders": "^13.0.2",
|
||||
"@types/express": "^4.17.7",
|
||||
"@types/node": "^12.12.54",
|
||||
"@typescript-eslint/eslint-plugin": "4.28.2",
|
||||
"@typescript-eslint/parser": "4.28.2",
|
||||
"concurrently": "^6.0.0",
|
||||
"cypress": "^10.2.0",
|
||||
"eslint": "^7.26.0",
|
||||
"ts-loader": "^6.2.2",
|
||||
"ts-node": "^8.3.0",
|
||||
"typescript": "~4.6.0",
|
||||
"wait-on": "^5.2.1",
|
||||
"webpack": "^5.61.0",
|
||||
"webpack-cli": "^4.9.2"
|
||||
}
|
||||
}
|
||||
@ -1,51 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector: 'app-form',
|
||||
templateUrl: './form.component.html',
|
||||
})
|
||||
export class FormComponent {
|
||||
|
||||
submitted = 'false';
|
||||
profileForm: FormGroup;
|
||||
outsideToggle = new FormControl(true);
|
||||
|
||||
constructor(fb: FormBuilder) {
|
||||
this.profileForm = fb.group({
|
||||
datetime: ['2010-08-20', Validators.required],
|
||||
select: [undefined, Validators.required],
|
||||
toggle: [false],
|
||||
input: ['', Validators.required],
|
||||
input2: ['Default Value'],
|
||||
checkbox: [false],
|
||||
}, {
|
||||
updateOn: typeof (window as any) !== 'undefined' && window.location.hash === '#blur' ? 'blur' : 'change'
|
||||
});
|
||||
}
|
||||
|
||||
setTouched() {
|
||||
const formControl = this.profileForm.get('input');
|
||||
formControl.markAsTouched();
|
||||
}
|
||||
|
||||
onSubmit() {
|
||||
this.submitted = 'true';
|
||||
}
|
||||
|
||||
setValues() {
|
||||
this.profileForm.patchValue({
|
||||
datetime: '2010-08-20',
|
||||
select: 'nes',
|
||||
toggle: true,
|
||||
input: 'Some value',
|
||||
input2: 'Another values',
|
||||
checkbox: true
|
||||
});
|
||||
}
|
||||
|
||||
markAllAsTouched() {
|
||||
this.profileForm.markAllAsTouched();
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,74 +0,0 @@
|
||||
import { Component, Input, NgZone, OnInit, Optional } from '@angular/core';
|
||||
import { FormControl, FormGroup } from '@angular/forms';
|
||||
import { ModalController, NavParams, IonNav, ViewWillLeave, ViewDidEnter, ViewDidLeave } from '@ionic/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'app-modal-example',
|
||||
templateUrl: './modal-example.component.html',
|
||||
})
|
||||
export class ModalExampleComponent implements OnInit, ViewWillLeave, ViewDidEnter, ViewWillLeave, ViewDidLeave {
|
||||
|
||||
@Input() value: string;
|
||||
|
||||
form = new FormGroup({
|
||||
select: new FormControl([])
|
||||
});
|
||||
|
||||
valueFromParams: string;
|
||||
onInit = 0;
|
||||
willEnter = 0;
|
||||
didEnter = 0;
|
||||
willLeave = 0;
|
||||
didLeave = 0;
|
||||
|
||||
modal: HTMLElement;
|
||||
|
||||
constructor(
|
||||
private modalCtrl: ModalController,
|
||||
@Optional() public nav: IonNav,
|
||||
navParams: NavParams
|
||||
) {
|
||||
this.valueFromParams = navParams.get('prop');
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
NgZone.assertInAngularZone();
|
||||
this.onInit++;
|
||||
}
|
||||
|
||||
setSelect(value: null | undefined) {
|
||||
this.form.get('select').setValue(value);
|
||||
}
|
||||
|
||||
ionViewWillEnter() {
|
||||
if (this.onInit !== 1) {
|
||||
throw new Error('ngOnInit was not called');
|
||||
}
|
||||
NgZone.assertInAngularZone();
|
||||
this.willEnter++;
|
||||
}
|
||||
ionViewDidEnter() {
|
||||
NgZone.assertInAngularZone();
|
||||
this.didEnter++;
|
||||
}
|
||||
ionViewWillLeave() {
|
||||
NgZone.assertInAngularZone();
|
||||
this.willLeave++;
|
||||
}
|
||||
ionViewDidLeave() {
|
||||
NgZone.assertInAngularZone();
|
||||
this.didLeave++;
|
||||
}
|
||||
closeModal() {
|
||||
this.modalCtrl.dismiss();
|
||||
}
|
||||
|
||||
push() {
|
||||
this.nav.push(ModalExampleComponent, {
|
||||
'value': 'pushed!'
|
||||
});
|
||||
}
|
||||
pop() {
|
||||
this.nav.pop();
|
||||
}
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"importHelpers": true,
|
||||
"outDir": "./dist/out-tsc",
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"moduleResolution": "node",
|
||||
"module": "es2020",
|
||||
"target": "es2015",
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"typeRoots": [
|
||||
"node_modules/@types"
|
||||
],
|
||||
"lib": [
|
||||
"es2018",
|
||||
"dom"
|
||||
],
|
||||
"plugins": [
|
||||
{
|
||||
"name": "typescript-eslint-language-service"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
0
angular/test/apps/ng14/e2e/src/.gitkeep
Normal file
0
angular/test/apps/ng14/e2e/src/.gitkeep
Normal file
2220
angular/test/apps/ng14/package-lock.json
generated
2220
angular/test/apps/ng14/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -31,12 +31,11 @@
|
||||
"@angular/router": "^14.1.0",
|
||||
"@ionic/angular": "^6.1.15",
|
||||
"@ionic/angular-server": "^6.1.15",
|
||||
"angular-in-memory-web-api": "^0.11.0",
|
||||
"core-js": "^2.6.11",
|
||||
"express": "^4.15.2",
|
||||
"ionicons": "^6.0.4",
|
||||
"rxjs": "^6.5.5",
|
||||
"tslib": "^2.0.0",
|
||||
"rxjs": "~7.5.0",
|
||||
"tslib": "^2.3.0",
|
||||
"typescript-eslint-language-service": "^4.1.5",
|
||||
"zone.js": "^0.11.4"
|
||||
},
|
||||
@ -53,8 +52,8 @@
|
||||
"@nguniversal/builders": "^14.0.3",
|
||||
"@types/express": "^4.17.7",
|
||||
"@types/node": "^12.12.54",
|
||||
"@typescript-eslint/eslint-plugin": "4.28.2",
|
||||
"@typescript-eslint/parser": "4.28.2",
|
||||
"@typescript-eslint/eslint-plugin": "^5.0.0",
|
||||
"@typescript-eslint/parser": "^5.0.0",
|
||||
"concurrently": "^6.0.0",
|
||||
"cypress": "^10.2.0",
|
||||
"eslint": "^7.26.0",
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
<ion-app>
|
||||
<ion-router-outlet [environmentInjector]="environmentInjector"></ion-router-outlet>
|
||||
<ion-router-outlet></ion-router-outlet>
|
||||
</ion-app>
|
||||
|
||||
@ -1,11 +1,8 @@
|
||||
import { Component, EnvironmentInjector } from '@angular/core';
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css']
|
||||
})
|
||||
export class AppComponent {
|
||||
|
||||
constructor(public environmentInjector: EnvironmentInjector) { }
|
||||
}
|
||||
export class AppComponent { }
|
||||
|
||||
@ -3,12 +3,7 @@ import { RouterModule } from "@angular/router";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forChild([
|
||||
{
|
||||
path: 'standalone',
|
||||
loadComponent: () => import('./standalone/standalone.component').then(m => m.StandaloneComponent)
|
||||
}
|
||||
])
|
||||
RouterModule.forChild([])
|
||||
],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
|
||||
0
angular/test/apps/ng15/e2e/src/.gitkeep
Normal file
0
angular/test/apps/ng15/e2e/src/.gitkeep
Normal file
@ -1,9 +0,0 @@
|
||||
describe('Routing with Standalone Components', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/version-test/standalone');
|
||||
});
|
||||
|
||||
it('should render the component', () => {
|
||||
cy.get('ion-content').contains('This is a standalone component rendered from a route.');
|
||||
});
|
||||
});
|
||||
1649
angular/test/apps/ng15/package-lock.json
generated
1649
angular/test/apps/ng15/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -42,15 +42,15 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^15.0.0",
|
||||
"@angular-eslint/builder": "^15.0.0-alpha.0",
|
||||
"@angular-eslint/eslint-plugin": "^15.0.0-alpha.0",
|
||||
"@angular-eslint/eslint-plugin-template": "^15.0.0-alpha.0",
|
||||
"@angular-eslint/schematics": "^15.0.0-alpha.0",
|
||||
"@angular-eslint/template-parser": "^15.0.0-alpha.0",
|
||||
"@angular-eslint/builder": "^15.0.0",
|
||||
"@angular-eslint/eslint-plugin": "^15.0.0",
|
||||
"@angular-eslint/eslint-plugin-template": "^15.0.0",
|
||||
"@angular-eslint/schematics": "^15.0.0",
|
||||
"@angular-eslint/template-parser": "^15.0.0",
|
||||
"@angular/cli": "^15.0.0",
|
||||
"@angular/compiler-cli": "^15.0.0",
|
||||
"@angular/language-service": "^15.0.0",
|
||||
"@nguniversal/builders": "^15.0.0-next.0",
|
||||
"@nguniversal/builders": "^15.0.0",
|
||||
"@types/express": "^4.17.7",
|
||||
"@types/node": "^12.12.54",
|
||||
"@typescript-eslint/eslint-plugin": "4.28.2",
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
<ion-app>
|
||||
<ion-router-outlet [environmentInjector]="environmentInjector"></ion-router-outlet>
|
||||
<ion-router-outlet></ion-router-outlet>
|
||||
</ion-app>
|
||||
|
||||
@ -1,11 +1,8 @@
|
||||
import { Component, EnvironmentInjector } from '@angular/core';
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css']
|
||||
})
|
||||
export class AppComponent {
|
||||
|
||||
constructor(public environmentInjector: EnvironmentInjector) { }
|
||||
}
|
||||
export class AppComponent { }
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
<ion-content>
|
||||
<p>This is a standalone component rendered from a route.</p>
|
||||
<ion-button routerLink="/">Return home</ion-button>
|
||||
</ion-content>
|
||||
@ -1,12 +0,0 @@
|
||||
import { Component } from "@angular/core";
|
||||
import { RouterModule } from "@angular/router";
|
||||
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'app-standalone',
|
||||
templateUrl: './standalone.component.html',
|
||||
standalone: true,
|
||||
imports: [IonicModule, RouterModule]
|
||||
})
|
||||
export class StandaloneComponent { }
|
||||
@ -3,12 +3,7 @@ import { RouterModule } from "@angular/router";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forChild([
|
||||
{
|
||||
path: 'standalone',
|
||||
loadComponent: () => import('./standalone/standalone.component').then(m => m.StandaloneComponent)
|
||||
}
|
||||
])
|
||||
RouterModule.forChild([])
|
||||
],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
|
||||
@ -34,7 +34,16 @@
|
||||
}
|
||||
],
|
||||
"styles": [
|
||||
"src/styles.css"
|
||||
"src/styles.css",
|
||||
"node_modules/@ionic/angular/css/core.css",
|
||||
"node_modules/@ionic/angular/css/normalize.css",
|
||||
"node_modules/@ionic/angular/css/structure.css",
|
||||
"node_modules/@ionic/angular/css/typography.css",
|
||||
"node_modules/@ionic/angular/css/padding.css",
|
||||
"node_modules/@ionic/angular/css/float-elements.css",
|
||||
"node_modules/@ionic/angular/css/text-alignment.css",
|
||||
"node_modules/@ionic/angular/css/text-transformation.css",
|
||||
"node_modules/@ionic/angular/css/flex-utils.css"
|
||||
],
|
||||
"scripts": []
|
||||
},
|
||||
@ -89,10 +98,7 @@
|
||||
"lint": {
|
||||
"builder": "@angular-eslint/builder:lint",
|
||||
"options": {
|
||||
"lintFilePatterns": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.html"
|
||||
]
|
||||
"lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
|
||||
}
|
||||
},
|
||||
"server": {
|
||||
@ -141,8 +147,6 @@
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"schematicCollections": [
|
||||
"@angular-eslint/schematics"
|
||||
]
|
||||
"schematicCollections": ["@angular-eslint/schematics"]
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
describe('Routing with Standalone Components', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/version-test/standalone');
|
||||
cy.visit('/standalone');
|
||||
});
|
||||
|
||||
it('should render the component', () => {
|
||||
@ -13,3 +13,6 @@ npm pack ../../../../packages/angular-server/dist
|
||||
|
||||
# Install Dependencies
|
||||
npm install *.tgz --no-save
|
||||
|
||||
# Delete Angular cache directory
|
||||
rm -rf .angular/
|
||||
|
||||
@ -39,6 +39,7 @@ const routes: Routes = [
|
||||
{ path: 'router-link-page', component: RouterLinkPageComponent },
|
||||
{ path: 'router-link-page2/:id', component: RouterLinkPage2Component },
|
||||
{ path: 'router-link-page3', component: RouterLinkPage3Component },
|
||||
{ path: 'standalone', loadComponent: () => import('./standalone/standalone.component').then(c => c.StandaloneComponent) },
|
||||
{ path: 'tabs', redirectTo: '/tabs/account', pathMatch: 'full' },
|
||||
{
|
||||
path: 'navigation',
|
||||
|
||||
@ -1,14 +0,0 @@
|
||||
/* Core CSS required for Ionic components to work properly */
|
||||
@import "~@ionic/angular/css/core.css";
|
||||
|
||||
/* Basic CSS for apps built with Ionic */
|
||||
@import "~@ionic/angular/css/normalize.css";
|
||||
@import "~@ionic/angular/css/structure.css";
|
||||
@import "~@ionic/angular/css/typography.css";
|
||||
|
||||
/* Optional CSS utils that can be commented out */
|
||||
@import "~@ionic/angular/css/padding.css";
|
||||
@import "~@ionic/angular/css/float-elements.css";
|
||||
@import "~@ionic/angular/css/text-alignment.css";
|
||||
@import "~@ionic/angular/css/text-transformation.css";
|
||||
@import "~@ionic/angular/css/flex-utils.css";
|
||||
|
||||
7
packages/angular-server/ng-package.json
Normal file
7
packages/angular-server/ng-package.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
|
||||
"lib": {
|
||||
"entryFile": "src/public_api.ts"
|
||||
},
|
||||
"allowedNonPeerDependencies": ["@ionic/core"]
|
||||
}
|
||||
5374
packages/angular-server/package-lock.json
generated
5374
packages/angular-server/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -25,7 +25,7 @@
|
||||
"homepage": "https://ionicframework.com/",
|
||||
"scripts": {
|
||||
"test": "echo 'angular no tests yet'",
|
||||
"build": "ng-packagr -p package.json -c tsconfig.json",
|
||||
"build": "ng-packagr -p ng-package.json -c tsconfig.json",
|
||||
"build.prod": "npm run clean && npm run build",
|
||||
"clean": "rm -rf ./dist",
|
||||
"lint": "eslint . --ext .ts && npm run prettier",
|
||||
@ -33,39 +33,31 @@
|
||||
"prettier": "prettier \"**/*.ts\" --check",
|
||||
"prettier.fix": "prettier \"**/*.ts\" --write"
|
||||
},
|
||||
"ngPackage": {
|
||||
"lib": {
|
||||
"entryFile": "src/public_api.ts"
|
||||
},
|
||||
"allowedNonPeerDependencies": [
|
||||
"@ionic/core"
|
||||
]
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/core": ">=12.0.0",
|
||||
"@angular/platform-server": ">=12.0.0",
|
||||
"rxjs": ">=6.6.0",
|
||||
"@angular/core": ">=14.0.0",
|
||||
"@angular/platform-server": ">=14.0.0",
|
||||
"rxjs": ">=7.5.0",
|
||||
"zone.js": ">=0.11.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-eslint/eslint-plugin": "^12.6.1",
|
||||
"@angular/animations": "^12.0.0",
|
||||
"@angular/common": "^12.0.0",
|
||||
"@angular/compiler": "^12.0.0",
|
||||
"@angular/compiler-cli": "^12.0.0",
|
||||
"@angular/core": "^12.0.0",
|
||||
"@angular/platform-browser": "^12.0.0",
|
||||
"@angular/platform-browser-dynamic": "^12.2.10",
|
||||
"@angular/platform-server": "^12.0.0",
|
||||
"@angular-eslint/eslint-plugin": "^14.0.0",
|
||||
"@angular/animations": "^14.0.0",
|
||||
"@angular/common": "^14.0.0",
|
||||
"@angular/compiler": "^14.0.0",
|
||||
"@angular/compiler-cli": "^14.0.0",
|
||||
"@angular/core": "^14.0.0",
|
||||
"@angular/platform-browser": "^14.0.0",
|
||||
"@angular/platform-browser-dynamic": "^14.0.0",
|
||||
"@angular/platform-server": "^14.0.0",
|
||||
"@ionic/eslint-config": "^0.3.0",
|
||||
"@ionic/prettier-config": "^2.0.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.2.0",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-import": "^2.25.2",
|
||||
"ng-packagr": "^12.0.0",
|
||||
"ng-packagr": "^14.0.0",
|
||||
"prettier": "^2.4.1",
|
||||
"rxjs": "^7.8.0",
|
||||
"typescript": "4.2.4"
|
||||
"typescript": "~4.7.2"
|
||||
},
|
||||
"prettier": "@ionic/prettier-config",
|
||||
"dependencies": {
|
||||
|
||||
Reference in New Issue
Block a user