web-dev-qa-db-ja.com

fullcalendar＆Angular 5

（新しい新しい編集）

Rustamは、ArshawがAngular素晴らしいモジュールを構築するのを助けました！チェックしてください。Angular 7。

https://fullcalendar.io/docs/angular

（新規編集）

FullCalendar @ Alpha Release でAngluar 5を実装しました。

以前にAngular以下にFullCalendarを実装する際に問題が発生していました。皆さんも更新が必要だと思いました。

エラーなしでAngular 5でfullcalendarを適切に実装するにはどうすればよいですか？特定のコンポーネントに実装しようとしています。次のパッケージをインストールしました。

  • jquery
  • 一瞬
  • フルカレンダー
  • フルカレンダースケジューラ

参考までに、以下の投稿は、私が解決策を見つけるのに最も近いものです。指示に従いましたが、それでも「JQueryPromise」エラーが発生します。事前にアドバイス＆感謝してください！

Callback angular jqueryイベントからの関数

package.json

 "fullcalendar": "^3.8.0",
 "fullcalendar-scheduler": "^1.9.1",
 "jquery": "^3.2.1",
 "moment": "^2.20.1",

.angular-cli.json

 "styles": [
    "styles.css",
    "../node_modules/fullcalendar/dist/fullcalendar.min.css",
    "../node_modules/fullcalendar-scheduler/dist/scheduler.min.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/moment/min/moment.min.js",
    "../node_modules/fullcalendar/dist/fullcalendar.min.js",
    "../node_modules/fullcalendar-scheduler/dist/scheduler.min.js"
  ],

main.ts

import * as jQuery from "jquery";
(window as any).$ = (window as any).jQuery = jQuery;

app.component.html

<div id='calendar'></div>

app.component.ts

import { Component } from '@angular/core';
import 'fullcalendar';
import 'fullcalendar-scheduler';
declare let $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  ngOnInit() {
    $('#calendar').fullCalendar({});
  }
}

私はすべての手順を宗教的に行ったが、まだエラーが発生している。皮肉なことに、ページを更新するとロードでき、そのエラーを回避できますが、特に「ng serve」を最初に実行したときは、それはまだ持続します

ERROR in node_modules/fullcalendar/dist/fullcalendar.d.ts(695,36): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(696,29): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(697,20): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(759,22): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(775,50): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(988,23): error TS2304: Cannot find name 'JQueryEventObject'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(1401,70): error TS2304: Cannot find name 'JQueryAjaxSettings'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(1603,50): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(1623,50): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(2588,50): error TS2304: Cannot find name 'JQueryPromise'.

このウサギの穴を下る新しい開発

新しいコンポーネント「schedule.component」を作成してそこにすべてを移動しようとしましたが、今は次のエラーが発生しています

Refused to load the font 'data:font/woff;base64,d09GRgABAAAAAGVUABEAAAAAxuQAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAABgAAAAC4AAAA0ArgC7UdQT1MAAAGwAAAQ6AAALgxKsqRTR1NVQgAAEpgAAAH3AAAELqI5y+RPUy8yAAAUkAAAAE8AAABgaGyBu2NtYXAAABTgAAABlAAAAkQkRATXY3Z0IAAAFnQAAABeAAAAugDsQf1mcGdtAAAW1AAABZcAAAvNb3/BHGdhc3AAABxsAAAACAAAAAgAAAAQZ2x5ZgAAHHQAAEApAAB3CtbiupxoZWFkAABcoAAAADYAAAA2BkubWWhoZWEAAFzYAAAAIAAAACQHFARfaG10eAAAXPgAAAI6AAAEEk4TN4Nsb2NhAABfNAAAAhIAAAISiLhpam1heHAAAGFIAAAAIAAAACACigzgbmFtZQAAYWgAAACUAAABHhQGLdJwb3N0AABh/AAAAq4AAASRk5y6n3ByZ...QxUajCCFt4p9HP4fzdSWs2XhWl5HvJazrIrFUyB0l5dpqcW10lV2wukjMLuAvyMHNiYpgPsrCVXZDKrkpll6UWkh7kABVAFVCDe7UFmxagDegA+hLHRPbqtMo7ZHCpKdT6tPGXybzo0+RXBLoPZt1tELcXxCmAAyZwYTJvdDFZKnDER44X2451rDqCyunIsRWvLSx6wnWqwPj/uX5/KuEy6DL0z6A/Fn79VihxMFJsrlAFy4DpZOcvNlMeNp+BRDLj0r+XFdRxdSNSNxiI/AL3ojKdAAB4AWPw3sFwIihiIyNjX+QGxp0cDBwMyQUbGdictkUwWDAwsDJogTgOPN4c9iz6bMos4iysHFChUDZXJnMWTSZZJrAQt9M+YQYBBh4GTgY2kEZOoJiA0z4GBxiEiDEzuGxUYewIjNjg0BGxkTnFZaMaiLeLo4GBkcWhIzkkAqQkEggceHw5HFkM2VRZJFlYebR2MP5v3cDSu5GJwWUDW9xG1hQXAFAmKZU=' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.
angulartypescriptfullcalendarfullcalendar-scheduler
12
Jose

あなたが抱えていた問題は、あなたが提起したGitHubの問題のおかげで修正されました。

npm install --save-dev @types/jqueryは、同じ問題に遭遇したため、この問題を正しく修正し、これを実行することでこの問題を解決しました（この投稿とGitHubの問題へのリンクを見つけた後）。

gitHubの修正を引用するには、「これはドキュメントで説明されています。 https://fullcalendar.io/docs/TypeScript/ "

11
Andrew Stalker

プロジェクトにjqueryタイピングが含まれていません。このコマンドを使用してそれらを追加してみてください

npm install --save-dev @types/[email protected]

この問題は、フルカレンダーの問題トラッカーで発生しました（ https://github.com/fullcalendar/fullcalendar/issues/3991 ）

0
David G.

そのため、node_modulesフォルダーの* .d.tsファイルに何か問題があるように見えます。 GitHubプロジェクトで問題を開きました

https://github.com/fullcalendar/fullcalendar/issues/3991

私は対応する問題タイプを「any」に置き換えました：

node_modules/fullcalendar/dist/fullcalendar.d.ts
node_modules/fullcalendar-scheduler/dist/scheduler.d.ts

「JQueryPromise」
'JQueryEventObject'
'JQueryAjaxSettings'

皮肉なことに、それを修正した後、「フォントのロードを拒否」の問題もなくなりました。コメントはできません。私が知っているのは、それが正常に機能していることだけです。

楽しい休日を！

0
Jose

こんにちは、古い質問ですが、これはnpm install --save-dev @types/jqueryは私には役に立たなかった。より高速なソリューションは次のとおりです。

  • ソリューションのNuGetパッケージの管理（パッケージマネージャーの視覚オプション）を開くTools>NuGet Package Manager> Manage NuGet Packages for Solution
  • 検索ボックスに入力：jquery.type
  • Jquery.TypeScript.DefinitelyTypedパッケージを見つける
  • Webプロジェクト内にインストールする
  • 解決済み

これが私と同じ状況にいる人々を助けたかもしれないと思います。

0
T3X