Simple use extension fails

[maykon-oliveira]

I tried out to use this vscode extension, but it's not working well. I selected the code inside ** **, right click and Componize, set component name, but I am facing a error.

<nb-card>
  <nb-card-body>
   **<footer>sdsadas</footer>**
  </nb-card-body>
</nb-card>

Command failed: ng g @componizer/schematics:ng-componize --name footer --activeFile /home/maykon-oliveira/Projects/adlottery/web/src/app/pages/raffles/raffles.component.html --start 4 --end 4 An unhandled exception occurred: Cannot find module '@schematics/angular/utility/project' Require stack: - /home/maykon-oliveira/Projects/adlottery/web/node_modules/@componizer/schematics/ng-componize/utils.js - /home/maykon-oliveira/Projects/adlottery/web/node_modules/@componizer/schematics/ng-componize/index.js - /home/maykon-oliveira/Projects/adlottery/web/node_modules/@angular-devkit/schematics/tools/export-ref.js - /home/maykon-oliveira/Projects/adlottery/web/node_modules/@angular-devkit/schematics/tools/index.js - /home/maykon-oliveira/Projects/adlottery/web/node_modules/@angular/cli/utilities/json-schema.js - /home/maykon-oliveira/Projects/adlottery/web/node_modules/@angular/cli/models/command-runner.js - /home/maykon-oliveira/Projects/adlottery/web/node_modules/@angular/cli/lib/cli/index.j...

I installed yarn add @componizer/schematics -D

It's in package.json devDependencies: "@componizer/schematics": "^0.0.2",

Edit

I was on stackoverflow and I found this https://stackoverflow.com/questions/62917001/cannot-find-module-schematics-angular-utility-project. So I installed, yarn add @schematics/angular@9.1.0 -D, and tried again.

The component was created, but the code inside html file it's not what I selected, it's just <p>component works!</p>

[bilelmsekni]

Hi Maykon,

The @componizer/schematics depends on the angular cli schematics. Does you project have @angular/cli as a dev and a global dependency ?

[maykon-oliveira]

Yes, both.

Now the ng-componizer creates a component, but the content inside .html file is not what I selected.

[iguissouma]

I had a similar issue on a new angular project npm install @schematics/angular@9.1.0 fix the issue.

[bilelmsekni]

@maykon-oliveira I created a sample project to help with reproducing bugs, I tried this scenario and it's working fine

Can you provide a reproducing steps ?

[bilelmsekni]

@maykon-oliveira Okay, I found the explanation. I think you are using the latest version of Angular 10.x.x.
The @schematics/angular has a breaking change where two methods has been reworked (buildDefaultPath and getProject) of utils.ts
These two functions are no longer inside @schematics/angular/utility/project
buildDefaultPath has been moved to @schematics/angular/utility/workspace, however I can't seem to find getProject
Many people are suffering from this issue on the web, so for the time being we will have to stick with Angular 9 until the issues are resolved

[maykon-oliveira]

@bilelmsekni You are right,
I was checking out in some angular versions and yes, everything works from angular 9 to down. I am looking for getProject, or equivalent, for us replace in a next release to support angular 10, but I not found yet. I read releases messages, I cloned the angular/cli repo to find method but nothing.

[bilelmsekni]

@maykon-oliveira Thanks, please don't spend any time on this issue because it was part my fault. Earler, the dependencies of the schematics were peer so we got them transitevly from the Angular project where the extension will operate( not good if the project is 10 or later)
I changed the dependency to required so everytime the schematics will be installed, it will get it own version of @angular/schematics so we should be safe no matter which project the extension will be used in

[bilelmsekni]

@maykon-oliveira can you update to version 0.0.4 and let us know if the problem persists please ? if not, let's close this issue :)

[maykon-oliveira]

It's working perfectly now! awesome, tnks 🎉