ASP.NET Core + Angularのアプリがあります。 YeomanとスキャフォールドされたVSコードで設定された最もシンプルなアプリ。ASP.NET Core Angular Jquery 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がappタグの後にあった。しかし、それは本当に何もしませんでした。
明らかに、bootstrapと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 runを使用してコンパイルしましたが、私は実働環境と開発環境の両方を試しました。本当のことを言うと、私は今何が起こっているのか分かりません。
の上部に
を追加しましたBSがjQに依存しているため、jQueryの前に関連するブートストラップをロードすることが問題となることを保証します。 –
ありがとうございます。今私はいくつかのコードで質問を更新します。 –
私はいくつかのコードを追加し、私はすでに何かをしようとしたことの完全な話を、おそらく何かを明確にすることができます。 –