Encountering an Angular schematics issue while utilizing an external schematic ng-new, the specified version is

Attempting to develop a schematic that utilizes the angular ng-new as the initial call and another schematic to add a prettier file to the new project. Upon executing the command, an error is encountered:

  Data path "" must have required property 'version'.

This necessitates adding --version="x" to the command. Is there a way to incorporate this external schematic without explicitly specifying the version so it automatically defaults to the latest version like ng new?

Here's the schematic code snippet:

import {
  chain,
  externalSchematic,
  Rule,
  schematic,
  SchematicContext,
  Tree,
} from "@angular-devkit/schematics";

import { Schema as NgNewOptions } from "@schematics/angular/ng-new/schema";

export function newProject(options: NgNewOptions): Rule {
  return async (_tree: Tree, _context: SchematicContext) => {
    const rule = externalSchematic("@schematics/angular", "ng-new", options);
    const rule2 = schematic("add-prettier-configuration", options);

    return chain([rule, rule2]);
  };
}

And here is my collection setup:

{
  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
  "extends": ["@schematics/angular"],
  "schematics": {
    "hello-world": {
      "description": "A blank schematic.",
      "factory": "./hello-world/index#helloWorld"
    },
    "goodbye-world": {
      "description": "A blank schematic.",
      "factory": "./goodbye-world/index#goodbyeWorld"
    },
    "add-prettier-configuration": {
      "description": "Add a prettier configuration file.",
      "factory": "./add-prettier-configuration/index#addPrettierConfiguration",
      "schema": "./add-prettier-configuration/schema.json"
    },
    "new-project": {
      "description": "A blank schematic.",
      "factory": "./new-project/index#newProject",
      "schema": "./new-project/schema.json"
    }
  }
}

When attempting to execute the new-project schematic, it prompts for the project name but encounters an error before starting the "new" schematic with the following message:

 schematics ./hello-world:new-project
Debug mode enabled by default for local collections.
? What name would you like to use for the new workspace and initial project? iuhiuh+
An error occurred:
Error: Schematic input does not validate against the Schema: {"name":"iuhiuh+"}
Errors:

  Data path "" must have required property 'version'.
...

Answer №1

After much searching, I discovered the solution - you need to utilize it as an ng command. Instead of using new-project, I switched to ng-new and applied it in this manner:

ng new --collection ./hello-world

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can a date range validation be implemented with two distinct ngx date picker fields in Angular 10?

Click here to view the image description In the illustration provided, I am seeking a solution to restrict users from selecting dates in the end date picker that occur before the chosen start date. ...

Customize Colors to Match Background in SASS

I want to design a dynamic tag component in Angular, where users can input a background color and have the font color automatically adjusted to either light or dark based on the specified color. Here's how my component is structured: <span class=& ...

The system couldn't locate the module: Issue: Unable to find module 'fs' within the directory

I am currently working on integrating the ADAL JS sample code from this link into a SharePoint framework client web part. My code is fairly straightforward, as I have already installed packages like adal, fs, and node-fs using NPM. However, when running t ...

Issue with a child element that is malfunctioning because of the parent element

There seems to be an issue with the child tag link not working because of the parent tag link. Is there a solution for this problem? Please provide suggestions. Here is the code snippet: <div class="d-flex flex-wrap mx-auto mb-4"> < ...

Creating an HTML template in an Angular service and utilizing it as an HTMLTemplateRef

I'm currently working on a major project that has a specific requirement. As part of this project, I am utilizing a library which allows me to open dialog (modal) popups. In order to do so, I need to configure some options for the modal opening proce ...

Header remains fixed when scrolling

Is there a way to make the header of a Bootstrap table fixed when scrolling, while also adjusting the width of each column based on the content within it? I want the column headers to match the width of the row with the most text. Setting the position of t ...

What is the most effective way to send messages from Typescript to C#?

Could someone provide guidance on how to properly send a message from Typescript to C#? I have been attempting to receive the message in C# using WebView_WebMessageReceived with the code snippet below: private void WebView_WebMessageReceived(object sender, ...

How can main component be hidden or removed from view on specific routes when changing pathways?

In the html template located in my app.component.html file, I have the following code ` <app-layout> <mat-sidenav-container> <mat-sidenav #sidenav role="navigation"> <app-sidenav-list (sidenavClose)="sidenav.cl ...

Typescript ensures that the return type of a function is a key of an interface, which is determined based

I am attempting to enforce a specific return type from a function based on the key passed to it. For example, if the key is service1, then the correct return type should be Payloads['service1']. How can I accomplish this? interface Payloads { ...

I can't find my unit test in the Test Explorer

I'm currently working on configuring a unit test in Typescript using tsUnit. To ensure that everything is set up correctly, I've created a simple test. However, whenever I try to run all tests in Test Explorer, no results are displayed! It appear ...

Uncovering the Full Scope of a LinkedIn Profile with Typescript

Hello, I am currently in the process of developing an Ionic2 framework app that includes social login functionality. Up to this point, I have successfully integrated Google Plus and Facebook buttons. Now, I would like to add LinkedIn login as well. The c ...

Having difficulty in dynamically loading an image from an API's URL in Angular

In the title, I mentioned that I am utilizing a free API to display cryptocurrency news for my practice project. Everything seems to be working fine except for displaying the images in card view. I will share my code here, so if you have any suggestions on ...

Attempt to transfer the input's value to a function within Angular using mat-select from Material design

Hi, I'm working on a project that involves sending the value of mat-select from a form. Here is my HTML: <mat-form-field class="input-class" appearance="fill"> <mat-label>Choose Partner <i class="far fa-id-card"></ ...

Angular2 routing directs me to a different URL path

In my Angular2 web application, I have set up the following routes: '', '/app', '/login', '/signin', '/validate', '/error', '**': I've defined a route configuration in app.router.t ...

Angular 5's data display glitch

Whenever I scroll down a page with a large amount of data, there is a delay in rendering the data into HTML which results in a white screen for a few seconds. Is there a solution to fix this issue? Link to issue I am experiencing HTML binding code snippe ...

The angular 5 application encountered an issue where it was unable to access the property 'singlePost' due to a null value, resulting

When using the once method to fetch data from the Firebase database, everything works correctly. However, when I try to use the on method, I encounter an error that says: ERROR TypeError: Cannot read property 'singlePost' of null. How can I prope ...

HTML code for adding a dropdown menu inside a table cell

I am trying to set up a table where one cell functions as a dropdown menu. The data.field is being fetched from the backend and I want it to be displayed during rendering. Additionally, a fList is also retrieved from the backend. When a user clicks on th ...

Error TS2322: You cannot assign a Promise<any> to a string type

Having an issue in my react app where I am attempting to import the img source but encountering an error: TS2322: Type 'Promise<any>' is not assignable to type 'string'. What is the correct way to import an element into a variabl ...

Is there a way I can replace this for loop with the array.some function?

I am looking to update the filterOutEmails function in the following class to use array.some instead of the current code. export class UsertableComponent { dataSource: MatTableDataSource<TrialUser> createTableFromServer = (data: TrialUsers[], ...

Add a new child component template with each click using the onclick event in Angular

Is there a way to dynamically add a child component with each button click event? Here is the HTML code for the button: <button type="button" class="btn btn-success btn-sm btn-add-phone" (click)="addfield()"><span class="fa fa-plus"></span ...