ASP.NET Core Angular Jquery Bootstrap类下拉菜单无效

我在ASP.NET Core + Angular中有一个应用程序。最简单的应用程序配置在VS代码脚手架与Yeoman。ASP.NET Core Angular Jquery Bootstrap类下拉菜单无效

据我所知，Bootstrap下拉切换类有一个老问题，如果jquery部分在引导部分之后加载，那么这将不起作用（菜单不会切换）。

据我所知，不应该是webpack包和运行时执行的问题。

无论如何，我花了几个小时试图让它工作，并完全没有什么可以尝试的选项。有没有人遇到类似的问题？谢谢。

所以首先我认为是因为vendor.js加载在asp-prerender-module之后，所以我改变了顺序但是没有帮助。这是View现在的样子。

@{ 
    ViewData["Title"] = "Home Page"; 
} 
<script src="~/dist/vendor.js" asp-append-version="true"></script> 
<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app> 


@section scripts { 
<script src="~/dist/main-client.js" asp-append-version="true"></script> 
}

在vendor.js位于应用程序标记之前之前。然而那并没有真正做任何事情。

现在很明显，引导程序和jquery文件夹和内容都在node_modules文件夹中，并以各种可能的方式引用（我尝试更改package.json中的顺序），因此以下是package.json的外观现在。

"name": "WebApplicationBasic", 
    "version": "0.0.0", 
    "dependencies": { 
    "@angular/animations": "4.1.2", 
    "@angular/common": "4.1.2", 
    "@angular/compiler": "4.1.2", 
    "@angular/core": "4.1.2", 
    "@angular/forms": "4.1.2", 
    "@angular/http": "4.1.2", 
    "@angular/platform-browser": "4.1.2", 
    "@angular/platform-browser-dynamic": "4.1.2", 
    "@angular/platform-server": "4.1.2", 
    "@angular/router": "4.1.2", 
    "@types/node": "7.0.18", 
    "angular2-template-loader": "0.6.2", 
    "aspnet-prerendering": "^2.0.5", 
    "aspnet-webpack": "^1.0.29", 
    "awesome-typescript-loader": "3.1.3", 
    "bootstrap": "3.3.7", 
    "css": "2.2.1", 
    "css-loader": "0.28.1", 
    "es6-shim": "0.35.3", 
    "event-source-polyfill": "0.0.9", 
    "expose-loader": "0.7.3", 
    "extract-text-webpack-plugin": "2.1.0", 
    "file-loader": "0.11.1", 
    "html-loader": "0.4.5", 
    "isomorphic-fetch": "2.2.1", 
    "jquery": "3.2.1", 
    "json-loader": "0.5.4", 
    "preboot": "4.5.2", 
    "raw-loader": "0.5.1", 
    "reflect-metadata": "0.1.10", 
    "rxjs": "5.4.0", 
    "style-loader": "0.17.0", 
    "to-string-loader": "1.1.5", 
    "typescript": "2.3.2", 
    "url-loader": "0.5.8", 
    "webpack": "2.5.1", 
    "webpack-hot-middleware": "2.18.0", 
    "webpack-merge": "4.1.0", 
    "zone.js": "0.8.10" 
    } 
}

我也曾尝试引用了.angular-cli.json库（实际上这种方式，在我的其他项目，该项目是仅有的两个角没有ASP帮助），这样你就可以在脚本标签下看到有参考

"$schema": "./node_modules/@angular/cli/lib/config/schema.json", 
"project": { 
    "name": "myapp" 
}, 
"apps": [ 
    { 
    "root": "ClientApp", 
    "outDir": "dist", 
    "assets": [ 
     "assets", 
     "favicon.ico" 
    ], 
    "index": "index.html", 
    "main": "main.ts", 
    "polyfills": "polyfills.ts", 
    "test": "test.ts", 
    "tsconfig": "tsconfig.app.json", 
    "testTsconfig": "tsconfig.spec.json", 
    "prefix": "app", 
    "styles": [ 
     "styles.css" 
    ], 
    "scripts": [ 
     ".././node_modules/jquery/dist/jquery.min.js", 
     ".././node_modules/bootstrap/dist/js/bootstrap.js" 
    ], 
    "environmentSource": "environments/environment.ts", 
    "environments": { 
     "dev": "environments/environment.ts", 
     "prod": "environments/environment.prod.ts" 
    } 
    } 
], 
"e2e": { 
    "protractor": { 
    "config": "./protractor.conf.js" 
    } 
}, 
"lint": [ 
    { 
    "project": "src/tsconfig.app.json", 
    "exclude": "**/node_modules/**" 
    }, 
    { 
    "project": "src/tsconfig.spec.json", 
    "exclude": "**/node_modules/**" 
    }, 
    { 
    "project": "e2e/tsconfig.e2e.json", 
    "exclude": "**/node_modules/**" 
    } 
], 
"test": { 
    "karma": { 
    "config": "./karma.conf.js" 
    } 
}, 
"defaults": { 
    "styleExt": "css", 
    "component": {} 
}

我使用dotnet watch进行编译运行，我尝试了生产环境和开发环境。说实话，我想我现在已经尝试了很多选择，以至于我不了解发生了什么。

来源

2017-08-16 Yuri Zolotarev

我们不能真正帮助没有看到你的代码，不过，我可以保证在jQuery之前加载任何与Bootstrap相关的东西将成为BS依赖jQ的一个问题。 –

谢谢。我现在会用一些代码更新这个问题。 –

我添加了一些代码和完整的故事，我已经尝试过dooing，也许这可以澄清一些东西。 –

好，

所有你需要做的就是添加

import 'bootstrap';

在启动client.ts顶部

来源

2017-08-16 11:29:42

ASP.NET Core Angular Jquery Bootstrap类下拉菜单无效

回答

相关问题