Repository navigation
Schematic with multi select x-promt errors when using command line parameter: 'path ".foo" should be array' #16320
Description
Activity
This is somewhat related to #12150 but in this case it's for Array's
It seems that the cause of this error is somewhere in
validateOptionsWithSchema:
InvalidInputOptionsseems to be called with an object of{"name":"paul"}instead of:{"name":["paul"]}hey @alan-agius4 do you think this issue will be faced before releasing Angular 10? I tried to understand the implementation and would like to contribute but I didn't find out how to debug it until now ^^
@alan-agius4 sorry, I meant Angular 9 in the above comment.
@d-koppenhagen, currently this is not a top priority for the team.
@alan-agius4 I see. Meanwhile I dounf out how to debug and install the CLI locally. I found the place where the error occurs. I provided a PR (#16985) to fix it.
I don’t think that PR addresses the above issue. In the above issue you are using schematics CLI, however the fix is for Angular CLI.
Yes that’s true. But with the fix and building the CLI locally, the described issue doesn’t appear. So I think it will fix it indeed.
In the issue I just use the schematics CLI during the schematics development. But in the end I will run the schematic with the Angular CLI using
ng add.For anyone interested, the current workaround works for me:
schematics .:hello --debug=false --name=paul --name=peter
(tested with Angular CLI: 11.2.12)
Reacted by Danny KoppenhagenSame problem
(We're using Angular CLI v17.3.8)
We're having the same problem in our open source library Spartacus, when our users run our installation schematics (
ng add) with a command line option--featuresthat has atype: array. See the following screenshot:
Workaround: first npm-install; then ng-add
Interestingly, the error doesn't happen at all, if I first manually npm-install the pacakge and only then run the same
ng addcommand (with array) option.Why the problem seems to happen
The problem of mis-interpreting the command-line option as a string instead of array seems to occur, because the anticipated
schema.jsonof our package (which informs that a flag--featuresistype: array) is not known at the time of parsing the command-line arguments.As far as I could NodeJS-debug the whole process, AngularCLI command
ng addseems to work in the following way:- first it parses the command-line arguments early, without knowing the
schema.jsonof the package that we're going to add - then it npm-installs the package (which means also downloading its schema.json)
- then it validates lately if the parsed command-line arguments match the expected type defined in the downloaded
schema.json
Above workaround doesn't work when passing the exact version
⚠️ The above mentioned workaround (i.e. first npm-installing the package before running
ng add) doesn't work, when I pass the exact version of my package in theng addcommand. See the following screenshot:
Our plan to resign from
type: arrayWe plan to resign from using
type: array(as it seems to be a bug in Angular that we cannot fix ourselves) and usetype: stringwith comma-separated values by convention, e.g.--features="Cart, Order, Checkout". Then in the logic of our installation schematics, we plan to split the strings by comas and therefore have an array effectively.Idea for a fix in Angular?
@alan-agius4 Do you think AngularCLI could re-parse the command line arguments lately, i.e. after the added package is already npm-installed, so the
schema.jsonof the added package (informing which params aretype:array) is really taken into account?Reacted by kpawelczak- first it parses the command-line arguments early, without knowing the
Hi @alan-agius4
If possible, I'd happy to provide a PR with a fix. My proposed approach is to re-parse the CLI arguments after the package is npm-installed so to we could use the package's preciseschema.jsonfor determining properly the types of arguments (e.g.arrayinstead ofstring).TBH I'd need a bit of an advice, how we could possibly workaround the limitations of the current architecture.
Let me share my understanding of the current architecture:- there is an inversion of control: we plug our commands (in this case
AddCommandModule) into theyargstool (source) by exposing 2 "template methods":build()andrun()in ourAddCommandModule yargswill invoke those 2 methods:- first it will invoke
build()- it's the only time, when we can access thelocalYargsobject and instruct it on how to parse the raw CLI arguments like['ng', 'add', '@my/lib', '--features=foo', '--features=bar']- especially by calling the convenient methodlocalYargs.option(<optionName>, ...) - then it invokes
run()(viahandle()method) - then we no longer have access to the parser objectlocalYargs, but we have access only to the already-parsedoptionsobject. There we npm-install the package (if needed) and then we execute its schematics with passing those already-parsedoptionsobject.
- first it will invoke
Do you have any idea of a workaround how we could re-parse the raw CLI arguments (i.e. invoke
this.addSchemaOptionsToCommand()in therun()function, after npm-installing a package but before executing the schematics? Thanks to this, we could pass properly interpretedoptionsobject to the executed schematics (e.g.--features=foo --features=barparsed to an arrayfeatures: ['foo', 'bar'], instead of a stringfeatures: 'bar').- there is an inversion of control: we plug our commands (in this case
🐞 Bug report
Command (mark with an
x)Is this a regression?
No, it's not. Multi select prompt is just supported within angular cli >
9.0.0-rc.3.Description
Creating an angular schematic that prompts the user for multiple options is possible since #16104. The prompt works quite good now but using the command line for multi selections will cause an error:
At first I opened an issue for the docs because I thought it's just not documented: angular/angular#33851 But after checking the implementation of the angular guard schematic which has
--implementsparameter (which works) and creating the minimal reproduction repo (see underneath), I think it's a bug somewhere in@angular-devkit/schematics-cli.🔬 Minimal Reproduction
I created a very minimal repo for reproduction:
https://github.com/d-koppenhagen/ngx-multi-select-schematic
npm i -g @angular-devkit/schematics-cli@next git clone git@github.com:d-koppenhagen/ngx-multi-select-schematic.git cd ngx-multi-select-schematic npm i✅ Using prompt works good:
❌Using command line parameter fails (event not with just a single name handed over:
🔥 Exception or Error
🌍 Your Environment