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

2024-04-09

任何人试图提出申请

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/ https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/

此命令使用 bootstrap 3 创建 Angular + .net core 项目。 我正在尝试使用 bootstrap 4 来代替。

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

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

这将非常有帮助,谢谢!


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

  1. 在 Visual Studio 中打开 Angular SPA 解决方案
  2. Open package.json并将引导程序条目更新为"bootstrap": "4.0.0",或您需要的任何版本
  3. 在 Visual Studio 中关闭解决方案
  4. 打开项目文件夹并删除node_modules folder
  5. 打开项目文件夹的命令提示符
  6. Run npm install popper.js --save在命令提示符下
  7. Run npm install在命令提示符下
  8. Run 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 有什么区别? https://stackoverflow.com/questions/44258235/what-is-the-difference-between-npm-shrinkwrap-json-and-package-lock-json

我还在 GitHub 上整理了模板的工作示例(此处)https://github.com/alterius/AngularSPABootstrap4 https://github.com/alterius/AngularSPABootstrap4

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

单页应用程序 Angular + .Net Core 上的 Bootstrap 4 的相关文章

随机推荐

  • RestAssured 使用 foreach 循环解析 Json 数组响应

    我收到 RestAssured 的回复 它是一个 JsonArray 看起来类似于下面的代码 id 1 applicationId ABC id 2 applicationId CDE id 3 applicationId XYZ 我使用代
  • Python 无法安装模块 spaCy

    我是 python 新手 遇到了一个无法解决的问题 我想在 python 中安装和使用 spacy 包 因此我打开cmd并运行 pip install spacy 安装依赖项时 我收到一条错误消息 命令 c users xxx appdat
  • 如何将特定的变更集版本视为相对于最新版本的更改?

    我回滚了一个变更集 现在我需要检查使用 实际 待定更改回滚的变更集 就像一切都在提交更改之前一样 当我获得带有文件覆盖的特定版本时 我在挂起的更改窗口中看不到任何内容 我怎样才能得到我需要的状态 是否可以 执行 获取特定版本 后 您需要手动
  • postgres 中的 @> 运算符有什么作用?

    我在 postgres 中遇到了一个查询here http johanndutoit net searching in a radius using postgres 它使用 gt 地球物体上的操作员 我到处搜索过 但对这个运算符的含义一无
  • C++重载运算符<<和运算符>>

    class Book string title int category public Book const string abook int num string getTitle const int getCategory const
  • LinearLayout 和 RecyclerView 的截图

    我在它下面有一个 LinearLayout 和一个 RecyclerView 在Google上搜索 我找到了一些对RecyclerView进行截图的代码 说实话 我无法理解它是如何工作的 这是代码 public static Bitmap
  • C++ 定义类成员结构并在成员函数中返回它

    我的目标是这样的课程 class UserInformation public userInfo getInfo int userId private struct userInfo int repu quesCount ansCount
  • 在 R 中使用 ifelse

    我正在尝试在 R 中编写以下语句 if and ifelse 样本数据是试验数据 x y 和 z 是试验的列 需要编码的语句 if x gt 0 if y gt 0 l 2 else l 5 if z gt 0 m l 2 else m 5
  • 如何在管理控制台中打开所选对象的属性对话框?

    我正在寻找为特定 Windows 对象打开默认属性对话框的可能性 例如 services msc 中特定服务的属性对话 taskschd msc 中特定计划任务的属性对话 etc 我不想与该对话交互或更改任何属性 我只想打开它们 让用户直接
  • 当 tsconfig.json 位于项目中时,保存时的 Typescript 编译不起作用

    当我保存时 我无法使 Visual Studio 将打字稿编译为 js 我有一个xproj 带有net框架的asp net core 适用于 Visual studio 2015 更新 3 的 TypeScript 2 0 3 工具 我已尝
  • 根据标题将 WARC 文件拆分为块:WARC/1.0 Python

    我是编程新手 正在尝试通过将 WARC 文件拆分为块然后将每个块存储在字典中来处理它 每个块应该以 WARC 1 0 标头开始 并由 3 个空行分隔 我还想删除前两段 WARC 1 0 WARC Type warcinfo WARC Dat
  • 在 PowerShell 中使用 XAML/WPF,如何填充列表框?

    我在这里找到了很多很棒的线索 但似乎无法找到我的答案 我正在使用 Visual Studio 制作 GUI 并将 XAML 复制 粘贴到 PowerShell 中 我知道我应该在 C 中执行此操作 但由于我还不具备这些知识 因此对我来说它是
  • Angular 5 - 在 TypeScript 中翻译字符串

    我使用 i18n 进行翻译 并且对它在 html 方面的工作方式感到满意 但是 如果我在打字稿的字符串中定义了错误消息等 我想要一种方法来翻译这些内容 但找不到方法来做到这一点 有解决方法可以实现这一目标吗 到目前为止 通过库的 API 还
  • 更改 window.location 原型以禁用某些重定向?

    我正在尝试有选择地禁用window location 使用 Greasemonkey 位于文档开头 我不想完全禁用 javascript 只是禁用一些使用 javascript 完成的重定向 它们看起来像这样 window location
  • URL 中的 ^ 符号是什么意思?

    URL 中的 符号是什么意思 我需要从网页上抓取一些链接数据 我使用了一个简单的手写 PHP 爬虫 爬虫通常工作正常 然后我来到一个像这样的网址 http www example com example asp x7 3 select 20
  • 使用 Webpack 内联 CSS,而不使用 HtmlWebpackInlineSourcePlugin?

    我们一直在使用HtmlWebpackInlineSourcePlugin没有问题 但不再受支持 因此我们转向InlineChunkHtmlPlugin这对 JS 很有用 但拒绝捕获输出style css文件并将其内联 这样我们就没有样式了
  • 在 Spring Data Rest 中启用跨源请求

    我正在使用 Angular 2 和 Spring Boot 开发一个 Web 应用程序 我用spring boot data rest将我的存储库公开为 HTTP 端点的依赖项 在开发过程中 我在端口 8080 上运行的本地 tomcat
  • 如何通过http下载文件的某个字节

    如何通过HTTP协议下载前125字节和最后125字节文件 我相信您想发送一份合适的Range标头 请参阅HTTP 1 1 规范 http www w3 org Protocols rfc2616 rfc2616 sec14 html sec
  • 如何从与根项目不同的文件夹运行 grunt

    有没有办法告诉 grunt 使用哪个 grunt js 文件 我有一个f a b tools包含的文件夹grunt cmd node exe 我的实际网络应用程序GruntFile js以及所有当地的node modules is in f
  • 单页应用程序 Angular + .Net Core 上的 Bootstrap 4

    任何人试图提出申请 dotnet new install Microsoft AspNetCore SpaTemplates dotnet new angular 就像这个例子一样https blogs msdn microsoft com