ASP.NET Core Angular Jquery Bootstrap Klasse Dropdown-Toggle funktioniert nicht

Question

Ich habe eine App in ASP.NET Core + Angular. Einfachste App, die in VS Code mit Yeoman konfiguriert wurde.

Soweit ich weiß, gibt es ein altes Problem mit Bootstrap Dropdown-toggle-Klasse, die nicht funktioniert (Menü wird nicht umgeschaltet), wenn der jquery Teil nach dem Bootstrap-Teil geladen wird.

Soweit ich verstehe, sollte das kein Problem mit Webpack Bundle und Laufzeitausführung sein.

Wie auch immer, ich habe Stunden damit verbracht, es zum Laufen zu bringen, und ich hatte keine Optionen mehr, was sonst noch versucht werden kann. Ist jemand anderes auf ein ähnliches Problem gestoßen? Vielen Dank.

Also zuerst dachte ich, es war, weil die vendor.js nach dem ASP-Prerender-Modul geladen ist, also änderte ich die Reihenfolge, aber das hilft nicht. So sieht die View jetzt aus.

@{ 
    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> 
} 

Bevor die Vendor.js nach dem App-Tag war. Das hat aber nicht wirklich etwas bewirkt.

Nun befinden sich natürlich sowohl Bootstrap- als auch Jquery-Ordner und Inhalte im Ordner node_modules und werden auf verschiedene Arten referenziert (ich habe versucht, die Reihenfolge in der package.json zu ändern), so wie die package.json aussieht jetzt.

"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" 
    } 
} 

Ich habe auch versucht, die Bibliotheken in der .angular-cli.json Referenzierung (tatsächlich auf diese Weise es in meinem anderen Projekt dazu beigetragen, die nur Winkel keine asp war), so dass Sie ist dort unter dem Scripts-Tag sehen können eine Referenz

"$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": {} 
} 

I dotnet Uhr laufen kompilieren, habe ich mit beiden Produktions- und Entwicklungsumgebungen. Um die Wahrheit zu sagen, glaube ich, dass ich jetzt so viele Möglichkeiten ausprobiert habe, dass ich nicht wirklich verstehe, was vor sich geht.

Answer 1

Nun,

alles, was Sie tun musste, war

import 'bootstrap'; 

an der Spitze der boot-client.ts hinzufügen