Issue with Nativescript + Angular project: A critical error has occurred - Module not found: '@schematics/angular/utility/parse-name'

I'm diving into nativescript development for the first time and I'm attempting to create a new component using this command: ng g c component-name

The error message that's popping up reads: An unhandled exception occurred - Cannot find module '@schematics/angular/utility/parse-name'

I've executed the following commands:

npm i -D @nativescript/schematics @schematics/angular tslint

Even with @schematics/angular version 9.1.0 installed, I keep encountering this error:

Could not find an NgModule. Use the skip-import option to skip importing in NgModule

I prefer not to skip the import process and want components to be automatically included in the modules.

If I do decide to skip the import step, another error shows up related to the TS class of the component:

Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.ts(1219)

The 'experimentalDecorators' option is indeed set to true in the tsconfig file, but I'm unsure how to resolve all these issues!

TNS has been configured correctly as verified by running tns doctor without any problems detected.

The Angular and Nativescript versions are both up-to-date:

Angular CLI: 11.1.1 Node: 10.23.1 OS: darwin x64

Angular: 11.0.9
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1101.1 (cli-only)
@angular-devkit/core         10.0.8
@angular-devkit/schematics   11.1.1 (cli-only)
@ngtools/webpack             11.0.7
@schematics/angular          11.1.1 (cli-only)
@schematics/update           0.1101.1 (cli-only)
rxjs                         6.6.3
typescript                   4.0.5

TNS Doctor:

No issues were detected.
    ✔ Your ANDROID_HOME environment variable is set and points to correct directory.
    ✔ Your adb from the Android SDK is correctly installed.
    ✔ The Android SDK is installed.
    ✔ A compatible Android SDK for compilation is found.
    ✔ Javac is installed and is configured properly.
    ✔ The Java Development Kit (JDK) is installed and is configured properly.
    ✔ Xcode is installed and is configured properly.
    ✔ xcodeproj is installed and is configured properly.
    ✔ CocoaPods are installed.
    ✔ CocoaPods update is not required.
    ✔ CocoaPods are configured properly.
    ✔ Your current CocoaPods version is newer than 1.0.0.
    ✔ Python installed and configured correctly.
    ✔ The Python 'six' package is found.
    ✔ Xcode version 12.3.0 satisfies minimum required version 10.
    ✔ Getting NativeScript components versions information...
    ✔ Component nativescript has 7.1.2 version and is up to date.

Answer №1

To remove in angular.json:

"cli": {​​

"defaultCollection": "@nativescript/schematics",

"analytics": false

}​​,

Also, execute ng g c your-component

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

Inquiry regarding classifications, Maps, and subcategories in typescript

In my project, I have a class called Chart that has various subclasses like BarChart and TimeseriesChart, all of which extend the base Chart class. To create these charts, I use a method named buildChart. This method uses an enum called ChartsEnum (example ...

Enhance your React Highchart by incorporating gradient shading to the data points

One interesting feature in classic highcharts is the ability to apply gradient coloring to points: Highcharts.setOptions({ colors: Highcharts.getOptions().colors.map(function (color) { return { radialGradient: { cx: ...

Extracting information from an object retrieved through an http.get response can be accomplished by utilizing various methods and

I am working with an API that returns a JSON object like this: { "triggerCount": { "ignition_state_off": 16, "ignition_state_on": 14, "exit_an_area": 12, "enter_an_area": 19, "door_unlocked": 1, "door_l ...

Accessing unique identifiers from Firebase Database with AngularFire

My Firebase Database is structured as shown below: fire-demo-123 course 1 : "course1" 2 : "course2" 3 : "course3" -MzOn2s : "course4" I am currently using the following code to fetch the list component.t ...

Methods for comparing the current date and time to a specific time stored in a database

A database table contains the following values: "295fc51f6b02d01d54a808938df736ed" : { "author" : "James Iva", "authorID" : "JBvLC3tCYCgFeIpKjGtSwBJ2scu1", "geometry" : { "latitude" : 29.4241219, "longitude" : -98.49362819999999 ...

What is the method for sending a Post request using the "content type" value of "application/x-www-form-urlencoded"?

Need to send a request to the oAuth2 authentication server to obtain a token. The request works fine in postman but encountering issues when trying to make the same request from Angular 4. CORS configuration is correct as other requests are functioning p ...

How can you effectively blend Vue/Angular with other JavaScript resources to enhance your development process?

My curiosity lies in understanding how front-end javascript libraries such as Vue and Angular can seamlessly integrate with other libraries and assets. For instance, if I were to procure a website template already equipped with additional javascript, is it ...

The date format being sent by Angular to Java is incorrect, resulting in the inability to create an object in the

In my coupon system, I am experiencing an issue with the date format. The Java coupon bean has a date.sql startDate and endDate, while the Angular coupon model includes startDate:Date and endDate:Date in its constructor. However, when I display the dates o ...

Displaying images stored in Laravel backend using Angular frontend

I am facing a challenge where I need to display an image on the frontend using Angular, but the image is stored on the backend in Laravel 5.5. I have already attempted some solutions, but they have not worked. What should I do? Below is the error message ...

What is the method for referencing a subtype within an established type?

When working with React-native, I came across a component called FlatList which includes a property known as ListHeaderComponent. My question is how to specify the type of this property without having to manually copy and paste the original type. Currentl ...

Automating an Angular application using Selenium with Java

Our approach for testing our web Angular application involves using Selenium with Java. We aim to avoid XPath and instead focus on utilizing unique ids. One challenge we've encountered is the usage of generic components within our Angular app that ar ...

JavaScript - Output an undefined value of a property within a function

While the question of checking for null or undefined values has been raised before, I am encountering a unique issue. I have created a function to split a string, which works perfectly. However, when I pass a null or undefined value, the program stops. Ins ...

Issue with file uploading in Angular 9 as the uploaded file is not being added to the

I've set up a form group in the HTML of my Angular 9 app that includes an upload feature for files. The file upload works fine when calling the handleFileInput function, as I can confirm from the console log output. However, even though the file gets ...

Display a loading spinner until all child components within a Page have finished rendering in Nativescript

I need to display an activity indicator when transitioning from one page to another, but the destination page has multiple components that take time to load. I am looking for a way to detect when all child components are loaded so that I can update my vari ...

If every single item in an array satisfies a specific condition

I am working with a structure that looks like this: { documentGroup: { Id: 000 Children: [ { Id: 000 Status: 1 }, { Id: 000 Status: 2 ...

Is it possible to restrict the type of a function parameter based on other parameters provided?

type ItemX = { type: 'X', value: 'X1' | 'X2' | 'X3' }; type ItemY = { type: 'Y', value: 'Y1' | 'Y2' }; type Item = ItemX | ItemY; function processItem(item: Item) { // ... } function ...

Instructions on relocating a rectangle and capturing its coordinates globally for cropping the chosen image

I am currently a software engineering trainee, focusing on learning Angular CLI. My current project involves image cropping on a canvas, where I draw a circle when clicked. My query pertains to moving the circle with a mousedown event and stopping it upon ...

Sending print jobs to an HTTP printer from an HTTPS connection using Angular 6

Currently, I have an Angular 6 application set up with Nginx and HTTPS. However, I am facing an issue when trying to send commands to my ZPL printer for label printing. The problem lies in the fact that the printer only accepts HTTP protocol, but the brows ...

Troubleshooting problems with contenteditable and input in Firefox and Safari on Angular 5

Currently, I am in the process of creating a table with cells that are editable. However, I am facing a challenge in updating the visual and typescript code simultaneously. I have explored various alternatives but unfortunately, none of them seem to work. ...

Event listener for iframe video player click in Angular 2+

I have a video iframe that starts playing automatically when the page loads: <section> <div class="row" > <div style="padding-top: 56.25%"> <iframe src="https://players.brightcove.net...& ...