Angularjs Bootstrap4和Angular 1.6.9-页面看起来好像没有应用css

使用angularjs 1.6.9启动了一个新项目（从现有项目复制）。上一个项目使用BootstrapV3.3.7。当我运行npm安装时，它安装了Bootstrap4.0.0。它依赖于JQuery和Tether，没什么大不了的。它不会安装JQuery，但能够通过它（关闭反病毒/互联网安全）。我有一个带有导航指令的index.html页面，其中包含一个Bootstrap

标记。当我试图在浏览器中查看页面时，css被弄乱了，无法像我期望的那样呈现

栏

当然，我认为我的css链接有问题，或者js文件没有包括在内，但我在检查元素时可以看到引导css：

这是我的package.json文件：

 {
   "name": "New site",
   "version": "1.0.0",
   "description": "A new site",
   "main": "app.js",
   "author": {
     "name": "user1",
     "email": ""
   },
   "dependencies": {
     "angular": "^1.6.9",
     "angular-jwt": "^0.1.9",
     "angular-route": "^1.6.9",
     "async": "^2.6.0",
     "bcrypt-nodejs": "0.0.3",
     "body-parser": "^1.18.2",
     "bootstrap": "^4.0.0",
     "dateformat": "^3.0.3",
     "express": "^4.16.2",
     "jquery": "^3.3.1",
     "jsonwebtoken": "^8.1.1",
     "mysql": "^2.15.0",
     "popper.js": "^1.12.9",
     "tether": "^1.4.3"
   },
   "devDependencies": {
     "browser-sync": "^2.23.6",
     "gulp": "^3.9.1",
     "gulp-autoprefixer": "^4.1.0",
     "gulp-cache": "^1.0.2",
     "gulp-concat": "^2.6.1",
     "gulp-imagemin": "^4.1.0",
     "gulp-jscs": "^4.1.0",
     "gulp-jshint": "^2.1.0",
     "gulp-notify": "^3.2.0",
     "gulp-plumber": "^1.2.0",
     "gulp-rename": "^1.2.2",
     "gulp-uglify": "^3.0.0",
     "jscs": "^3.0.7",
     "jshint": "^2.9.5",
     "jshint-stylish": "^2.2.1",
     "nodemon": "^1.15.0"
   }
 }

我正在使用以下gulp任务将node_模块文件夹中的css和js文件绑定到第三方文件中：

gulp.task('3rd-party-scripts', function () {
    return gulp.src(['node_modules/jquery/dist/jquery.js',
            'node_modules/tether/dist/js/tether.js',
            'node_modules/bootstrap/dist/js/bootstrap.js',
            'node_modules/angular/angular.js',
            'node_modules/angular-route/angular-route.js',
            'node_modules/angular-jwt/dist/angular-jwt.js'])
        .pipe(plumber({
            errorHandler: function (error) {
                console.log(error.message);
                this.emit('end');
            }
            }))
        .pipe(concat('3rd-party.min.js'))
        .pipe(gulp.dest('public/dist/scripts/'))
        .pipe(browserSync.reload({ stream: true }))
});

gulp.task('3rd-party-styles', function () {
    return gulp.src(['node_modules/bootstrap/dist/css/bootstrap.css'])
        .pipe(plumber({
            errorHandler: function (error) {
                console.log(error.message);
                this.emit('end');
            }
        }))

        .pipe(concat('3rd-party-styles.min.css'))
        .pipe(gulp.dest('public/dist/css/'))
        .pipe(browserSync.reload({ stream: true }))
});

尽管第三方文件名为min.js和min.cs，我还是加载了要调试的完整文件。它们加载时没有控制台错误。没有404错误。而且没有引导格式

以下是index.html：

---

感觉bootstrap.js没有被执行。在添加到第三方文件时，我在gulpfile中处理了订单。在我的挖掘过程中，我想我可能必须将引导注入到我的角度模块中。另一个尝试是调用

angular.bootstrap（文档，['ttab']）但这导致了一个错误，即引导已经加载，所以我觉得它正在做它应该做的事情。引导4与引导3完全不兼容，因为它几乎是完全重写

解决方案：

为Bootstrap 3加载css（以及相应的js）文件或迁移到Bootstrap 4

如果要迁移，需要手动调整/更改很多内容

参考：

如果要继续使用Bootstrap 3，可以使用以下链接：

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

此外，Bootstrap 4.0.0没有Tether作为依赖项。它使用了
popper.js
。
谢谢您的回复。我一直认为bootstrap.js有问题，或者没有正确实现，我没有意识到3.3.7到4.0.0 css的突破性变化。