[英]Bootstrap 4 with Angular 4 navbar
我已经创建了一个Angular 4应用程序,并且希望与它一起使用Bootstrap 4。
我通过npm安装了Bootstrap 4.0.0-beta6,并希望使用看起来像这样的入门模板。
我已将所有内容相应地放置到如下所示的angular.cli.json中:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "frontend"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/popper.js/dist/esm/popper.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
当我进行ng build
或ng serve
我没有任何错误,也可以加载页面。
但是navbar全部分解,看起来像这样:
检查页面时,我看不到任何错误,可以调用这些类。
另外,由于我想先使用本机库,因此我故意跳过了NgBootstrap。
在这里问之前,我什至尝试了CSS和JS的MaxCDN版本,并且得到了相同的结果。
我的代码结构与此类似。
Index.html包含<app-component>
-加载<app-body>
,其中仅包含<app-navigation>
和容器的其余部分。 (没有什么花哨)。
我不知道有人是否遇到过类似的问题。
任何帮助或建议都将受到欢迎。
您的问题是库popper.js的导入路径,将其位置路径更改为
../node_modules/popper.js/dist/umd/popper.min.js
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.