CODEWITHSUNDEEP
javascriptangularangular2-forms
Parveen Sachdeva
Parveen Sachdeva

Reputation: 1019

Angular2 template rendering error

On running angular2 app, I'm getting below error:

zone.js:952 GET http://localhost:3000/node_modules/@angular/Forms/ 404 (Not Found)

Error: Fetch error: 404 Not Found
  Instantiating http://localhost:3000/node_modules/@angular/Forms
  Loading http://localhost:3000/Scripts/module.js
  Loading app
    at system.src.js:1479
    at ZoneDelegate.invoke (zone.js:391)
    at Zone.run (zone.js:141)
    at zone.js:831
    at ZoneDelegate.invokeTask (zone.js:424)
    at Zone.runTask (zone.js:191)
    at drainMicroTaskQueue (zone.js:595)
    at <anonymous>

I have imported the FormsModule in my module file, but still I'm facing the same issue. On changing @angular/Forms to @angular/forms, I'm getting template parse error:

    Unhandled Promise rejection: Template parse errors:
Parser Error: Unexpected token # at column 1 in [#employee of employees| employeeFilter:query] in ng:///templates/employee.html@40:12 ("

    <tbody>
        <tr [ERROR ->]*ngFor="#employee of employees| employeeFilter:query">
            <td>{{employee.userId}}</td>
   "): ng:///templates/employee.html@40:12
Parser Error: Unexpected token # at column 1 in [#employee of employees| employeeFilter:query] in ng:///templates/employee.html@40:12 ("
    <tbody>
        <tr *ngFor="#employee of employees| employeeFilter:query">
            <td>[ERROR ->]{{employee.userId}}</td>
            <td>{{employee.firstName}}</td>
            <td>{{employee.las"): ng:///templates/employee.html@41:16
Parser Error: Unexpected token # at column 1 in [#employee of employees| employeeFilter:query] in ng:///templates/employee.html@40:12 ("yee of employees| employeeFilter:query">
            <td>{{employee.userId}}</td>
            <td>[ERROR ->]{{employee.firstName}}</td>
            <td>{{employee.lastName}}</td>
            <td>{{employee.F"): ng:///templates/employee.html@42:16
Parser Error: Unexpected token # at column 1 in [#employee of employees| employeeFilter:query] in ng:///templates/employee.html@40:12 ("         <td>{{employee.userId}}</td>
            <td>{{employee.firstName}}</td>
            <td>[ERROR ->]{{employee.lastName}}</td>
            <td>{{employee.FullName}}</td>
            <td>{{employee.em"): ng:///templates/employee.html@43:16
Parser Error: Unexpected token # at column 1 in [#employee of employees| employeeFilter:query] in ng:///templates/employee.html@40:12 ("       <td>{{employee.firstName}}</td>
            <td>{{employee.lastName}}</td>
            <td>[ERROR ->]{{employee.FullName}}</td>
            <td>{{employee.employeeCode}}</td>
            <td>{{employe"): ng:///templates/employee.html@44:16
Parser Error: Unexpected token # at column 1 in [#employee of employees| employeeFilter:query] in ng:///templates/employee.html@40:12 ("        <td>{{employee.lastName}}</td>
            <td>{{employee.FullName}}</td>
            <td>[ERROR ->]{{employee.employeeCode}}</td>
            <td>{{employee.jobTitle}}</td>
            <td>{{employe"): ng:///templates/employee.html@45:16
Parser Error: Unexpected token # at column 1 in [#employee of employees| employeeFilter:query] in ng:///templates/employee.html@40:12 ("    <td>{{employee.FullName}}</td>
            <td>{{employee.employeeCode}}</td>
            <td>[ERROR ->]{{employee.jobTitle}}</td>
            <td>{{employee.emailAddress}}</td>
        </tr>

Upvotes: 2

Views: 473

Answers (1)

Pengyy
Pengyy

Reputation: 38191

According to error message:

http://localhost:3000/node_modules/@angular/Forms

You have write the wrong package name for @angular/forms to @angular/Forms, just correct the package name will solve the issue.

*ngFor="#employee of employees| employeeFilter:query" is old version syntax for Angular, change it to *ngFor=" let employee of employees| employeeFilter:query".

Upvotes: 2

Related Questions