Css 引导程序在Angular 6中工作不正常_Css_Angular_Bootstrap 4_Angular6

Css 引导程序在Angular 6中工作不正常

css angular bootstrap-4 angular6

Css 引导程序在Angular 6中工作不正常,css,angular,bootstrap-4,angular6,Css,Angular,Bootstrap 4,Angular6,我开始学习Angular，现在正在学习教程。我尝试将代码放在导航栏的教程中： <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a href="#" class="navbar-brand">Recipe book</a> </div>

我开始学习Angular，现在正在学习教程。我尝试将代码放在导航栏的教程中：

<nav class="navbar navbar-default">
  <div class="container-fluid">
     <div class="navbar-header">
         <a href="#" class="navbar-brand">Recipe book</a>
     </div>
     <div class="collapse navbar-collapse">
         <ul class="nav navbar-nav">
             <li> <a href="#">Recipe</a></li>
             <li> <a href="#">Shopping list</a></li>
         </ul>
         <ul class="nav navbar-nav navbar-right">
              <li class="dropdown">
                  <ul class="dropdown-menu">
                      <li><a href="#">Save data </a></li>
                      <li><a href="#">Fetch data </a></li>
                  </ul>
              </li>
         </ul>
     </div>
  </div>
</nav>

在本例中，在删除

@import“~bootstrap/dist/css/bootstrap.css”之后从styles.css`，引导程序根本不起作用。
我让bootstrap工作的唯一方法就是我在问题中所描述的
编辑2:
npm install bootstrap jquery --save

我启动了一个新项目，并按照@HDJEMAI的回答说明进行操作。
我现在仍然得到与图片中相同的页面，但它现在正在处理angular.json中添加到样式和脚本中的行，而不是styles.css文件中的@import“~bootstrap/dist/css/bootstrap.css”
。但问题仍然是，尽管代码相同，但与教程中的代码不同
这是他在教程中得到的：
添加angular.json
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "xtreme-admin-angular": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "prefix": "app",
            "schematics": {},
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist/xtreme-admin-angular",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.app.json",
                        "assets": [
                            "src/favicon.ico",
                            "src/assets"
                        ],
                        "styles": [
                            "node_modules/bootstrap/dist/bootstrap.min.css"
                             //Your root depend this path
                        ]

"node_modules/popper.js/dist/js/popper.js",

然后重新运行您的项目
您必须同时安装bootstrap
和JQuery
：
npm install bootstrap jquery --save

然后，您将在节点模块文件夹中找到这些文件：
node_modules/jquery/dist/jquery.min.js
node_modules/bootstrap/dist/css/bootstrap.min.css
node_modules/bootstrap/dist/js/bootstrap.min.js

然后您必须更新angular.json文件：
在architect
，build
部分，或者甚至是test
部分，如果您希望在测试应用程序时看到引导也能正常工作
"styles": [
    "styles.css",
    "./node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "./node_modules/jquery/dist/jquery.min.js",
    "./node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

如果不添加jquery.min.js
脚本引导将无法工作
另一个要求是popper.js如果需要引导下拉列表，则需要安装它并添加脚本文件
npm install popper.js

然后再添加这个脚本
"styles": [
    "styles.css",
    "./node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "./node_modules/jquery/dist/jquery.min.js",
    "./node_modules/popper.js/dist/popper.js",
    "./node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

亲爱的朋友，我正在学习同一个角度的教程。
我也面临着同样的情况，最终我解决了这个问题
首先卸载引导程序。
下一步是通过以下命令安装引导程序
npm install --save bootstrap@3 A

接下来转到styles.css并粘贴
@import "node_modules/bootstrap/dist/css/bootstrap.css"

你的应用程序将与udemy的视频教程中的应用程序完全相同
install npm install bootstrap@latest jquery --save
install npm install popper.js;

然后转到Angular.json文件（第47行）使用以下命令更改行：
"styles": [
    "src/styles.css",
    "./node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
    "./node_modules/jquery/dist/jquery.min.js",
    "./node_modules/popper.js/dist/popper.js",
    "./node_modules/bootstrap/dist/js/bootstrap.min.js"
],

上述方法很好，但有时有效，有时无效，即使你做的每件事都是对的。我个人更喜欢手动下载css/js，将它们保存在assets文件夹中，并在index.html中提供链接。如果出现任何问题，浏览器控制台将告诉您问题所在，而在传统方法中，浏览器控制台不提供任何信息/错误。我做了与上述答案中所列完全相同的事情，但仍然面临相同的问题。
在我的例子中，我指的是angular.json中错误的popper.js路径
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "xtreme-admin-angular": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "prefix": "app",
            "schematics": {},
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist/xtreme-admin-angular",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.app.json",
                        "assets": [
                            "src/favicon.ico",
                            "src/assets"
                        ],
                        "styles": [
                            "node_modules/bootstrap/dist/bootstrap.min.css"
                             //Your root depend this path
                        ]

"node_modules/popper.js/dist/js/popper.js",

而不是
"node_modules/popper.js/dist/umd/js/popper.js",

我也有同样的问题。下面对我有帮助
停止服务器并使用重新编译
ng serve
添加引导的另一种更简单的方法是在index.html的头部分放置一个CDN链接（在这种情况下无需通过npm安装引导）：
link rel=“样式表”href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css“
这会有用的
 如我所见，如果您在UDEMY中学习“Maximilian Schwarzmüller”课程，请确保您安装了Bootstrap 3，而不是其他任何东西。在项目文件夹中使用这些命令（仅当安装了其他版本时才卸载）
这将在本地将其安装到您的项目中
我已经安装了Bootstrap4（认为课程仍然可以使用4而不是3），并且使用Bootstrap3与课程中的项目（没有popper和jQuery）在同一个项目中工作。
安装bootstrap并将其添加到angular.json
文件后
如果引导未呈现，只需更改开发端口URL：
ng serve --port <your choice of port>

ng服务——端口
我认为这是因为引导的问题，请尝试以下方法：
第1步。
在.angular cli.json
文件中
"styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css" 
 ]

删除。/node_模块/bootstrap/dist/css/bootstrap.min.css“

第2步。
转到style.css

通过添加此行导入引导
@import "~bootstrap/dist/css/bootstrap.css";

这些步骤解决了我在构建过程中遇到的错误。
厌倦了很多事情，但这就是我今天的工作：
package.json
  "dependencies": {
    "@angular/animations": "~8.2.5",
    "@angular/common": "~8.2.5",
    "@angular/compiler": "~8.2.5",
    "@angular/core": "~8.2.5",
    "@angular/fire": "^5.2.1",
    "@angular/forms": "~8.2.5",
    "@angular/platform-browser": "~8.2.5",
    "@angular/platform-browser-dynamic": "~8.2.5",
    "@angular/router": "~8.2.5",
    "bootstrap": "^4.3.1",
    "bootstrap-sass": "^3.3.7",
    "firebase": "^6.6.0",
    "jquery": "^3.4.1",
    "moment": "^2.24.0",
    "node-sass": "^4.11.0",
    "popper.js": "^1.15.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  }

            "styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

angular.json
  "dependencies": {
    "@angular/animations": "~8.2.5",
    "@angular/common": "~8.2.5",
    "@angular/compiler": "~8.2.5",
    "@angular/core": "~8.2.5",
    "@angular/fire": "^5.2.1",
    "@angular/forms": "~8.2.5",
    "@angular/platform-browser": "~8.2.5",
    "@angular/platform-browser-dynamic": "~8.2.5",
    "@angular/router": "~8.2.5",
    "bootstrap": "^4.3.1",
    "bootstrap-sass": "^3.3.7",
    "firebase": "^6.6.0",
    "jquery": "^3.4.1",
    "moment": "^2.24.0",
    "node-sass": "^4.11.0",
    "popper.js": "^1.15.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  }

            "styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

我检查了很多方法
“./”..
或
“/”..
或/
另外，我不想在“style.css”中使用，因为可能需要添加一些依赖于“js”文件的“js”文件或“css”文件
为此,
最好的办法是
 "styles": [
                        "src/styles.css",
                        "node_modules/bootstrap/dist/css/bootstrap.min.css"
                    ],
                    "scripts": [
                        "node_modules/jquery/dist/jquery.min.js",
                        "node_modules/popper.js/dist/umd/popper.min.js",
                        "node_modules/bootstrap/dist/js/bootstrap.min.js"
                    ]

但重新启动您的电脑，不仅是浏览器或IDE
在index.html文件中添加这3个链接。您不必安装引导、jquery或更新angular.json文件。这是一种魅力
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

如果要将引导路径添加到angular.json文件中，请确保它是project\architect\构建中的样式。不是项目\architect\测试中的项目
{
"projects": {
        "architect": {
            "build": {
                    "styles": [
                        "node_modules/bootstrap/dist/bootstrap.min.css",
                         "src/styles.css"
                    ],
            "test": {
                    "styles": [
                         "src/styles.css"
                    ],

使用VS代码编辑器的引导项也有相同的问题。在ng serve
之前，我尝试了ng build
，引导项目运行良好。
我面临着同样的问题，我也遵循了udemy的相同路线，在外部导航标签中添加“nav EXPLAND lg”类解决了我的问题。我的angular.json文件也与@HDJEMAI的回答相同
<nav class="navbar nav-expand-lg navbar-default">
  <div class="container-fluid">
     <div class="navbar-header">
         <a href="#" class="navbar-brand">Recipe book</a>
     </div>
     <div class="collapse navbar-collapse">
         <ul class="nav navbar-nav">
             <li> <a href="#">Recipe</a></li>
             <li> <a href="#">Shopping list</a></li>
         </ul>
         <ul class="nav navbar-nav navbar-right">
              <li class="dropdown">
                  <ul class="dropdown-menu">
                      <li><a href="#">Save data </a></li>
                      <li><a href="#">Fetch data </a></li>
                  </ul>
              </li>
         </ul>
     </div>
  </div>
</nav>














首先，我要检查“构建”和“测试”部分下的“样式”和“脚本”
我也面临着同样的问题。经过反复试验，我终于明白了