单页应用程序Angular + .Net Core上的Bootstrap 4 [英] Bootstrap 4 on Single Page Application Angular + .Net Core

问题描述

任何人都试图用

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
dotnet new angular

?像在此示例中一样 https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/

此命令使用引导程序3创建一个angular + .net核心项目. 我正尝试放入Bootstrap 4.

This command makes an angular + .net core project with bootstrap 3. I'm trying to put bootstrap 4 instead.

我试图将bootstrap 4 css放在vendor.css(bootstrap 3所在的位置)上，但是没有成功.

I tried to put bootstrap 4 css over vendor.css (where bootstrap 3 is located) but without succes.

有人知道如何将bootstrap 4放在bootstrap 3上吗?最后是使用javascript插件jquery和popper.

Does anyone know how to put bootstrap 4 over bootstrap 3?, eventually with the javascript plugins jquery and popper.

这将非常有帮助，谢谢！

It would be very helpful, thanks!

推荐答案

为清楚起见，这对我有用.

For the sake of clarity, this is what worked for me.

1. 在Visual Studio中打开Angular SPA解决方案
2. 打开package.json并将引导程序条目更新为"bootstrap": "4.0.0"或您需要的任何版本
3. 在Visual Studio中关闭解决方案
4. 打开项目文件夹并删除node_modules文件夹
5. 打开项目文件夹的命令提示符
6. 在命令提示符下运行npm install popper.js --save
7. 在命令提示符下运行npm install
8. 在命令提示符下运行webpack --config webpack.config.vendor.js
9. 在Visual Studio中打开解决方案
10. 构建解决方案，之后应完全升级

1. Open your Angular SPA solution in Visual Studio
2. Open package.json and update the bootstrap entry to "bootstrap": "4.0.0", or whichever version you require
3. Close the solution in Visual Studio
4. Open the project folder and delete the node_modules folder
5. Open up a command prompt for the project folder
6. Run npm install popper.js --save in command prompt
7. Run npm install in command prompt
8. Run webpack --config webpack.config.vendor.js in command prompt
9. Open the solution in Visual Studio
10. Build the solution, after which you should be fully upgraded

一些注意事项:

• 这要求您全局安装了node/npm和webpack(我认为！)
• 有几次我在命令提示符下看到npm/webpack的错误.发生这种情况时，我只是重新运行了失败的命令，并在命令成功后继续执行.
• 如果您使用的是源代码管理，您会注意到npm-shrinkwrap.json已被大量修改.我相信这与npm的升级版本有关，但我不是专家.这是有关此主题的进一步阅读什么pm-shrinkwrap.json和package-lock.json和有什么不一样?

• This requires that you have node/npm and webpack installed globally (I think!)
• On a couple of occasions I saw errors from npm/webpack in command prompt. When this occurred I just re-ran the failing command and continued once it was successful.
• If you're using source control, you'll notice that the npm-shrinkwrap.json has been heavily modified. I believe this is to do with upgraded versions of npm, but I'm no expert. Here's some further reading on the subject What is the difference between npm-shrinkwrap.json and package-lock.json?

我还在GitHub上将模板的工作示例汇总在一起 https://github.com/alterius/AngularSPABootstrap4

I've also put together a working sample of the template on GitHub here https://github.com/alterius/AngularSPABootstrap4

这篇关于单页应用程序Angular + .Net Core上的Bootstrap 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！