如何在 Angular 9 中正确安装预建模板答案

【问题标题】：how to install pre built template in Angular 9 properly如何在 Angular 9 中正确安装预建模板
【发布时间】：2020-09-02 12:08:25
【问题描述】：

我正在尝试在我的 Angular 9 应用程序中使用免费的 template，但多次失败。尽管进行了多次尝试，但滑块、产品和主页横幅并未出现。我建议您下载一次模板并检查文件夹目录以便更好地理解。

1) 我尝试通过 NPM 安装 js 和 CSS 文件，然后在 angular.json 脚本和样式数组中调用所需的文件，但有些包不起作用，尽管大多数包都可以。

2) 通过 src/assets/js/bootstrap.min.js 和 src/assets/css/bootstrap.min.css 等 js 和 CSS 文件夹调用 js 和 CSS 文件，但它没有帮助并产生了很多错误。

3) 解压源文件夹中的文件，然后像 src/assets/source/bootstrap-4.4.1-dist/js/bootstrap.min.js 一样调用它们，但这也返回了一些错误。

到目前为止，我使用 NPM 包并在 angular.json 中调用 then 获得了最好的结果，但 jQuery 仍然没有按预期工作。

angular.json:

"styles": [
              "src/assets/sass/style.scss",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/slicknav/dist/slicknav.min.css",
              "./node_modules/elegant-icons/style.css",
              "./node_modules/font-awesome/css/font-awesome.min.css",
              "./node_modules/jquery-ui-dist/jquery-ui.min.css",
              "./node_modules/jquery-nice-select/css/nice-select.css",
              "./node_modules/owl.carousel/dist/assets/owl.carousel.min.css",
              "src/assets/css/style.css",
              "src/styles.scss"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js",
              "./node_modules/jquery-ui-dist/jquery-ui.min.js",
              "./node_modules/jquery-nice-select/js/jquery.nice-select.min.js",
              "./node_modules/slicknav/dist/jquery.slicknav.min.js",
              "./node_modules/mixitup/dist/mixitup.min.js",
              "./node_modules/owl.carousel/dist/owl.carousel.min.js",
              "src/assets/js/main.js"
            ]

问题：

【问题讨论】：

我认为样式和 js 已经奏效了，这里的问题在于 jquery。这将有助于解决问题link

标签： javascript html jquery css angular

【解决方案1】：

尝试在index.html文件的header标签中添加jQuery CDN，然后重新加载页面。

index.html

<head>
...
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
...
</head>

【讨论】：