单页应用程序Angular + .Net Core上的Bootstrap 4

Question

有人试图用它来申请

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/

这个命令使用bootstrap 3创建一个angular + .net核心项目.我正在尝试使用bootstrap 4.

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

有谁知道如何将bootstrap 4放在bootstrap 3上？最终使用javascript插件jquery和popper.

这将非常有帮助,谢谢!

Answer 1

为了清楚起见,这对我有用.

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. 构建解决方案,之后您应该完全升级

几个笔记:

• 这需要你全局安装node/npm和webpack(我想!)
• 有几次我在命令提示符下看到来自npm/webpack的错误.发生这种情况时,我只是重新运行失败的命令,并在成功后继续执行.
• 如果您正在使用源代码管理,您会注意到npm-shrinkwrap.json已经过大量修改.我相信这与npm的升级版本有关,但我不是专家.这里有一些关于这个主题的进一步阅读npm-shrinkwrap.json和package-lock.json有什么区别？

我还在GitHub上放了一个模板的工作样本https://github.com/alterius/AngularSPABootstrap4