Angular @types/bootstrap错误:命名空间'popper.js‘没有导出的成员

答案：

这个错误是由于在使用Angular和Bootstrap时，@types/bootstrap库中的类型定义文件与popper.js库不兼容导致的。

解决这个错误的方法是使用正确版本的@types/bootstrap库，并确保与之兼容的popper.js库。

首先，需要安装正确版本的@types/bootstrap库。可以通过以下命令来安装最新版本的@types/bootstrap库：

npm install @types/bootstrap@4.0.0 --save-dev

然后，需要安装与之兼容的popper.js库。可以通过以下命令来安装最新版本的popper.js库：

npm install popper.js@^1.12.9 --save

安装完成后，需要在Angular项目的tsconfig.app.json文件中添加以下配置：

"types": ["bootstrap"]

这样就可以解决这个错误了。

关于Angular和Bootstrap的更多信息，可以参考腾讯云的相关产品和文档：

Angular：https://cloud.tencent.com/product/angular
Bootstrap：https://cloud.tencent.com/product/bootstrap

希望以上信息对您有帮助！

相关·内容

Webpack+vue+boostrap+ejs构建Web版GM工具

我们的Web版GM工具长差不多这个样子，全静态页面。因为分成了好几个模块，然后由于用的是bootstrap的。上面的Tab和下面的内容还有处理逻辑的函数都分了三大块，在不同的位置。...我用的是运行时编译的版本，而 vue 对 webpack 文档里支持方式是只导入了runtime，没有导入编译库，所以这里初始化流程会麻烦一些。...moment 是前端页面用到的，然后 bootstrap 还依赖 popper.js 。...先安装依赖: npm install bootstrap jquery moment popper.js --save 接下来就比较特殊了，因为 webpack 走的是和 node.js 一样的模块隔离...，像上面的这些库是需要写入全局命名空间的，所以还需要初始化的时候导入一下: { plugins: [ new webpack.ProvidePlugin({ moment: "moment

2.7K3 2

在 ASP.NET Core 项目中使用 npm 管理你的前端组件包

同时，我们添加的组件间可能存在各种依赖关系，如果我们没有正确下载引用的话，到最后可能还是无法正常使用。　　...当然，如果你之前有开发过 Vue、Angular 这类的前端项目，你肯定已经安装好了。...可以看到，安装完成后，npm 提示我们 bootstrap 依赖于 jquery 和 popper.js，所以这里我们手动添加上这两个依赖的组件。　　.../node_modules/popper.js/dist/**/*.*" }, { name: "bootstrap", dist: "....因为自己水平也很菜，很多东西并没有很详细的涉及到，可能还需要你在实际使用中进行进一步的探究，毕竟，实践出真知。

1.9K3 0

基于 qiankun 的微前端最佳实践（万字长文） - 从 0 到 1 篇

第 46 行：微应用导出的生命周期钩子函数 - bootstrap。第 53 行：微应用导出的生命周期钩子函数 - mount。第 61 行：微应用导出的生命周期钩子函数 - unmount。...render 中创建 VueRouter，可以保证在卸载微应用时，移除 location 事件监听，防止事件污染 router = new VueRouter({ // 运行在主应用中时，添加路由命名空间...ReactDOM.unmountComponentAtNode(document.getElementById("root")); } 在配置好了入口文件 index.js 后，我们还需要配置路由命名空间...return ( // 设置路由命名空间 {/* ... */} ); }; 接下来，我们还需要配置 webpack...对于选择 Angular 技术栈的前端开发来说，对这类情况应该驾轻就熟（没有办法）。

6.4K4 0

TypeScript 简介及编码规范

0，其余的成员会从 1 开始自动增长。...它没有运行时的影响，只是在编译阶段起作用。...{ } 类型使用帕斯卡（PascalCase）命名使用驼峰（camelCase）命令成员命名空间使用帕斯卡（PascalCase）命名 Bad namespace foo { } Good namespace...Foo { } 枚举使用帕斯卡（PascalCase）命名枚举 Bad enum color { } Good enum Color { } 使用帕斯卡（PascalCase）命名枚举成员 Bad...比如，(x) => x + x 是错误的，下面是正确的做法： x => x + x (x,y) => x + y (x: T, y: T) => x === y 总是使用 {} 把循环体和条件语句括起来

10.1K4 0

Angular-内存溢出的问题

本项目用的是angular6搭建，用动态组件的形式来显示页面，之前遇到过因为内存溢出而导致无法aot的问题， Angular4以上的该方法都适用解决方法：手动改写内存上限修改目录: my-project...）文件过多； 2）订阅数据没有销毁占用内存，（看了下订阅的数据很少，应该不是的）； 3）因为所有的组件都在一个根目录下（上面说了，用的动态组件没用路由），导致需要编译的组件过多？...": "^13.0.5", "@grapecity/spread-sheets-resources-zh": "^13.0.5", "@ng-bootstrap/ng-bootstrap...": "^2.7.0", "angular2-fontawesome": "^5.2.1", "babel-polyfill": "^6.26.0", "bootstrap":...", "@types/file-saver": "^2.0.1", "@types/jasmine": "~2.8.8", "@types/jasminewd2": "~2.0.3

2.3K2 0

无需框架，就能实现微前端，理解起来通俗易懂

当代码库很大时，组件和页面需要连接起来，因为有时您的工作与其他团队成员的工作重叠。这将导致进一步的重写，更复杂和时间管理不善，并导致整个开发过程的延迟。...如何构建微前端现在让我们来看看如何构建一个真正的应用，以及如何使用微前端集成两个框架，React和Angular。这里出现的第一个问题是，我们应该如何划分应用，因为没有特定的标准来划分它们。...开始构建我们将不得不使用某些函数在主应用程序中注册我们的子应用程序，以便导出我们的子应用程序。...子应用程序中的实现: 要将一个模块导出为一个子应用程序，我们必须导出以下生命周期函数: bootstrap——它将被调用一次，就在注册的应用程序第一次挂载之前。...因为我们在两个子应用程序中都使用单个SPA函数，所以子应用程序和模板都将知道使用全局名称空间的single SPA生命周期函数的位置。问题是如何设置这些子应用的位置?

2K2 0

用Angule Cli创建Angular项目

Angular4.0来了，更小，更快，改动少接下来为Angular4.0准备环境和学会使用Angular cli项目 1.环境准备： 1）在开始工作之前我们必须设置好开发环境如果你的机器上还没有安装...3.在项目中引入bootstrap和jQuery 　　　　这里我使用webstorm的Terminal，直接在终端操作 cnpm install bootstrap --save cnpm install...jquery --save 我们在项目中就添加了bootstrap和jQuery，我们可以在node_modules文件夹中找到他们（这个文件夹放的是第三方库）；然后我们需要操作.angular-cli.json...文件，把bootstrap和jQuery添加进去: 这里需要注意的是：因为angular用的是微软开发的typescript语言，我们需要在终端做下面的操作，以便让typescript认识bootstrap...和jQuery一些字符（比如jQuery的$）： cnpm install @types/bootstrap --save-dev cnpm install @types/jquery --save-dev

1.4K6 0

Angular--Module的使用

模块Module Angular 应用的基本构造块是NgModule, 它为组件提供了编译的上下文环境。 Angular 应用就是由一组NgModule定义的。...一个Angular应用至少有一个用于启动的根模块（root module）, 根模块通常命名为AppModule，并位于一个名叫 app.module.ts 的文件中。...exports（导出表） —— 用于其它模块的组件模板中使用的声明对象的子集（the subset of declarations）。...imports（导入表） —— 其他模块，本NgModule声明的组件需要使用它们的导出类。 providers —— 本模块向全局服务中贡献的那些服务的创建器。这些服务能被本应用中的任何部分使用。...bootstrap —— 应用的主视图，称为根组件。它是应用中所有其它视图的宿主。只有根模块才应该设置这个 bootstrap 属性。

4.9K4 0

--save-dev和--save的区别

而这几个包的devDependencies依赖的包没有一个下载。...其实发布的包如果没有必要，很少会默认帮你下载，比如bootstrap，依赖jQuery，怕你原本就下载了引起冲突，也不会在dependencies里面安装jQuery而是： "peerDependencies...": { "jquery": "1.9.1 - 3", "popper.js": "^1.16.0" } 表示bootstrap依赖于这两个包，你必须安装，版本不固定，但是一定要安装这两个包...'popper.js' in 'C:\Users\wade\Desktop\savedev\node_modules\_bootstrap@4.4.1@bootstrap\dist\js' @ ..../src/index.js 以上就是对--save和--save-dev的一些测试，想更快的得出结论其实是自己发布一个包。至于本人的答案是不是存在错误，欢迎指出，因为只是自己简单测试的结果。（完）

1.2K1 0

关于在angular2及以上版本引入bootstrap 并有提示功能

花了一些时间来研究关于angular2及以上版本引入bootstrap 并有提示功能如果按照正常来的话:在angular2中引入bootstrap,没有提示功能的: 第一步:cnpm install...bootstrap --save; 第二步:cnpm install @types/bootstrap --save-dev; 第三步:找到angular/cli 在styles中添加 ...../nodu_modules..............bootstrap.min.css 路径. 这样便可以在组件中使用bootstrap 的css样式了....然后这样做并没有提示的功能,我也是尝试了各种方式,如果通过正常方式,想拥有提示功能我反正是做不到....没有可以建一个.

5103 0

TS 常见问题整理（60多个，持续更新ing）

TypeScript 1.5 的版本：术语名已经发生了变化，“内部模块”的概念更接近于大部分人眼中的“命名空间”，所以自此之后称作“命名空间”（也就是说 module X {…} 相当于现在推荐的写法...不必要的命名空间：命名空间和模块不要混在一起使用，不要在一个模块中使用命名空间，命名空间要在一个全局的环境中使用你可能会写出下面这样的代码：将命名空间导出 shapes.ts export namespace.../shapes"; let t = new shapes.Shapes.Triangle(); 不应该在模块中使用命名空间或者说将命名空间导出：使用命名空间是为了提供逻辑分组和避免命名冲突，模块文件本身已经是一个逻辑分组...，并且它的名字是由导入这个模块的代码指定，所以没有必要为导出的对象增加额外的模块层。...这里的对象一词指的是类，接口，命名空间，函数或枚举。

14.7K7 6

Angular 2 架构（上)

每个 Angular 应该至少要有一个模块(根模块)，一般可以命名为：AppModule。 Angular 模块是一个带有 @NgModule 装饰器的类，它接收一个用来描述模块属性的元数据对象。...exports - 声明（ declaration ）的子集，可用于其它模块中的组件模板。 imports - 本模块组件模板中需要由其它导出类的模块。 providers - 服务的创建者。...本模块把它们加入全局的服务表中，让它们在应用中的任何部分都可被访问到。 bootstrap - 应用的主视图，称为根组件，它是所有其它应用视图的宿主。只有根模块需要设置 bootstrap 属性中。...Logger ], declarations: [ AppComponent ], exports: [ AppComponent ], bootstrap: [ AppComponent...我们可以通过使用模板来定义组件的视图来告诉 Angular 如何显示组件。

1.4K1 0

35 个最好用的 Vue 开源库！送与每一位开发者

无论是开发新手还是经验丰富的老手，我们都喜欢开源软件包。对于开发者来说，如果没有这些开源软件包，很难想象我们的生活会变得多么疲惫不堪，而且靠咖啡度日也会成为家常便饭。...地址：github.com/sdras/vue-v… 4.Bootstrap-Vue 提供了最全面的 Bootstrap V4 实现。...地址：bootstrap-vue.js.org/ 5.Vue Native 你是 React Native 的粉丝吗？...地址：github.com/epicmaxco/e… 32.Vue Notification 用在 Vue.js 应用程序中的成功、警告和错误通知。...地址：vue-notification.yev.io/ 33.Vue Popper 一个基于 popper.js 的 Vue.js 弹出窗口组件。

2.2K1 0

如何在Ubuntu 14.04上使用Bower管理前端JavaScript和CSS依赖项

没有服务器的同学可以在这里购买，不过我个人更推荐您使用免费的腾讯云开发者实验室进行试验，学会安装后再购买服务器。...what types of modules does this package expose? Just press ENTER ?...Yes 关于这些选项的一些注意事项：只需重新访问之前的注释，在运行此示例项目的bower init命令时，无需输入任何选项在What types of modules does this package...默认情况下，没有选择任何选项，对于这个简单的示例，我们不需要其中任何一个。...what types of modules does this package expose? ? keywords: ?

2.8K0 0

AngularJS7那些不得不说的事故

但在中、小型公司，这是个很烦心的问题。我建议对于一些复杂的项目，尽可能的保留下来原有的node_modules 文件夹，毕竟跟硬盘容量比起来，这一点空间不算啥了，能让你将来项目的维护轻松许多。 ..."node_modules/bootstrap-switch/dist/js/bootstrap-switch.js"] 需要注意，如果是AngularJS4, 文件名应当是.angular.json...'createjs-module'; ... $('.url1').attr('href', '/home'); 注意这里面的引用并没有指定js的路径，路径实际是由angular.json...库的引用，则使用了引用非结构化js的方法，重点是引用“”也就是所有内容，然后用“as $”命名成平常我们喜欢的样子。...相信再找错误，就容易多了。当然既然开发模式编译时通过的，这时候的报错往往也是兼容性问题或者更严格的语法限制。

1.5K1 0

2018年度 35 个最好用 Vue 开源库

对于开发者来说，如果没有这些开源软件包，很难想象我们的生活会变得多么疲惫不堪，而且靠咖啡度日也会成为家常便饭。...地址：github.com/sdras/vue-v… 4.Bootstrap-Vue 提供了最全面的 Bootstrap V4 实现。...地址：bootstrap-vue.js.org/ 5.Vue Native 你是 React Native 的粉丝吗？...地址：github.com/epicmaxco/e… 32.Vue Notification 用在 Vue.js 应用程序中的成功、警告和错误通知。...地址：vue-notification.yev.io/ 33.Vue Poppe 一个基于 popper.js 的 Vue.js 弹出窗口组件。

3.2K0 0

用VSCode开发一个基于asp.net core 2.0sql server linux(docker)ng5bs4的项目(2)

string Name { get; set; } public int TvNetworkId { get; set; } } } 注意TvShowViewModel里面并没有反向的...这就需要建立路由了, 不过首先先把bootstrap 4 安装上, 项目根目录执行以下命令: npm install --save bootstrap jquery popper.js 安装好之后,...需要把bootstrap的css文件添加到angular-cli.json文件里: ?...分别设置了5个路由, 默认路由直接跳转到home, 如果没有匹配路由到话也是跳转到home....可以看到发生了错误404, angular客户端并没有找到这个api. 这是因为angular运行的是自己的web服务器端口4200, 而asp.net core也是运行自己服务器端口为5000.

2.4K5 0

Vue-CLI 项目搭建

导入导出包定义并使用组件集成Bootstrap，jQuery，Elementui 下载Bootstrap和jQuery 配置Bootstrap和jQuery 下载elementui 配置elementui...没有安装好cli脚手架的可以继续安装： Vue CLI 官网文档 Node.js安装详细教程安装好脚手架后，我在安装的过程中发现使用npm自带的源太慢了，可以切换源在nodejs的环境上装vue-cli...//内置的 //如果是自定义的写自己的路径导出语法：导出单个对象：export default 方法名/变量名 eg：export default 变量名 export default...settings.printName() 导入导出包导入出包和上面一样，导入包只导入到包这一层就可以了，比如：info包下的info.js文件导出，导入的路径只写到info就可以了 //导出 let...Bootstrap配置 # 在main.js中配置 // bootstrap的配置 import 'bootstrap' import 'bootstrap/dist/css/bootstrap.min.css

1.4K2 0

TS 进阶 - 实际应用 01

const a: number = 'string' 如果代码并没有问题，ignore 反而是错误了，因此引入了更严格版本的 ignore，即 ts-expect-error，它只有在下一行代码真存在错误时才能被使用...在编译时，TS 会沿着 path 指定的路径不断深入寻找，最深的那个没有其他依赖的声明文件会被最先加载。...# 命名空间命名空间就像一个模块文件一样，将一组强相关的逻辑收拢到一个命名空间内部。...命名空间的使用类似于枚举，命名空间内部实际上就是一个独立的代码文件，其中的变量需要导出以后，才能访问。命名空间的作用也是实现简单的模块化功能。...命名空间内部可以嵌套命名空间，此时嵌套的命名空间也需要被导出： export namespace VirtualCurrency { export class QQCoinPaySDK {}

7951 0

带你走近AngularJS - 创建自定义指令

例如， Bootstrap 就是当前比较流行的提供样式和JavaScript插件的前端开发工具包。...正如你所见，除了拥有用于实现指令的和标签，页面和常规HTML页面没有什么区别。HTML开发人员无需编写任何代码。...注意这个自定义指令遵循一种格式：以"my" 为前缀，类似于命名空间，因此如果你在应用中引用了多个模块指令，你可以通过前缀很容易的判断出它是在哪定义的。这不是硬性要求，但是这样做可以带来很多便利。...Scope 是创建可以复用指令的必要条件，每个指令（不论是处于嵌套指令的哪一级）都有其唯一的作用域，它不依赖于父scope。scope 对象定义names 和types 变量。...element: 包含指令的DOM元素的引用， link 方法一般通过jQuery 操作实例（如果没有加载jQuery，还可以使用Angular's jqLite ）。

2.4K10 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云