Angular项目编译报错：TypeError: jit_nodeValue_7(...).$any is not a function
2026-5-15
解决 Angular 编译错误：
ERROR TypeError: jit_nodeValue_7(...).$any is not a function 我之前处理过好几次类似的问题，这个错误的核心原因其实很明确：$any() 是 Angular 6 及以上版本才引入的模板类型断言语法，但你的项目使用的是 Angular 5.x 版本，版本不兼容直接导致了这个报错。你试过重装依赖、更新版本没解决，大概率是没找对版本匹配的方向，下面给你两个针对性的解决方案：
方案 1：升级 Angular 到 6+ 版本（推荐长期解决）
你的项目依赖里 Angular 核心包都是 5.x 版本，要支持 $any() 必须升级到 Angular 6 及以上。升级时需要注意第三方依赖的兼容性：
- 先升级 Angular 核心套件和 CLI：
ng update @angular/core@6 @angular/cli@6 - 同步升级第三方依赖：
- 比如
@angular/material需要升级到 6.x 版本（和 Angular 版本严格匹配） @agm/core可以升级到支持 Angular 6 的版本（比如^1.1.0）- 其他库如
ngx-chips、ng2-select也要确认兼容 Angular 6 的版本，必要时替换为替代库
- 比如
- 升级 TypeScript 到 2.7.x（Angular 6 要求 TypeScript 2.7+）：
npm install typescript@2.7.2 --save-dev - 清理缓存并重装依赖：
rm -rf node_modules package-lock.json npm install
方案 2：移除所有 $any() 语法（临时快速修复）
如果暂时不想升级 Angular，需要找到项目中所有使用 $any() 的代码并替换：
- 全局搜索项目中的
$any关键词，定位到使用该语法的模板或组件（你提供的 LoginComponent 模板里没有，但可能在其他组件或第三方库的模板中） - 替换方式：
- 如果是模板里的
$any(obj).property，可以改为obj['property']绕过类型检查 - 如果是组件类中的代码，直接用类型断言（比如
(obj as any).property）
- 如果是模板里的
- 检查第三方依赖：如果是某个库内部使用了
$any，需要降级该库到适配 Angular 5 的版本，比如查看该库的 npm 历史版本，找到支持 Angular 5 的最后一个版本安装
你的项目配置参考（方便排查）
package.json 依赖配置
"dependencies": { "@agm/core": "^1.0.0-beta.0", "@angular/animations": "^4.3.1", "@angular/cdk": "^5.1.0", "@angular/common": "^5.0.0", "@angular/compiler": "^5.0.0", "@angular/core": "^5.0.0", "@angular/forms": "^5.2.1", "@angular/http": "^5.0.0", "@angular/material": "^5.1.0", "@angular/platform-browser": "^5.2.1", "@angular/platform-browser-dynamic": "^5.0.0", "@angular/platform-server": "^5.0.0", "@angular/router": "^5.0.0", "angular-form-validator": "^1.6.2", "angular-material-source": "github:angular/material", "angular2-material-datepicker": "^0.5.0", "animate.css": "^3.5.2", "arrive": "^2.3.1", "bootstrap": "^3.3.5", "bootstrap-material-design": "^0.5.10", "bootstrap-notify": "^3.1.3", "bootstrap-select": "^1.12.2", "bootstrap-tagsinput": "^0.7.1", "chartist": "^0.9.4", "chartist-plugin-zoom": "^0.4.0", "core-js": "^2.4.1", "datatables": "^1.10.12", "datatables.net-bs": "^1.10.12", "datatables.net-responsive": "^2.1.1", "eonasdan-bootstrap-datetimepicker": "^4.17.47", "fullcalendar": "^3.4.0", "googleapis": "^19.0.0", "hammerjs": "^2.0.8", "jasny-bootstrap": "^3.1.3", "jquery": "^1.12.4", "jquery-validation": "^1.17.0", "jvectormap": "^2.0.4", "moment": "^2.18.1", "ng2-nouislider": "^1.6.1", "ng2-select": "^1.2.0", "ngx-chips": "^1.4.6", "nouislider": "^9.2.0", "perfect-scrollbar": "^1.2.0", "rxjs": "^5.5.2", "sweetalert2": "^7.0.5", "twitter-bootstrap-wizard": "^1.2.0", "typescript": "^2.4.2", "validate": "^3.0.1", "web-animations-js": "^2.3.1", "zone.js": "^0.8.4" }
LoginComponent 组件代码
import { Component, OnInit, ElementRef } from '@angular/core'; import { userLogin } from 'app/entities'; import { UserService } from '../user.service'; declare var $: any; @Component({ selector: 'app-login-cmp', templateUrl: './login.component.html' }) export class LoginComponent implements OnInit { private toggleButton: any; private sidebarVisible: boolean; private nativeElement: Node; constructor(private element: ElementRef, private userService: UserService) { this.nativeElement = element.nativeElement; this.sidebarVisible = false; } public user: userLogin; ngOnInit() { this.user = {username:'',downtown:'tunja',password:''}; this.userService.loginUser(this.user); var navbar: HTMLElement = this.element.nativeElement; this.toggleButton = navbar.getElementsByClassName('navbar-toggle')[0]; setTimeout(function () { // after 1000 ms we add the class animated to the login/register card $('.card').removeClass('card-hidden'); }, 700); } sidebarToggle() { var toggleButton = this.toggleButton; var body = document.getElementsByTagName('body')[0]; var sidebar = document.getElementsByClassName('navbar-collapse')[0]; if (this.sidebarVisible == false) { setTimeout(function () { toggleButton.classList.add('toggled'); }, 500); body.classList.add('nav-open'); this.sidebarVisible = true; } else { this.toggleButton.classList.remove('toggled'); this.sidebarVisible = false; body.classList.remove('nav-open'); } } //Funciones onSubmit() { this.userService.loginUser(this.user); } }
HTML 模板
<div class="wrapper wrapper-full-page"> <div class="full-page login-page" filter-color="black"> <!-- you can change the color of the filter page using: data-color="blue | purple | green | orange | red | rose " --> <br> <br> <br> <br> <br> <div class="content"> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6 col-md-offset-4 col-sm-offset-3"> <form method="#" action="#" #loginForm="ngForm" (ngSubmit)="onSubmit()"> <div class="card card-login card-hidden"> <div class="card-header text-center" data-background-color="rose"> <h4 class="card-title">Login</h4> </div> <div class="card-content"> <div class="input-group"> <span class="input-group-addon"> <i class="material-icons">email</i> </span> <div class="form-group label-floating"> <label class="control-label">Usuario</label> <input type="text" class="form-control" required [(ngModel)]="user.username" name="username"> </div> </div> <div class="input-group"> <span class="input-group-addon"> <i class="material-icons">lock_outline</i> </span> <div class="form-group label-floating"> <label class="control-label">Password</label> <input type="password" class="form-control" required [(ngModel)]="user.password" name="password"> </div> </div> </div> <div class="footer text-center"> <button type="submit" class="btn btn-rose btn-simple btn-wd btn-lg">Iniciar sesion</button> </div> </div> </form> </div> </div> </div> </div> <footer class="footer"> <div class="container"> <p class="copyright pull-right"> © {{test | date: 'yyyy'}} <a href="https://www.Zuama.com">Zuama</a> </p> </div> </footer> <div class="full-page-background" style="background-image: url(../../../assets/img/login.jpeg) "></div> </div> </div>
内容的提问来源于stack exchange，提问作者dasuma
相关产品推荐
相关产品推荐
