javascript - Angular2模板渲染错误

Question

在运行 angular2 应用程序时，出现以下错误:

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>

我已经在模块文件中导入了 FormsModule ，但我仍然面临同样的问题。将 @Angular/Forms 更改为 @Angular/forms 时，我收到模板解析错误:

    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>

Answer 1

根据错误信息:

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

您将@angular/forms的包名写错了@angular/Forms，只需更正包名即可解决问题。

---

*ngFor="#employee ofEmployees|employeeFilter:query" 是 Angular 的旧版本语法，将其更改为 *ngFor="letemployee ofemployees|employeeFilter:query".