Adding Page Through Extension Doesn't Do Anything

[JacobHornbeck]

I just tried twice to add a page in a new blank Ionic project, but it just said it was creating it. Hours later, and it hasn't done anything. I tried again, and it did the same thing.

[dtarnawsky]

Hi @JacobHornbeck,

Version 1.21.5 is out now and it fixes an issue that would prevent adding a new page (or creating project) if the folder name contained a space in it. This may be the case for your project.

If after updating to 1.21.5 the problem isn't fixed for you, can you try to run npm install @ionic/cli and then see if the problem disappears?

Finally, if there is a problem with running the command then it will usually output the errors/logs to the Output window, if you can provide whatever was written there that will help in diagnosing the problem.

[JacobHornbeck]

My project folder didn't have spaces in it, and after updating, it still just sits there.

I tried installing @ionic/cli, but that didn't help either.

The I created this project using the Ionic CLI, and because those buttons didn't work, I just used the CLI to generate the pages and components that I needed. I just tried to create a component with the extension, and that does the same thing. When I use the extension to try to create pages/components, there is no error in the output window. I just says that it is creating whatever I asked it to, but it never does.

[Ionic] Creating Angular page named delete-this-settings-page..
[Ionic] Creating Angular page named delete-this-settings-page..
[Ionic] Creating Angular component named a-test..

The first two are from the two different times I tried creating a "dummy" page (to show what it outputs), and the third one is what it outputs when I tried creating a "dummy" component.

I'm sorry I could not provide more details on this issue, I will look into it more myself to see if I can get an error or something that could help you guys fix it.

[JacobHornbeck]

I have not been able to get any errors, it just sits there doing nothing. I have updated it twice (2 or 3 times, I can't remember exactly) since the original issue, but it still is doing the same thing. I have to use the CLI to add any of the parts (page, component, service, etc).

I will continue trying each time I update the extension, just in case it get's fixed, but until then... good luck! If it does work, I will close this issue with a comment saying that it is now fixed.

[JacobHornbeck]

@dtarnawsky The most recent update does change things. Instead of just sitting there, I now get an error:

[Ionic] Creating Angular service named test..
[Error] Class name "'test'" is invalid.
[ERROR] Could not generate service.

[Error] Unable to generate Angular service named test: Class name "'test'" is invalid.
[ERROR] Could not generate service.

That was for generating a service. The following is for generating a page:

[Ionic] Creating Angular page named new-page..
[Error] Selector (app-'new-page') is invalid.
[ERROR] Could not generate page.

[Error] Unable to generate Angular page named new-page: Selector (app-'new-page') is invalid.
[ERROR] Could not generate page.

It also gives me an error if I just use a single word.

Hope these errors help you guys fix it!

[dtarnawsky]

Hi @JacobHornbeck ,

I added some additional logging in the version released yesterday in order to hopefully diagnose the issue.

Can you check the version of @ionic/angular-toolkit you are using?

My guess is that it likely needs updating to latest.

If you can share your project then that can help me reproduce your issue.

[JacobHornbeck]

@dtarnawsky, this is happening in multiple of my projects, even a brand new project created with the Ionic CLI, so I'm not sure what my project would help with, but the code is on GitHub. Also, my @ionic/angular-toolkit is version ^6.0.0.

[dtarnawsky]

Thanks for a link to the code: I found that I could add Angular components etc without error.

So, my next guess would be globally installed dependencies: can you run npm list -g ? Likely culprits would be the @ionic/cli or @angular/cli versions installed (in which case you can update or uninstall them)

[JacobHornbeck]

I just updated both @ionic/cli and @angular/cli, then ran npm audit fix to fix the vulnerabilities, restarted my VSCode, but it still gives me the same error.

It saying Class name "'test'" is invalid makes it seem like it is trying to use 'test' as the name (like with the single quotes). That's just my thought because it has both single and double quotes around the name in the error message.

[dtarnawsky]

Hey @JacobHornbeck, those single quotes are added in case you choose a name that has a space in it. For whatever reason, it seems the single quotes are being passed onto Angular cli on your machine. So, I've put a workaround for this in version 1.22.4 and have removed the single quotes and if your name contains spaces they will be replaced with dashes.

Hopefully, this means that the feature works on your machine! v1.22.4 has just been uploaded so you should be able to try it out in the next 5-10 minutes. Let me know how it goes!

[JacobHornbeck]

@dtarnawsky That workaround works! I can now add pages, services, etc through the extension. Thank you for your assistance, I will now close this issue, as it is now solved.

[JacobHornbeck]

@dtarnawsky I just used it to create a component (not just a dummy one that I deleted right after), and it created it fine, but it gives me this output (notice the error at the end):

[Ionic] Creating Angular component named image-view..
> ng.cmd generate component image-view --project=app
CREATE src/app/image-view/image-view.component.html (29 bytes)
CREATE src/app/image-view/image-view.component.spec.ts (718 bytes)
CREATE src/app/image-view/image-view.component.ts (283 bytes)
CREATE src/app/image-view/image-view.component.scss (0 bytes)
[OK] Generated component!

[Error] Failed to create Angular component named image-view

I imagine this is a mess up, since it did succeed, but it says it failed.