Question

我正在编写一个角度2（v2.1.1）的网络应用程序，它将使用名为ng2-datetime（v1.2.1）的插件。我还需要集成第三方requirejs（v2.1.15）web-app。我通过angular-cli生成了我的angular2应用程序（使用webpack进行模块绑定）。

ng2-datetime具有以下依赖关系：

Bootstrap3（仅限CSS）
jQuery 2+（支持v3）
Bootstrap-datepicker (JS+CSS)

当我集成bootstrap-datepicker.js（在angular-cli.json中）并使用requirejs（index.html作为脚本标记）时，我收到以下错误：Mismatched anonymous define() module...

我从未对requirejs做过什么，我在docs中看到了一些内容，但我不知道如何修复它。我不希望requirejs使用bootstrap-datepicker.js，我该如何解决这个问题。

注意一个干净的angular2项目，通过angular-cli生成，requirejs和jquery只是没有问题。但是，只要我为bootstrap-datepicker导入脚本，它就会爆炸。 jQuery可以独立运行。

角cli.json

{
"project": {
    "version": "1.0.0-beta.19-3",
    "name": "ng2-qlik"
},
"apps": [
    {
        "root": "src",
        "outDir": "dist",
        "assets": [
            "assets",
            "favicon.ico"
        ],
        "index": "index.html",
        "main": "main.ts",
        "test": "test.ts",
        "tsconfig": "tsconfig.json",
        "prefix": "app",
        "mobile": false,
        "styles": [
            "../node_modules/bootstrap/dist/css/bootstrap.css",
            "../node_modules/ng2-datetime/src/vendor/bootstrap-datepicker/bootstrap-datepicker3.min.css",
            "styles.css"
        ],
        "scripts": [
            "../node_modules/jquery/dist/jquery.js",
            "../node_modules/ng2-datetime/src/vendor/bootstrap-datepicker/bootstrap-datepicker.min.js"
        ],
        "environments": {
            "source": "environments/environment.ts",
            "dev": "environments/environment.ts",
            "prod": "environments/environment.prod.ts"
        }
    }
],
"addons": [],
"packages": [],
"e2e": {
    "protractor": {
        "config": "./protractor.conf.js"
    }
},
"test": {
    "karma": {
        "config": "./karma.conf.js"
    }
},
"defaults": {
    "styleExt": "css",
    "prefixInterfaces": false,
    "inline": {
        "style": false,
        "template": false
    },
    "spec": {
        "class": false,
        "component": true,
        "directive": true,
        "module": false,
        "pipe": true,
        "service": true
    }
}
}

的index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ng2Qlik</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="https://playground.qlik.com/resources/autogenerated/qlik-styles.css">
    <script src="https://playground.qlik.com/resources/assets/external/requirejs/require.js"></script>

</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>

app.component.ts

import {Component, OnInit, AfterViewInit} from '@angular/core';
import {Observable} from "rxjs";
import * as moment from "moment/moment";
declare var jQuery: any;

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit{
    selection$ = Observable.fromEvent(document, "selectionEvent");
    dateTest1: Date;

    ngOnInit(): void {
        this.selection$.subscribe((event:MouseEvent) => console.log("Observer", event.detail));

        this.dateTest1 = moment().toDate();
    }

    ngAfterViewInit(): void {
        let text = jQuery(".dateTest1").text();

        jQuery(".dateTest2").text(text);
    }
}

app.component.html

<span class="dateTest1">{{dateTest1}}</span>
<span class="dateTest2"></span>
<br />

<datetime [(ngModel)]="dateTest1" [timepicker]="false"></datetime>

RequireJS，Angular 2和自定义jquery插件

0 个答案: