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.