Monday, June 11, 2018

ASP.Net Core 2.1 with Angular Template - Cannot update Bootstrap

Hi,

If I try to update bootstrap from "bootstrap": "^3.3.7" to "bootstrap": "^4.1.1", then all the routing in angular breaks. It says "Cannot GET /" for every url query type.

I want to update it because all of the code snippets in the bootstrap documentation currently are not working. I want to use the navbar component but it looks like a mess and I thought this was because the bootstrap documentation examples use bootstrap 4.

Is there a safe way to update bootstrap using the ASP.Net Core 2.1 angular template? I cannot find any other error message so I'm not sure why exactly it does not work.

Has anyone else ran into this problem before?

EDIT: Found an error but not sure how to fix it:

webpack: Failed to compile.

Microsoft.AspNetCore.SpaServices:Error: ERROR in ./node_modules/bootstrap/dist/css/bootstrap.min.css

Module build failed: BrowserslistError: Unknown browser query \>= 1%``

at error (F:\VisualStudio_WorkSpace\MyProject\ClientApp\node_modules\browserslist\index.js:37:11)

at F:\VisualStudio_WorkSpace\MyProject\ClientApp\node_modules\browserslist\index.js:222:9

at Array.forEach (<anonymous>)

at browserslist (F:\VisualStudio_WorkSpace\MyProject\ClientApp\node_modules\browserslist\index.js:196:13)

at Browsers.parse (F:\VisualStudio_WorkSpace\MyProject\ClientApp\node_modules\autoprefixer\lib\browsers.js:44:14)

at new Browsers (F:\VisualStudio_WorkSpace\MyProject\ClientApp\node_modules\autoprefixer\lib\browsers.js:39:28)

at loadPrefixes (F:\VisualStudio_WorkSpace\MyProject\ClientApp\node_modules\autoprefixer\lib\autoprefixer.js:56:18)

at plugin (F:\VisualStudio_WorkSpace\MyProject\ClientApp\node_modules\autoprefixer\lib\autoprefixer.js:62:18)

at LazyResult.run(F:\VisualStudio_WorkSpace\MyProject\ClientApp\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:277:20)

at LazyResult.asyncTick (F:\VisualStudio_WorkSpace\MyProject\ClientApp\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:192:32)

at LazyResult.asyncTick (F:\VisualStudio_WorkSpace\MyProject\ClientApp\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:204:22)

at LazyResult.asyncTick (F:\VisualStudio_WorkSpace\MyProject\ClientApp\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:204:22)

at processing.Promise.then._this2.processed (F:\VisualStudio_WorkSpace\MyProject\ClientApp\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:231:20)

at new Promise (<anonymous>)

at LazyResult.async (F:\VisualStudio_WorkSpace\MyProject\ClientApp\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:228:27)

at LazyResult.then (F:\VisualStudio_WorkSpace\MyProject\ClientApp\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:134:21)

ASP.Net Core 2.1 with Angular Template - Cannot update Bootstrap Click here
  • Blogger Comment
  • Facebook Comment

0 comments:

Post a Comment

The webdev Team