blocks|key|2384396|text|对于Clappr-+In+Angular+CLI，运行命令-|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2384397|2384398|+npm+i+clappr|blockquote|2384399|2384400|https://www.npmjs.com/package/clappr|offset|length|2384401|然后按照给定的步骤进行操作。|2384402|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|10|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|U|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|V|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|W|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|X|8|@]|9|@$I|Y|J|Z|1|10]]|A|$]]|$1|K|3|L|5|6|7|11|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|H]]]]

For Clappr-
In Angular CLI, run the command-

<blockquote>
 <blockquote>
 npm i clappr
 </blockquote>
</blockquote>

<a href="https://www.npmjs.com/package/clappr" rel="nofollow noreferrer">https://www.npmjs.com/package/clappr</a>

Then follow the steps given..

blocks|key|2379533|text|将包安装到您的项目中：npm+i+clappr|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2379534|Import类型声明the+：|unordered-list-item|2379535|ordered-list-item|2379536|2379537|2379538|entityMap^0|B|C|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$]]|$1|I|3|-4|5|J|7|S|8|@]|D|@]|E|$]]|$1|K|3|-4|5|6|7|T|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<ol>
<li>Install the package into your project : <code>npm i clappr</code></li>
<li>Import type declaration into Angular app : <code>app.component.ts</code></li>
</ol>

blocks|key|5642581|text|在index.html中添加库文件。通过在组件类外部声明如下declare+var+Clappr:+any;，可以在组件中使用由库公开的变量。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5642582|entityMap^0|U|O|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

Add the library file in index.html. The variable exposed by the library can be used in component by declaring like this <code>declare var Clappr: any;</code> outside the component class.

blocks|key|472841|text|如果库有一个ES6模块，你可以直接导入它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|472842|如果库只是一个JS文件，则可以在index.html上使用<script>标记添加该文件，方法是在angular.json中的脚本数组上添加js文件路径|offset|length|style|CODE|472843|472844|这里有一个指南可以帮助你做到这一点。|472845|https://nitayneeman.com/posts/how-to-add-third-party-library-in-angular-cli/|472846|如果你不喜欢第三方库作为全局变量，你可以把它们变成inyectable。|472847|这里也有一个指南：|472848|https://hackernoon.com/angular-providers-how-to-inject-3rd-party-library-af4a78722864|472849|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|T|8|0|0|0|0|24|0|0|0|0|0|2D|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@$D|12|E|13|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|14|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|15|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|16|8|@]|9|@$D|17|E|18|1|19]]|A|$]]|$1|M|3|N|5|6|7|1A|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1B|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1C|8|@]|9|@$D|1D|E|1E|1|1F]]|A|$]]|$1|S|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|L]]|Z|$5|V|W|X|A|$Y|R]]]]

If the library has a ES6 module, you can just import it. 

If the library is just a JS file, you can add the file as if you where importing it using a <code>&lt;script&gt;</code> tag on index.html by adding the js file path on the scripts array in angular.json

If types are available you can add them to the types array on typescript.json

Here is a guide to do all that.

<a href="https://nitayneeman.com/posts/how-to-add-third-party-library-in-angular-cli/" rel="nofollow noreferrer">https://nitayneeman.com/posts/how-to-add-third-party-library-in-angular-cli/</a>

If you dislike having the third party libraries as global variables you can turn them into inyectables. it's a more involved process but it's pretty neat.

Here is a guide for that too:

<a href="https://hackernoon.com/angular-providers-how-to-inject-3rd-party-library-af4a78722864" rel="nofollow noreferrer">https://hackernoon.com/angular-providers-how-to-inject-3rd-party-library-af4a78722864</a>

blocks|key|2379606|text|下面是我如何在我的Angular+9项目中安装：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2379607|进入angular.json的|offset|length|style|CODE|2379608|npm+install+clappr|ordered-list-item|2379609|Add+clappr|2379610|2379611|++++++"architect":+{
++++++++"build":+{
++++++++++"builder":+"@angular-devkit/build-angular:browser",
++++++++++"scripts":+[
++++++++++++"node_modules/clappr/dist/clappr.min.js"
++++++++++],
++++++++++"styles":+[
++++++++++++"./src/styles.css"
++++++++++]
++++++++},
++++++++"test":+{
++++++++++"builder":+"@angular-devkit/build-angular:karma",
++++++++++"scripts":+[
++++++++++++"node_modules/clappr/dist/clappr.min.js"
++++++++++],
++++++++++"styles":+[
++++++++++++"./src/styles.css"
++++++++++]
++++++++}
++++++}|code-block|syntax|javascript|2379612|2379613|创建文件index.d.ts并将clappr声明为：|2379614|2379615|declare+module+'clappr';|2379616|2379617|将其导入到component.ts文件：|2379618|2379619|import+*+as+Clappr+from+'clappr';|2379620|entityMap^0|0|2|C|0|0|I|0|0|0|0|0|4|A|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@$D|18|E|19|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|1A|8|@$D|1B|E|1C|F|G]]|9|@]|A|$]]|$1|K|3|L|5|J|7|1D|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|1F|8|@]|9|@]|A|$Q|R]]|$1|S|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]|$1|T|3|U|5|J|7|1H|8|@$D|1I|E|1J|F|G]]|9|@]|A|$]]|$1|V|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]|$1|W|3|X|5|P|7|1L|8|@]|9|@]|A|$Q|R]]|$1|Y|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]|$1|Z|3|10|5|J|7|1N|8|@]|9|@]|A|$]]|$1|11|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]|$1|12|3|13|5|P|7|1P|8|@]|9|@]|A|$Q|R]]|$1|14|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]]|15|$]]

Here's how I installed in my Angular 9 project:
<ol>
<li><code>npm install clappr</code></li>
<li>Add clappr into <code>angular.json</code>:</li>
</ol>
<pre><code> &quot;architect&quot;: {
 &quot;build&quot;: {
 &quot;builder&quot;: &quot;@angular-devkit/build-angular:browser&quot;,
 &quot;scripts&quot;: [
 &quot;node_modules/clappr/dist/clappr.min.js&quot;
 ],
 &quot;styles&quot;: [
 &quot;./src/styles.css&quot;
 ]
 },
 &quot;test&quot;: {
 &quot;builder&quot;: &quot;@angular-devkit/build-angular:karma&quot;,
 &quot;scripts&quot;: [
 &quot;node_modules/clappr/dist/clappr.min.js&quot;
 ],
 &quot;styles&quot;: [
 &quot;./src/styles.css&quot;
 ]
 }
 }

</code></pre>
<ol start="3">
<li>Create file <code>index.d.ts</code> and declare clappr as:</li>
</ol>
<pre><code>declare module 'clappr';
</code></pre>
<ol start="4">
<li>import it into component.ts file:</li>
</ol>
<pre><code>import * as Clappr from 'clappr';
</code></pre>

Some libraries are not supported by Angular like Clappr , HashWords etc . I want to use them in Angular as if they were an Angular library . So how can we make Angular support external libraries/modules ?

How do I inject/integrate a third party library in Angular 6?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

有些库是Angular不支持的，比如Clappr，HashWords等。我想在Angular中使用它们，就像它们是一个Angular库一样。那么我们如何让Angular支持外部库/模块呢？

问如何在Angular 6中注入/集成第三方库？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Angular 6中注入/集成第三方库？EN