mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +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
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";
|
||||
|
||||
Reference in New Issue
Block a user