Encountering issues with Angular2 forms while working with JavaScriptServices/Universal

My Angular2 app was built using the JavaScriptServices starter from GitHub.

The issue I'm encountering is a runtime error when I include a form in a component.

Both FormsModule and ReactiveFormsModule are being imported.

This is how my form is structured...

<form (ngSubmit)="onSubmit()" #loginForm="ngForm" >
...
</form>

The specific error message I'm seeing is...

Exception: Call to Node module failed with error: Prerendering failed because of error: TypeError: _angular_core.InjectionToken is not a constructor at C:\XXX\ClientApp\dist\main-server.js:35055:42

What am I overlooking? My form functionality worked fine prior to utilizing the JavaScriptServices starter for server side rendering.

angularangular2-universal

Answer №1

After some troubleshooting, I managed to find the solution to my issue. As it turns out, the problem was caused by using the latest version of Angular which is not yet compatible.

By referring to a GitHub issue page (https://github.com/angular/angular/issues/13432), I discovered that reverting back to an older version of Angular resolved the issue.

Currently, I have successfully switched to the following versions and everything appears to be working fine:

"@angular/common": "2.0.2",
"@angular/compiler": "2.0.2",
"@angular/core": "2.0.2",
"@angular/forms": "2.0.2",
"@angular/http": "2.0.2",
"@angular/platform-browser": "2.0.2",
"@angular/platform-browser-dynamic": "2.0.2",
"@angular/platform-server": "2.0.2",
"@angular/router": "3.0.2",

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 should I structure my MySQL tables for efficiently storing a user's preferences in a map format?

My current project involves developing a web application that provides administrators with the ability to manage user information and access within the system. While most user details like name, email, and workID are straightforward, I am facing difficulty ...

mysqlangulartypescriptspring-boot

Populate a chart in real-time with data pulled directly from the Component

I'm completely new to Angular and I feel like I might be overlooking something important. Within my component, I have 3 variables which are populated after invoking the .subscribe method on an observable object. For example: this.interRetard = this ...

angulartypescript

Angular2 Cascading Dropdowns

When using Angular2, I am interested in creating a cascading select for the array object provided with values of xs and ys: data:Array<Object> = [ {"x":50, "ys":[ 10, 15, 20, 25, 30, 35]}, ...

angularcascadingdropdown

Modify animation trigger when mouse hovers over

I am looking to create a feature where a slide overlay appears from the bottom of a thumbnail when the user hovers over it, and retracts when the user is not hovering. animations: [ trigger('overlaySlide', [ state(&ap ...

htmlcssangulartypescript

Getting unique identifiers for documents in AngularFire2's Firestore collections

After reviewing the Angularfirestores documentation, I found that it was not well documented. I encountered an issue while trying to retrieve unique IDs for each document from my Firestore database. Below is the code snippet I am working with: private bus ...

angularangularfire2uniqueidentifier

Mapping the preselected values of multiple input fields into an array in Angular 6: A step-by-step guide

When submitting a form with input fields, I need to capture the selected values into an array format like {"userid":1,"newstatus":[1],"mygroup":[1,2,3]}. I attempted using ngmodel but encountered issues. Below is the code snippet: home.component.html & ...

htmlangulartypescript

Deliver a numerical input to the component on an equivalent hierarchical tier

I need to find a way to pass the values of the "things" array to another component on the same level in my app. The structure of my app is as follows: sidebar.component data.service body.component In the sidebar component, I have a button that triggers a ...

angularjsangulartypescript

Navigating to sub-routing module without utilizing lazy loading

I prefer to use multiple routing modules to maintain a clean and readable application structure. Currently, I have implemented lazy loading for the SubComponent, but I am exploring alternatives to avoid this. Below is the functioning code in use: The foll ...

angularrouteslazy-loadingrouterangular-routing

Combining two sets of data into one powerful tool: ngx-charts for Angular 2

After successfully creating a component chart using ngx-charts in angular 2 and pulling data from data.ts, I am now looking to reuse the same component to display a second chart with a different data set (data2.ts). Is this even possible? Can someone guide ...

javascriptangulartypescriptd3.js

Revising input value post model binding

In my scenario, I have a text input that is bound to a model property of type Date: <input type="text" [(ngModel)]="model.DateStart" ngControl="dateStart" id="dateStart" #dateStart /> The value of model.DateStart (which is of type DateTime) looks l ...

angular

What types should be used when passing a NgRx Action as a parameter to a function?

Within my Effects function, I have implemented the following code structure. I have included a few lines of code for the catchError block to ensure that: Any errors are handled by the state/store The errors are forwarded to the global error handler / Int ...

angulartypescripttypesngrx

Trying to toggle between two Angular components within the app component using a pair of buttons

Currently, I am developing an application that requires two buttons to display different nested apps. Unfortunately, I am unable to use angular routing for this particular design. These two buttons will be placed within the app.component. When Button A i ...

javascripthtmlangularprimeng

Conditions are in an angular type provider with AOT

I am facing an issue with my Angular project that is compiled using AOT. I am trying to dynamically register a ClassProvider based on certain configurations. The simplified code snippet I am currently using is below: const isMock = Math.random() > 0.5; ...

javascriptangulartypescriptdecoratorangular2-aot

The error message "ng2-test-seed cannot be found - file or directory does not exist"

I've been attempting to work with an angular2 seed project, but I'm encountering some challenges. https://github.com/juliemr/ng2-test-seed When I run the command: npm run build I encounter the following error: cp: cannot stat ‘src/{index.h ...

node.jsangularnpm

I'm having trouble getting my Ionic Angular App to start up properly. When I try to launch it, it just gets stuck on the splash screen and displays an error message saying "ReferenceError

The challenge I am facing involves developing an IOS app using ionic v7 and angular v15.2. While the app functions smoothly in the browser, upon deployment to my iPhone (iphone 13 pro, running IOS 15.6), I encounter a perplexing error message within XCode: ...

angularionic-frameworkcapacitor

Inject data into an Angular 2 template

Does anybody know of a method to pass variables to templates in Angular2? Suppose I have the following code snippet: <div *ngFor="foo in foos"> <ng-container *ngTemplateOutlet="inner"</ng-container> </div> --------------- <n ...

javascriptangular

Obtain information from a web address using Ionic framework

Hello, I am experiencing an issue with retrieving data from a URL in my Ionic application. When using @angular/http to fetch a JSON object from the URL, everything works fine in the browser when running 'ionic serve'. However, when deploying the ...

angularcordovaionic-frameworkionic3

Error encountered when attempting to retrieve token from firebase for messaging

I am currently working on implementing web push notifications using Firebase. Unfortunately, when attempting to access messaging.getToken(), I encounter an error stating "messaging is undefined." Below is the code snippet I am utilizing: private messaging ...

javascriptangulartypescriptfirebasefirebase-cloud-messaging

What could be the reason behind the material table not populating with data from the source, despite the service returning an array?

Currently, I am utilizing a mean stack in order to craft a bug tracking system. The issue arises when my express.js service returns an array of issues, which I assign to another array that functions as the dataSource for mat-table. However, despite the ar ...

angulartypescriptexpressangular-materialangular6

Navigate between tabs with ease for children

Setting up my routes has been a bit challenging. I created a listRoutes in my app-routing.module.ts with some parameters. const listRoutes: Routes = [ { path: '', component: MlsComponent, }, { path: 'vente', compon ...

angularroutes