ASP.NET Core Angular Jquery Bootstrap class dropdown-toggle doesn't work

Question

I have an app in ASP.NET Core + Angular. Simplest app configured in VS Code scaffolded with Yeoman.

As far as I know there is an old issue with Bootstrap dropdown-toggle class that won't work (menu won't toggle) if the jquery part is loaded after the bootstrap part.

As far as I understand that should not be an issue with webpack bundle and runtime execution.

Anyway I have spent hours trying to get it to work and totally ran out of options of what else can be tried. Has anyone else come across a similar issue? Thank you.

So first I thought it was because the vendor.js is loaded after the asp-prerender-module so I changed the order but that doesn't help. Here is how the View looks now.

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

Before the vendor.js was after the app tag. However that didn't really do anything.

Now obviously both bootstrap and jquery folders and contents are in the node_modules folder and are referenced in various possible ways (I tried changing the order in the package.json) as well, so here is how the package.json looks like now.

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

I have also tried referencing the libraries in the .angular-cli.json (actually this way it helped in my other project which was only angular no asp), so you can see under the scripts tag there is a reference

"$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 compile using dotnet watch run, I tried both Production and Development environments. To say the truth I think I have tried so many options now that I don't really understand what is going on anymore.

We can't really help without seeing your code, however I can guarantee that loading anything Bootstrap related before jQuery will be an issue as BS relies on jQ. — Rory McCrossan
– Rory McCrossan, Commented Aug 16, 2017 at 10:42
I added some code and full story of what I have tried dooing already, maybe that can clarify something. — Yuri Zolotarev
– Yuri Zolotarev, Commented Aug 16, 2017 at 11:19

Yuri Zolotarev · Accepted Answer · 2017-08-16 11:29:42Z

1

Well,

all you had to do was add

import 'bootstrap';

at the top of boot-client.ts

answered Aug 16, 2017 at 11:29

Yuri Zolotarev

7419 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ASP.NET Core Angular Jquery Bootstrap class dropdown-toggle doesn't work

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related