bug: SyntaxError: Unexpected token

[donnydg4]

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.4.0

Current Behavior

During the Dry-Run using ionic-angular-standalone-codemods command, I get an error:

An error occurred during the migration. │ ■ SyntaxError: Unexpected token ']', ..." ], │ "... is not valid JSON │ at JSON.parse (<anonymous>) │ at migrateAngularJsonAssets (C:\Users\donny\AppData\Local\npm-cache\_npx\ff04957b6f1fa49f\node_modules\@ionic\angular-standalone-codemods\dist\index.js:904:28) │ at runStandaloneMigration (C:\Users\donny\AppData\Local\npm-cache\_npx\ff04957b6f1fa49f\node_modules\@ionic\angular-standalone-codemods\dist\index.js:1033:9) │ at async main (C:\Users\donny\AppData\Local\npm-cache\_npx\ff04957b6f1fa49f\node_modules\@ionic\angular-standalone-codemods\dist\index.js:1139:5)

It appears to be during a specific component, my video.page.ts one. Here is that:
`
import {Component, inject} from '@angular/core';
import {DomSanitizer, SafeResourceUrl} from "@angular/platform-browser";
import { MenuController, NavController, Platform, ToastController, IonicModule } from "@ionic/angular";
import {Clipboard} from '@angular/cdk/clipboard';
import {WatchModel} from "../../models/sub-models/watch.model";
import { MatFormField, MatLabel, MatHint } from '@angular/material/form-field';
import { MatInput } from '@angular/material/input';
import { FormsModule } from '@angular/forms';
import { FooterComponent } from '../footer/footer.component';
import { DatePipe } from '@angular/common';

@component({
selector: 'app-video',
templateUrl: './video.page.html',
styleUrls: ['./video.page.scss'],
standalone: true,
imports: [
IonicModule,
MatFormField,
MatLabel,
MatInput,
FormsModule,
MatHint,
FooterComponent,
DatePipe,
],
})
export class VideoPage {

private clipboard = inject(Clipboard);
private toastController = inject(ToastController);
private platform = inject(Platform);
private sanitizer = inject(DomSanitizer);
private navCtrl = inject(NavController);
private menuCtrl = inject(MenuController);

textArea: string = "";
defaultUrl: string = "https://www.youtube.com/embed/";
opened: boolean = false;
anyCard: WatchModel;
youtubeUrl: SafeResourceUrl;

constructor() {
this.anyCard = JSON.parse(localStorage.getItem('card'));
this.youtubeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.defaultUrl + this.anyCard.videoId);
}

openTextArea() {
this.opened = !this.opened;
}

copyText() {
this.clipboard.copy(this.textArea);
this.presentToast();
}

copyUrlToClipboard(id: string) {
const shareUrl: string = 'https://www.youtube.com/watch?v=' + id;
this.clipboard.copy(shareUrl);
this.presentToastForShare();
}

async presentToast() {
const toast = await this.toastController.create({
cssClass: 'custom-toast-class',
message: 'Your Notes have been copied to your clipboard!',
duration: 2000,
position: 'bottom'
});
await toast.present();
}

async presentToastForShare() {
const toast = await this.toastController.create({
cssClass: 'custom-toast-class',
message: 'The Youtube URL has been copied to your clipboard!',
duration: 2000,
position: 'bottom'
});
await toast.present();
}

back() {
this.navCtrl.back();
this.menuCtrl.enable(true, 'menu-one');
}
}

`

Expected Behavior

I wasn't sure what to expect as I have recently just migrated to Angular standalone components and I have an Ionic/Angular project so I decided to do Angular first, then Ionic.

Steps to Reproduce

1. Run the npx @ionic/angular-standalone-codemods command
2. Select Dry-run
3. select application directory.

Code Reproduction URL

No response

Additional Information

I clearly see it says "... is not valid JSON at JSON PARSE." So I thought huh, maybe it's my localStorage cause that's the only JSON.parse I have in my application. I removed it and ran it again but still the same error persisted. It ran I think fine for all the other classes as they printed out and didn't seem to throw an error. It's just when I got to Video page file.

Forgive me for the code not formatting, I keep trying to insert into code block and it's not doing it.

[mw108]

I'm running into the same issue:

x  An error occurred during the migration.
|
x  Error: SyntaxError: Unexpected token ']', ..."          ]
|         "... is not valid JSON
|      at migrateAngularJsonAssets (...\npm-cache\_npx\ff04957b6f1fa49f\node_modules\@ionic\angular-standalone-codemods\dist\index.js:908:10)
|      at runStandaloneMigration (...\npm-cache\_npx\ff04957b6f1fa49f\node_modules\@ionic\angular-standalone-codemods\dist\index.js:1038:9)
|      at async main (...\npm-cache\_npx\ff04957b6f1fa49f\node_modules\@ionic\angular-standalone-codemods\dist\index.js:1144:5)

I checked the file mentioned in the error report npm-cache\_npx\ff04957b6f1fa49f\node_modules\@ionic\angular-standalone-codemods\dist\index.js:908:10 at line 904:

var migrateAngularJsonAssets = async (project, cliOptions) => {
  const angularJsonSourceFile = project.getSourceFiles().find((sourceFile) => sourceFile.getFilePath().endsWith("angular.json"));
  if (angularJsonSourceFile === void 0) {
    return;
  }
  const angularJson = JSON.parse(angularJsonSourceFile.getText()); // Error occurs here
  for (const project2 of Object.keys(angularJson.projects)) {
    ...

I added some debug information and it looks like it fails to read the angular.json file in the project root. But when checking the file it does not contain any ...

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "app": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "prefix": "app",
            "schematics": {},
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:application",
                    "options": {
                        "outputPath": {
                          "base": "www"
                        },
                        "index": "src/index.html",
                        "polyfills": ["zone.js"],
                        "tsConfig": "tsconfig.app.json",
                        "assets": [
                            {
                                "glob": "**/*",
                                "input": "src/assets",
                                "output": "assets"
                            },
                            {
                                "glob": "**/*.svg",
                                "input": "node_modules/ionicons/dist/ionicons/svg",
                                "output": "./svg"
                            }
                        ],
                        "stylePreprocessorOptions": {
                            "includePaths": [
                                "src"
                            ]
                        },
                        "styles": [
                            "src/theme/variables.scss",
                            "src/global.scss"
                        ],
                        "scripts": [],
                        "aot": false,
                        "extractLicenses": false,
                        "sourceMap": true,
                        "optimization": false,
                        "namedChunks": true,
                        "allowedCommonJsDependencies": [
                            "qrious"
                        ],
                        "browser": "src/main.ts"
                    },
                    "configurations": {
                        "production": {
                            "fileReplacements": [
                                {
                                    "replace": "src/environments/environment.ts",
                                    "with": "src/environments/environment.prod.ts"
                                }
                            ],
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": false,
                            "namedChunks": false,
                            "aot": true,
                            "extractLicenses": true,
                            "budgets": [
                                {
                                    "type": "initial",
                                    "maximumWarning": "2mb",
                                    "maximumError": "5mb"
                                }
                            ]
                        },
                        "staging": {
                            "fileReplacements": [
                                {
                                    "replace": "src/environments/environment.ts",
                                    "with": "src/environments/environment.staging.ts"
                                }
                            ],
                            "optimization": true,
                            "outputPath": {
                              "base": "www-staging"
                            },
                            "outputHashing": "all",
                            "sourceMap": false,
                            "namedChunks": false,
                            "aot": true,
                            "extractLicenses": true,
                            "budgets": [
                                {
                                    "type": "initial",
                                    "maximumWarning": "2mb",
                                    "maximumError": "5mb"
                                }
                            ]
                        },
                        "ci": {
                            "progress": false
                        }
                    }
                },
                "serve": {
                    "builder": "@angular-devkit/build-angular:dev-server",
                    "options": {
                      "buildTarget": "app:build"
                    },
                    "configurations": {
                        "production": {
                          "buildTarget": "app:build:production"
                        },
                        "ci": {
                            "progress": false
                        }
                    }
                },
                "extract-i18n": {
                    "builder": "@angular-devkit/build-angular:extract-i18n",
                    "options": {
                      "buildTarget": "app:build"
                    }
                },
                "test": {
                    "builder": "@angular-devkit/build-angular:karma",
                    "options": {
                        "main": "src/test.ts",
                        "polyfills": ["zone.js"],
                        "tsConfig": "tsconfig.spec.json",
                        "karmaConfig": "karma.conf.js",
                        "styles": [],
                        "scripts": [],
                        "assets": [
                            {
                                "glob": "favicon.ico",
                                "input": "src/",
                                "output": "/"
                            },
                            {
                                "glob": "**/*",
                                "input": "src/assets",
                                "output": "/assets"
                            },
                        ]
                    },
                    "configurations": {
                        "ci": {
                            "progress": false,
                            "watch": false
                        }
                    }
                },
                "lint": {
                    "builder": "@angular-eslint/builder:lint",
                    "options": {
                        "lintFilePatterns": [
                            "src/**/*.ts",
                            "src/**/*.html"
                        ]
                    }
                },
                "e2e": {
                    "builder": "@angular-devkit/build-angular:protractor",
                    "options": {
                        "protractorConfig": "e2e/protractor.conf.js",
                        "devServerTarget": "app:serve"
                    },
                    "configurations": {
                        "production": {
                            "devServerTarget": "app:serve:production"
                        },
                        "ci": {
                            "devServerTarget": "app:serve:ci"
                        }
                    }
                },
                "ionic-cordova-build": {
                    "builder": "@ionic/angular-toolkit:cordova-build",
                    "options": {
                        "browserTarget": "app:build"
                    },
                    "configurations": {
                        "production": {
                            "browserTarget": "app:build:production"
                        }
                    }
                },
                "ionic-cordova-serve": {
                    "builder": "@ionic/angular-toolkit:cordova-serve",
                    "options": {
                        "cordovaBuildTarget": "app:ionic-cordova-build",
                        "devServerTarget": "app:serve"
                    },
                    "configurations": {
                        "production": {
                            "cordovaBuildTarget": "app:ionic-cordova-build:production",
                            "devServerTarget": "app:serve:production"
                        }
                    }
                }
            }
        }
    },
    "cli": {
        "schematicCollections": [
            "@ionic/angular-toolkit"
        ],
        "analytics": "4b235442-cf28-4cba-ac10-c63a69894ac1"
    },
    "schematics": {
        "@ionic/angular-toolkit:component": {
            "styleext": "scss"
        },
        "@ionic/angular-toolkit:page": {
            "styleext": "scss"
        }
    }
}

@donnydg4 Code blocks are 3 grave accent at the beginning and 3 grave accent at the end.

    ```
    Your code here
    ```