Angular 8 中的“$(...).summernote 不是函数”错误

Posted

技术标签:

【中文标题】Angular 8 中的“$(...).summernote 不是函数”错误【英文标题】:"$(...).summernote is not a function" error in Angular 8 【发布时间】:2020-02-28 14:03:35 【问题描述】:

我正在创建一个组件以在我的 Angular 应用程序中使用 Summernote,但出现“$(...).summernote 不是函数”错误。 加载页面后正确加载summernote尚未加载。但我真的不知道该怎么做才能解决这个问题。

组件中的代码:

import  Component,OnInit,ElementRef  from '@angular/core';
declare var $: any;

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)
export class AppComponent   
constructor( private elementRef:ElementRef)

ngOnInit()


 ngAfterViewInit()
  console.log("after view init")

  $(document).ready(function()
    $('#summernote').summernote();
  )
 

angular.json:

    "assets": [
        "src/assets",
        "src/manifest.json",
        "src/icons"
    ],
    "styles": [
        "src/styles.css",
        "node_modules/bootstrap/dist/css/bootstrap.min.css",
        "node_modules/summernote/dist/summernote.css"
    ],
    "scripts": [
        "node_modules/summernote/dist/summernote.js",
        "node_modules/jquery/dist/jquery.js"
    ]
,

【问题讨论】:

【参考方案1】:

加载summernote库 jQuery库之后:

错误

"scripts": [
    "node_modules/summernote/dist/summernote.js",
    "node_modules/jquery/dist/jquery.js"
]

更好

"scripts": [
    "node_modules/jquery/dist/jquery.js"
    "node_modules/summernote/dist/summernote.js",
]

【讨论】:

看起来这是一个“俄罗斯娃娃”问题。解决一个问题,举起娃娃,然后找到另一个问题。 这很有趣,我花了很多时间来寻找解决这个简单问题的方法,但它仍然存在。 ?

以上是关于Angular 8 中的“$(...).summernote 不是函数”错误的主要内容,如果未能解决你的问题,请参考以下文章

Angular 6 Docker Build - Angular 编译器中的错误需要 TypeScript >=2.7.2 和 <2.8.0,但找到的是 2.8.3

根据Angular 8中的RouterURL更改样式

Angular 8 中的“$(...).summernote 不是函数”错误

遍历Angular 8中的对象键[重复]

Safari 录制的 Angular 8 中的视频加速问题

如何在 Angular 8 和 Angular 材料中单击 sidenav 中的菜单时在侧栏旁边显示我的组件