Prerequisites

• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Codemod version

No response

Current Behavior

No response

Expected Behavior

No response

Steps to Reproduce

No response

Code Reproduction URL

No response

Additional Information

No response

Prerequisites

• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Describe the Feature Request

I would be nice to be able to use this code mod inside an Nx mono repo. Or maybe I do not get how to execute it properly.

Describe the Use Case

Running the method in an app inside the apps folder should update the dependency imports.

Prerequisites

• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Codemod version

N/A

Current Behavior

The HomePage component in the Ionic starters blank project is not migrated to the new import syntax. It does not appear to detect that the component should be migrated and/or is not parsing the home.page.html template correctly.

Expected Behavior

Any @Component decorated class that is from @angular/core should be migrated.

Steps to Reproduce

No response

Code Reproduction URL

No response

Additional Information

No response

Prerequisites

• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Codemod version

0.0.7

Current Behavior

It does not appears that a single file has been migrated correctly.

No modules are removed.
standalone: true is not added
IonicModule is correctly replaced by IonToolbar, IonHeader, IonContent etc

I get warnings about the fact that dynamic ion-icon names couldn't be migrated.

The terminal logs that the project migration is successful whereas it's not.

Expected Behavior

Modules should be removed, standalone: true should be added to components, there should be no error about dynamic ion-icon names and the tool should not says that the migration is successful if it's not.

Steps to Reproduce

I just used the command: npx @ionic/angular-standalone-codemods at the root of my Ionic project.

I can't share it since it's a private project.

Code Reproduction URL

No response

Additional Information

No response

Prerequisites

• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Codemod version

v0.0.5

Current Behavior

not target and migrate

Expected Behavior

target and migrate

Steps to Reproduce

prepare app.config.ts

Code Reproduction URL

No response

Additional Information

Ionic default template is on main.ts. but angular-cli template split main.ts and app.config.ts:

• https://github.com/angular/angular-cli/blob/main/packages/schematics/angular/application/files/standalone-files/src/main.ts.template
• https://github.com/angular/angular-cli/blob/main/packages/schematics/angular/application/files/standalone-files/src/app/app.config.ts.template
  So will need to look at both of these files.

Prerequisites

• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Codemod version

0.3.0

Current Behavior

I run npx @ionic/angular-standalone-codemods.

I'm prompted with the dry run option.

Regardless of the option I select I get the following error afterwards.

DirectoryNotFoundError: Directory not found: /xxxxxxxxxxx/.vscode/typings
    at RealFileSystemHost.getDirectoryNotFoundErrorIfNecessary (/Users/jamesonparker/.npm/_npx/ff04957b6f1fa49f/node_modules/@ts-morph/common/dist/ts-morph-common.js:1965:50)
    at RealFileSystemHost.readDirSync (/Users/jamesonparker/.npm/_npx/ff04957b6f1fa49f/node_modules/@ts-morph/common/dist/ts-morph-common.js:1874:24)
    at TransactionalFileSystem.readDirSync (/Users/jamesonparker/.npm/_npx/ff04957b6f1fa49f/node_modules/@ts-morph/common/dist/ts-morph-common.js:2501:55)
    at FileUtils.getDescendantDirectories (/Users/jamesonparker/.npm/_npx/ff04957b6f1fa49f/node_modules/@ts-morph/common/dist/ts-morph-common.js:1547:47)
    at getDescendantDirectories.next (<anonymous>)
    at FileUtils.getDescendantDirectories (/Users/jamesonparker/.npm/_npx/ff04957b6f1fa49f/node_modules/@ts-morph/common/dist/ts-morph-common.js:1551:30)
    at getDescendantDirectories.next (<anonymous>)
    at FileUtils.getDescendantDirectories (/Users/jamesonparker/.npm/_npx/ff04957b6f1fa49f/node_modules/@ts-morph/common/dist/ts-morph-common.js:1551:30)
    at getDescendantDirectories.next (<anonymous>)
    at DirectoryCoordinator.addDirectoryAtPathIfExists (/Users/jamesonparker/.npm/_npx/ff04957b6f1fa49f/node_modules/ts-morph/dist/ts-morph.js:18826:24) {
  path: '/xxxxxxxxxxx/.vscode/typings',
  code: 'ENOENT'

I have checked the .vscode directory and I only have a .launch file in there. So I'm not sure if I'm missing something or what.

Expected Behavior

I would expect the migration process to run

Steps to Reproduce

1. npx @ionic/angular-standalone-codemods
2. Select either option for Dry Run
3. Error shows up

Code Reproduction URL

No response

Additional Information

If I create the missing typings directory it then references a cordova-ionic directory and then plugins.

This is my package.json file.

  "dependencies": {
    "@angular/animations": "^17.1.0",
    "@angular/common": "^17.1.0",
    "@angular/core": "^17.1.0",
    "@angular/forms": "^17.1.0",
    "@angular/platform-browser": "^17.1.0",
    "@angular/platform-browser-dynamic": "^17.1.0",
    "@angular/router": "^17.1.0",
    "@capacitor-community/apple-sign-in": "5.0.0",
    "@capacitor-community/facebook-login": "^5.0.0",
    "@capacitor-community/firebase-analytics": "^5.0.1",
    "@capacitor/android": "5.7.0",
    "@capacitor/app": "^5.0.6",
    "@capacitor/browser": "^5.0.6",
    "@capacitor/camera": "^5.0.8",
    "@capacitor/core": "^5.7.0",
    "@capacitor/device": "^5.0.6",
    "@capacitor/haptics": "^5.0.6",
    "@capacitor/ios": "5.7.0",
    "@capacitor/keyboard": "^5.0.6",
    "@capacitor/local-notifications": "^5.0.6",
    "@capacitor/preferences": "^5.0.6",
    "@capacitor/splash-screen": "^5.0.6",
    "@capacitor/status-bar": "5.0.6",
    "@capgo/camera-preview": "^6.0.6",
    "@ionic/angular": "^7.7.1",
    "@ionic/core": "^7.7.1",
    "@maskito/angular": "^1.7.0",
    "@maskito/core": "^1.7.0",
    "@maskito/kit": "^1.7.0",
    "@types/jquery": "^3.5.16",
    "badwords-list": "^1.0.0",
    "capacitor-rate-app": "4.0.3",
    "cordova-plugin-purchase": "^13.5.0",
    "kc-capacitor-image-utils": "file:../kc-capacitor-image-utils",
    "ngx-ui-tour-ionic": "^3.0.0",
    "onesignal-cordova-plugin": "^3.3.0",
    "rxjs": "^7.5.0",
    "smoothscroll-polyfill": "^0.4.4",
    "swiper": "^8.4.5",
    "tslib": "^2.3.0",
    "zone.js": "^0.14.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.0.0",
    "@angular-eslint/builder": "^17.0.0",
    "@angular-eslint/eslint-plugin": "^17.0.0",
    "@angular-eslint/eslint-plugin-template": "^17.0.0",
    "@angular-eslint/schematics": "^17.0.0",
    "@angular-eslint/template-parser": "^17.0.0",
    "@angular/cli": "^17.0.0",
    "@angular/compiler-cli": "^17.0.2",
    "@angular/language-service": "^17.0.2",
    "@capacitor/cli": "5.7.0",
    "@ionic/angular-toolkit": "11.0.1",
    "@types/jasmine": "~5.1.0",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "eslint": "^7.26.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~5.1.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "ts-node": "^8.3.0",
    "typescript": "~5.2.2"
  },

Prerequisites

• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Describe the Feature Request

Currently the log output from the migration utility is fairly noisy. When detecting icons that cannot be migrated it will spit that information to the console immediately.

It would be great to capture all the migration results as the task is running and generate an output at the end of the migration. We can then offer options for output to JSON or HTML that helps developers navigate what they are manually responsible for migrating.

Describe the Use Case

N/A

Describe Preferred Solution

No response

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

Prerequisites

• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Codemod version

0.0.7

Current Behavior

When running the codemod against a project which is still NgModule-based, where a module contains multiple declarations, the imports are duplicated where they exist in each of the modules declarations

Expected Behavior

Imports of the standalone components should be unique within the module

Steps to Reproduce

1. Have a project that is still NgModule-based and that has a module with multiple declarations using the same ionic components
2. Run the codemod
3. Observe the resulting module has duplicated imports of the standalone ionic components

Code Reproduction URL

No response

Additional Information

No response

Prerequisites

• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Codemod version

0.0.7

Current Behavior

An error occurs when running the utility:

┌  Ionic Angular Standalone Codemods
┌  This utility will migrate your Ionic Angular project to use the new standalone components from Ionic Framework v7.5.0.
│
▲  --------------------------------------------------
│
▲  ⚠️  This utility is experimental. Always review the changes made before committing them to your project. ⚠️
│
▲  For manual migration, see the guide at: https://www.ionicframework.com/docs/angular/build-options#migrating-from-modules-to-standalone
│
▲  --------------------------------------------------
│
◇  Would you like to run this migration as a dry run? No changes will be written to your project.
│  Yes
│
◇  Please enter the path to your project (default is the current working directory):
│  /Users/<myusername>/Apps/<projectfolder>
│
■  An error occurred during the migration.
│
■  Cannot read properties of undefined (reading 'getText')
│
└  If you encounter any issues with this migration utility, please report them at: https://github.com/ionic-team/ionic-angular-standalone-codemods/issues

Expected Behavior

The utility should run.

Steps to Reproduce

1. npx @ionic/angular-standalone-codemods in terminal at the package folder
2. Hit 'Yes'
3. Use current directory

Code Reproduction URL

No response

Additional Information

Ionic Version: 7.5.6
Angular Version: 17.0.4
Typescript Version: 5.2.2
Node Version: 20.10.0

Prerequisites

• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Codemod version

0.3.0

Current Behavior

I'm trying to use this migration tool to use standalone component. I recently upgraded my app version to "@ionic/angular": "^8.0.0", but when I look at this cli code I can see that you guys looking at
if major < 7
if minor < 5

and of course in the new version we have a minor version of 0 so we can't continue

Expected Behavior

cli should work with ionic 8

Steps to Reproduce

1. create an ionic angular app with ionic 8
2. run npx @ionic/angular-standalone-codemods

Code Reproduction URL

No response

Additional Information

No response

Prerequisites

• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Codemod version

N/A

Current Behavior

Test

Expected Behavior

Test

Steps to Reproduce

No response

Code Reproduction URL

No response

Additional Information

No response

Prerequisites

• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Codemod version

v0.0.5

Current Behavior

import { IonIcon } from '@ionic/angular';
...
@ContentChild('LocationIcon')
private readonly iconEl: {
  el: IonIcon & HTMLElement;
};

public async ngOnInit() {
  this.iconEl.el.name = 'locate';
}

error TS2339: Property 'name' does not exist on type 'IonIcon & HTMLElement'.
[ng] 
[ng] 72                             this.iconEl.el.name = 'locate';
[ng]                                               ~~~~

Expected Behavior

The migrate should complete without error.

Steps to Reproduce

import { IonIcon } from '@ionic/angular';
...
@ContentChild('LocationIcon')
private readonly iconEl: {
  el: IonIcon & HTMLElement;
};

public async ngOnInit() {
  this.iconEl.el.name = 'locate';
}

Code Reproduction URL

No response

Additional Information

• import { IonIcon } from '@ionic/angular';

export declare class IonIcon {
    protected z: NgZone;
    protected el: HTMLElement;
    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
    static ɵfac: i0.ɵɵFactoryDeclaration<IonIcon, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<IonIcon, "ion-icon", never, { "color": "color"; "flipRtl": "flipRtl"; "icon": "icon"; "ios": "ios"; "lazy": "lazy"; "md": "md"; "mode": "mode"; "name": "name"; "sanitize": "sanitize"; "size": "size"; "src": "src"; }, {}, never, ["*"], false>;
}

• import { IonIcon } from '@ionic/angular/standalone';

export declare class IonIcon {
    protected z: NgZone;
    protected el: HTMLElement;
    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
    static ɵfac: i0.ɵɵFactoryDeclaration<IonIcon, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<IonIcon, "ion-icon", never, { "color": "color"; "flipRtl": "flipRtl"; "icon": "icon"; "ios": "ios"; "lazy": "lazy"; "md": "md"; "mode": "mode"; "name": "name"; "sanitize": "sanitize"; "size": "size"; "src": "src"; }, {}, never, ["*"], true>;
}

Prerequisites

• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Describe the Feature Request

Using features such as routerLink and routerDirection with @ionic/angular requires the use of IonRouterLink and IonRouterLinkWithHref directives. In the lazy loaded build, this is registered for developers globally. However, developers using Ionic Standalone will need to import them.

Describe the Use Case

This would reduce the amount of manual work required to migrate to Ionic standalone components.

Describe Preferred Solution

Ideally the migration tool would do the following when checking the component template:

1. If it detects and Ionic component that uses routerLink, routerDirection, or routerAction then import IonRouterLink.
2. If it detects an anchor element that uses routerLink, routerDirection, or routerAction then import IonRouterLinkWithHref.

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

Prerequisites

• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Codemod version

v0.0.5

Current Behavior

not migrate

Expected Behavior

migrate

Steps to Reproduce

if (environment.production) {
    enableProdMode();
}

export const appConfig: ApplicationConfig = {
    providers: [
        provideRouter(routes),
        importProvidersFrom(
            BrowserModule,
            IonicModule.forRoot({
                backButtonText: '',
                scrollAssist: true,
            }),
        ),
    ],
};

defineCustomElements(window);

Code Reproduction URL

No response

Additional Information

No response

Prerequisites

• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Codemod version

N/A

Current Behavior

When migrating a standalone starter app, the IonicModule is left in the imports array:

import { Component } from '@angular/core';
import { IonApp, IonRouterOutlet } from "@ionic/angular/standalone";

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.scss'],
    standalone: true,
    imports: [IonicModule],
})
export class AppComponent {
    constructor() { }
}

Expected Behavior

The IonicModule should be removed from the imports array if present:

import { Component } from '@angular/core';
import { IonApp, IonRouterOutlet } from "@ionic/angular/standalone";

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.scss'],
    standalone: true,
    imports: [IonApp, IonRouterOutlet],
})
export class AppComponent {
    constructor() { }
}

Steps to Reproduce

No response

Code Reproduction URL

No response

Additional Information

No response

Prerequisites

• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Codemod version

Latest

Current Behavior

Running the recommended command produces a 404 error and I couldn't find this library published in the npm registry. Would you be able to provide a valid example of how to apply this migration to an existent Ionic project?

npx @ionic/angular-standalone-codemods
# Follow the prompts
# - Dry run or not
# - Path to your Angular project (defaults to current directory)

Expected Behavior

I'd expect the suggested command to do something.

Steps to Reproduce

Run npx @ionic/angular-standalone-codemods and it produces the following error:

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@ionic%2fangular-standalone-codemods - Not found
npm ERR! 404 
npm ERR! 404  '@ionic/angular-standalone-codemods@*' is not in this registry.
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

Code Reproduction URL

No response

Additional Information

No response

Prerequisites

• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Codemod version

0.0.7

Current Behavior

Run the codemod against my project and it fails half way through with the error Expected the module specifier to be a string literal.

Expected Behavior

The codemod successfully runs without error.

If the codemod does error, it should attempt to print the source file path that cause the error so the user can attempt to manually resolve the issue and run the codemod again.

Steps to Reproduce

1. Run codemod against my project

Code Reproduction URL

No response

Additional Information

No response