bilelmsekni / componizer Goto Github PK

The generated element looks like this:
<my-comp><my-comp/>.

But it should be instead:
<my-comp></my-comp>

If one opens up a project in a folder/path in which one of the names has a space (for example C:/Whatever/My Code/angular-project/src/pasta/pasta-component.html) then the extension fails immediately because it sends the unescaped line directly to the terminal. The solutions seems pretty obvious, surround the "activeFile" line in the script with double-quotes and add a test to verify it will work with a test folder string that has a space in it. I just wanted to submit the issue before fixing, in case there was some reason this shouldn't be done, or if I had missed something. I'm not a regular vscode dev, I just happened to have this problem and know what the solution is.

That would be great if we save the developer from having to install the schematics.

The only way to achieve that AFAICT:

• Not using schematics🙃. We would use something like copy-template-dir as a dependency to the extension and bundle everything before packaging the extension.
• Bundling the schematics, putting the bundle inside the extension package (~5MB) and invoking it directly from there (setting up a relative path to the schematics), that should work as long as we provide an entry factory function.

Any other suggestion?

Hi @bilelmsekni ,

I am trying to use your vscode extension for my project. I have also installed below package as my dev-dependency.

"@componizer/schematics": "0.0.7"

I am using angular v13 -> but I tried with angular/cli v 10.2.0, seeing your sample. But it didn't helped.

Can you please help?

npx ng g @componizer/schematics:ng-componize --name filters --activeFile "<file_path_goes_here>" --start 4 --end 98 --customSkipImport false --debugMode true
Schematic input does not validate against the Schema: {"style":"scss","name":"filters","activeFile":"<file_path>","start":4,"end":98,"customSkipImport":"false","debugMode":"true","skipImport":false,"project":"<project_name>"}
Errors:

  Data path "" should NOT have additional properties(activeFile).

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/[email protected] -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>

The link to CHANGELOG is broken here https://github.com/bilelmsekni/componizer/blob/master/extension/README.md

Feature description

Launch local ng command script rather than the global one.

Implementation

Maybe by replacing

const script = `ng g @componizer/schematics:ng-componize ...`;

by

const script = `npx ng g @componizer/schematics:ng-componize ...`;

in src/utils.ts?

Not sure about the cwd though.

UPDATE
npx rather than npm run which depends on "ng": "ng" being present in scripts.

Please add the documentation for 'skip-import' parameter , because I had to check the code to understand that I should write 'false' as the value. It wasn't working for me when I tried to specify module, probably because of nested folder structure.

I tried to refactor html block of a template into separate component, new component is created but it does not contain that html block

Hi all! Been trying to use the extension but I'm getting this error.

Command failed: npx ng g @componizer/schematics:ng-componize --name hello-world --activeFile "path-to-component.html" --start 39 --end 39 --customSkipImport true --debugMode false
An unhandled exception occurred: NOT SUPPORTED: keyword "id", use "$id" for schema ID
See "/tmp/ng-iql2sW/angular-errors.log" for further details.

I'm trying to refactor this:
<div>hello world</div>

And these are my relevant package.json dependencies:

  "@angular-eslint/schematics": "16.2.0",
  "@componizer/schematics": "~0.0.7",
  "@schematics/angular": "~17.0.0",
  "@angular/cli": "^17.0.0",

I'm confused by the error message and I'm not really sure how to proceed. Any help is greatly appreciated.