Angular:如何在所有组件中跨应用程序加载外部脚本
Angular是一种流行的前端开发框架，它通过组件化的方式构建Web应用程序。要在所有组件中跨应用程序加载外部脚本，可以按照以下步骤进行操作：
步骤1：在Angular项目的根目录下创建一个新的文件夹，用于存放外部脚本文件。例如，可以创建一个名为"scripts"的文件夹。
步骤2：将要加载的外部脚本文件放置在刚刚创建的"scripts"文件夹中。例如，假设要加载一个名为"externalScript.js"的外部脚本文件。
步骤3：在Angular项目的根目录下找到"angular.json"文件，并打开它进行编辑。
步骤4：在"angular.json"文件中找到"projects" -> "architect" -> "build" -> "options" -> "scripts"字段。
步骤5：在"scripts"字段中添加外部脚本的路径。路径应该相对于Angular项目的根目录。例如，可以添加以下代码：
"scripts": [
"src/scripts/externalScript.js"
]步骤6：保存并关闭"angular.json"文件。
现在，外部脚本已经添加到Angular项目中，并可以在所有组件中使用。可以在组件中通过以下方式加载外部脚本：
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
constructor() { }
ngOnInit(): void {
this.loadScript('externalScript.js');
}
loadScript(scriptUrl: string): void {
const script = document.createElement('script');
script.src = scriptUrl;
document.body.appendChild(script);
}
}在上面的代码中，loadScript方法用于动态创建一个<script>标签，并将外部脚本文件的URL赋值给src属性。然后，将该<script>标签添加到<body>元素中，从而实现外部脚本的加载。
这样，你就可以在所有组件中使用loadScript方法来加载外部脚本文件了。
关于Angular的更多信息和相关产品介绍，你可以访问腾讯云官方文档：
- Angular官方网站：https://angular.io/
- 腾讯云Serverless Framework：https://cloud.tencent.com/product/sls
相关·内容
脚本标记： <script src="https://www.test.com/dem0.js"></script></head>
<app-root></
浏览 30提问于2019-10-08得票数 3
我的Angular 7应用程序上有一个导航栏。我还有一个自定义的javascript文件，它会在应用程序初始加载时加载。在我的应用程序中单击链接以路由到另一个组件后，外部javascript文件停止工作/不加载。当我单击链接以路由到不同的组件时，如何才能加载或保持加载此javascript文件？我已经正确地将javas
浏览 31提问于2019-05-31得票数 2
我正在尝试构建一个应用程序，该应用程序显示托管在不同服务器上的外部图形。我在脚本中提供了url，并尝试在我的组件中显示它。但没有显示任何内容。相反，我得到了如下错误:- app.component.ts:28跨域读阻塞阻止跨域响应....使用MIME类型text/html。我遇到了其他一些帖子，其中ComponentFactoryResolver已经用于动态加载组
浏览 29提问于2019-01-21得票数 0
我正在为我的web应用程序写一些新功能。在那里我写了一些脚本，并通过一些标记管理器加载，这样当我的脚本加载时，它将以一些UI组件为目标，并从dom中删除并注入它的dom元素。现在，它删除的组件有一些按钮，当单击该按钮时，会更改url并加载映射到该url的组件。请注意，web应用程序是在角度和引擎盖下，它使用角度路由。现在，我正在编写的脚本在<em
浏览 7提问于2021-04-23得票数 0
我试图在angularDart应用程序中通过IMDB plugin HTML代码片段显示IMDB评级，但通过组件显示它不起作用。它只显示徽标，而不呈现显示评级的脚本。 </material-toggle></div>import 'package:angular</e
浏览 0提问于2018-08-01得票数 0
2回答
在Angular 2中的组件中是否有加载或触发外部脚本的选项，但不显式地附加到文档头，因为每次加载组件时都会附加？
浏览 4提问于2018-02-12得票数 0
我使用的是Angular 7，我想将angular应用程序作为一个小部件插入到另一个外部html文件中。
我知道有angular元素可以创建自定义元素并插入它，但其中有许多浏览器兼容性问题。我尝试在外部html中包含<app-root></app-root>并添加脚本，它在所有浏览器中都工作得很好。但是我无法将输入传递给根元素。这是将我的angular应用程
浏览 2提问于2020-05-09得票数 0
2回答
我懒得把我的一些功能模块加载到一个Range6应用程序中。其中一些功能模块依赖于JS库，其他模块没有使用JS库，还有一些模块是在延迟加载的模块之间共享的。目前，我正在将这些库包括在angular.json数组中的scripts配置中，但这意味着所有这些库都渴望与应用程序的其余部分一起加载，即使它们只被延迟加载的模块使用。是否有一种使用延迟加载模块
浏览 0提问于2018-07-24得票数 1
回答已采纳
我有一个应用程序(angular+electron+sqlite)，它运行在数据库上，当前执行一个脚本，从某个页面检索数据(脚本的描述(www.Cisowscy.com/Software/haploFT) )，然后手动将这些文件添加到应用程序中，处理后将这些文件添加到数据库中，然后应用程序在数据库上进行分析。我想避免进入第二个窗口(Google )并执行这个脚本。我希望用户能够在组件</e
浏览 0提问于2019-07-08得票数 0
回答已采纳
有人能帮助我如何从我的angular2组件中的外部js文件中调用函数吗？下面是我的代码片段，当我试图加载应用程序时，它抛出的应用程序是未定义的错误。以下是我的组件代码： selector中<
浏览 2提问于2017-06-13得票数 0
我正在构建一个具有Angular 2框架的web应用程序，我想使用一个外部模板。正在尝试将其转换为angular2 SPA。除了外部js之外，一切都运行得很好。JavaScripts不能正常工作。但是CSS文件正在工作。材料组件和模态其他JavaScript功能在角度组件文件内什么
浏览 24提问于2017-12-19得票数 1
我们已经有了一个适合于桌面用户的web应用程序，现在我们决定使用Angular power来开发一个新版本的网站，专门面向移动设备用户。我的意思是，我们希望在我们的网站上有另一个版本，这是完全为我们的移动用户优化的，这种方法被称为自适应设计。我们通过获取User-Agent来检测用户类型，并根据设备类型为不同的web应用程序提供服务。 我们希望使用我们的服务、模型、指令和管道，但只使用组件和视图，以及一些逻辑更改。我们如何让多个Angular项目使用一个源代码库或<em
浏览 13提问于2019-06-09得票数 0
回答已采纳
1回答
我有一个在app.run()期间调用的服务，由于某些原因，当我在那个点异步加载文件时，它们似乎不会被占用。下面是我正在使用的服务： function(configdocument.body.appendChild(js); }
retur
浏览 1提问于2015-03-03得票数 0
因此，我创建了一个script.service.ts文件，当项目需要时，我将JavaScript文件注入到不同的组件中。然而，我仍然面临着一个问题，在我创建之前，我只是在index.html文件中包含了脚本链接。例如，假设您加载了一个名为"localhost:4200/user“页面，该页面使用了一个使用外部JavaScript文件来激活用户网络摄像头的组件。但主要问题是，如果您首先加载一个<em
浏览 6提问于2018-11-21得票数 3
3回答
我想在不使用angular2- google -map组件的情况下将google地图集成到我的应用程序中。我尝试按照入门教程进行操作
TypeError: Cannot read property 'offsetWidth这可能是因为脚本是在实际div加载之前执行的。如何让这些
浏览 3提问于2016-06-25得票数 2
我想知道是否可以在非SPA应用程序中使用使用Angular CLI构建的Angular 2组件。我想开发一些独立的小部件，如组件&引导那些在我的静态网站或已经存在的非角度web应用程序的组件。有没有办法在Angular CLI中使用生成的构建包来包含在静态HTML页面中，并根据需要引导组件。
或者建议的实现方式是什么，即构建Angular
浏览 0提问于2017-01-22得票数 3
1回答
是否可以将角设置为加载在angular.json中定义为architect/build/options/scripts的外部脚本为type="module"
当运行角时，我可以看到自动注入的脚本标记如下我正在尝试将一个通过npm安装的模板JS Web组件加载到我的应用程序中。模板组件脚本需要作为模块加载</
浏览 2提问于2021-11-05得票数 1
我现在已经在几个项目中使用了NGRX，并且大体上非常喜欢它。但我正在为是否在我的下一个项目中使用它而苦苦挣扎，下一个项目将是创建一个angular组件库。是否建议在angular库项目类型中使用ngrx？您将如何设置根状态与功能状态？我的库项目的主模块是否会附加到ngrx根存储？如果是这样，那么如果我的库在父应用程序中使用，该父应用程序也使用ngrx，那么根存储是否会发生冲突？ 更新(更多上下文)： 库中</
浏览 26提问于2019-02-19得票数 1
回答已采纳
我是Angular的新手，安装了最新版本的Angular。我还集成了管理主题，其中有bootstrap.css，其他CSS和其他JS包括jQuery。我在谷歌上搜索了“如何在Angular中使用外部.js文件”，但没有一个解决方案有效。我已经通过npm install安装了jQuery、Bootstrap和其他jQuery插件js 下面是我的angular.json文件。
浏览 33提问于2019-02-23得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
