首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用ng build在Angular库中构建外部JS (而不是TS)文件?

在Angular库中使用ng build构建外部JS文件是通过Angular的构建工具来实现的。ng build命令用于将Angular应用程序构建为可部署的静态文件。然而,ng build默认只会构建Angular应用程序中的TypeScript文件,而不会处理外部的JavaScript文件。

要在Angular库中构建外部JS文件,可以按照以下步骤进行操作:

  1. 将外部的JS文件放置在Angular库项目的合适位置,例如在src/assets目录下。
  2. 在Angular库项目的根目录下创建一个名为typings.d.ts的文件(如果已存在则跳过此步骤)。
  3. 在typings.d.ts文件中添加以下内容,以告诉TypeScript编译器如何处理外部的JS文件:
代码语言:txt
复制
declare module '*.js' {
  const value: any;
  export default value;
}
  1. 在Angular库项目的根目录下的angular.json文件中,找到"architect" -> "build" -> "options" -> "scripts"属性,并将其修改为以下内容:
代码语言:txt
复制
"scripts": [
  "src/assets/your-external-js-file.js"
]

将"your-external-js-file.js"替换为你实际的外部JS文件路径。

  1. 运行ng build命令来构建Angular库项目,它将会包含外部的JS文件。

这样,使用ng build构建Angular库时,就会将外部的JS文件包含在构建输出中。你可以将构建后的文件部署到服务器或使用其他方式进行使用。

需要注意的是,由于Angular库主要是用于构建和共享可重用的组件、指令和服务等,因此在库中使用外部的JS文件可能会导致一些问题,例如类型定义不一致、依赖关系冲突等。因此,在使用外部JS文件时,需要谨慎处理,并确保与Angular库的其他部分兼容。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)、腾讯云对象存储(COS)、腾讯云云数据库 MySQL(CDB for MySQL)等。你可以通过访问腾讯云官网(https://cloud.tencent.com/)了解更多关于这些产品的详细信息和使用指南。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular Library 快速入门

创建 sf-lib $ ng generate library sf-lib --prefix=sf 这里我们快速总结一下 ng generate library 命令执行的操作: angular.json...文件添加 sf-lib 项目; package.json 文件添加 ng-packagr 依赖; tsconfig.json 文件添加 sf-lib 的引用; 项目中的 projects...: $ ng build --prod sf-lib 小伙伴们,构建 Library 时,记得始终添加 —prod 标志。.../lib/sf-lib.module'; 这里需要说明的是,对于组件来说:设置 @NgModule 的 exports 属性是为了使得元素可见,添加到public_api.ts 入口文件是为了使得 Class...完成新建 ButtonComponent 组件的导出工作后,我们需要使用下列命令,重新构建 sf-lib : $ ng build --prod sf-lib sf-lib 重新构建成功后,我们就可以模板中使用刚创建的

2.3K10

Angular10配置webpack打包 「详细教程」

但是有特殊的需求时就显然不是很灵活,比如想分割一些较大的打包文件、分析每个打包文件组成,自定义webpack一些参数的时候就发现无从下手。 对许多项目的常见依赖项是日期moment.js 。...添加ngx-build-plus: ng add ngx-build-plus npm 包管理器 AngularAngular CLI 和 Angular 应用都依赖于某些所提供的特性和功能,它们都是...当你向应用添加更多组件时,它们也必须在这里声明。 app/package.json 此文件只会出现在使用 --strict 模式创建的应用。此文件不是供包管理器使用的。...添加ngx-build-plus: ng add ngx-build-plus 注意:如果要将其添加到projects文件的特定子项目,请使用--project开关指向它:ng add ngx-build-plus...为true时,如果当前要提取的模块,已经在打包生成的js文件存在,则将重用该模块,不是把当前要提取的模块打包生成新的js文件。 enforce选项:true/false。

4.8K20

angular-cli.json配置参数解释,以及依稀常用命令的通用关键参数解释

", // 指定站点的部署地址,该值最终会赋给webpack的output.publicPath,常用于CDN部署 "styles": [ // 引入全局样式,构建时会打包进来,常用于第三方引入的样式.../karma.conf.js" } }, "defaults": { // 执行`ng generate`命令时的一些默认值 "styleExt": "scss", // 默认生成的样式文件后缀名...--hmr 注意开启之后,只是angular-cli里的webpack添加必要的扩展,等价于webpack-dev-server --hot,还需要在应用代码里处理hmr逻辑,如可在main.ts里添加...下面两条等价: ng build --target=production ng build --prod 7.--environment 指定应用执行环境。...下面两句等价: ng build --environment=prod ng build --env=prod 构建时会加载angular-cli.json指定的环境配置文件: "environments

1.6K30

一个Angular 5教程:一步一步指导实现你的第一个Angular 5应用程序

我们如何显示它不是我们目前的标记?...代码定义了反应式表单不是模板驱动的表单,因此我们更改NewCardInput组件代码: [...] import {FormBuilder, FormGroup, Validators} from...您可以项目的所有部分使用文件的值,并environment.tsAngular CLI负责提供来自相应项目的内容时将其包含在内environment.your-environment.ts。...两者都是不可变的,但第二个是基于第一个的,所以State我们创建一个新的State对象,不是我们的变异值上。...准备生产 因此,让我们构建我们的应用程序供生产使用 为此,我们运行build命令: ng build --aot -prod 65% building modules 465/466 modules

42.5K10

玩转 Angular 环境变量

environment.ts 和 environment.prod.ts Angular CLI 发布后,越来越多的开发者都是使用 Angular CLI 来创建新的项目: $ ng new PROJECT-NAME...通过上面的注释,我们知道执行 ng build ---prod 命令,进行项目构建的时候,会执行文件替换操作。...相应的文件替换规则, angular.json 文件定义: "architect": { "build": { "builder": "@angular-devkit...} ] } 最后我们来测试一下,还记得发布正式版本时,我们通过以下命令进行项目构建: $ ng build --prod 那么有的同学,可能想到对于构建测试环境的包,是不是只要运行...: $ ng build --test 想象很完美,但实际上并不是这样,ng build 命令并不支持 --test 参数,感兴趣的同学可以运行 ng build --help 命令查看 ng build

3.2K20

Angular SSR 探究

- 添加开发、构建 SSR 应用所需要的配置 package.json ,会自动添加一些 npm 脚本:dev:ssr 用于开发环境运行 SSR 版本;serve:ssr 用于直接运行 build...替换浏览器 API由于 Universal 应用不是浏览器执行,因此一些浏览器的 API 或功能将不可用。...这是因为 Angular 使用了动态路由,比如 /product/:id 这种路由,页面的渲染结果要经过 JS 的执行才能知道,因此,Angular 使用了 Express 作为 Web 服务器,能在服务端运行时根据用户请求... prerender(npm run prerender)会在构建时生成静态 HTML 文件。...products/555然后命令行参数指定该文件ng run :prerender --routes-file routes.txt项目的 angular.json 文件配置需要的路径

10.2K51

如何管理云原生应用程序的依赖关系

云原生应用是使用微服务开发的,微服务是小型、独立的服务,它们共同组成了一个更大的应用程序。 微服务是一种能够让开发者更轻松地构建和维护大型应用程序的软件架构。...内部依赖是指同一软件系统两段代码之间的依赖关系,外部依赖是指位于不同软件系统的两段代码之间的依赖关系。...开发者如果不够谨慎,便会通过依赖存在已知漏洞的代码,很容易将漏洞引入它们的代码。这就是为什么安装第三方依赖关系之前需要对它们进行扫描,并在它们可用时应用安全补丁是很重要的。.../build -prune -or \ \( -name "*.ts" -or -name "*.js" -or -name "*.json" \) -print > $FILES function...因此,各种各样的组织利用自动化的依赖关系管理工具,以确保他们的依赖关系一致的基础上及时地保持更新。NPM 应用程序的依赖关系是仓库的 package.json 文件定义的。

1.7K10

Angular学习(02)--Angular-CLI命令

指令 @Directive 等各种各样的东西,每一种类型的 ts 文件,都需要有一些元数据的配置项。...比如创建项目生成初始骨架的命令、创建组件、指令、服务这类文件命令; 或者是执行 build 编译命令,或者是 server 构建命令等等。...ng g directive 这个是创建指令的命令,组件其实是指令的一种,所以,上面介绍的关于组件命令的各种选项配置,指令这里也基本都可以使用,这里不列举了,清楚相关默认文件来源后,不懂的,去翻阅下就可以了...那么,这种时候就不能用 ng server 命令了,只能使用 ng build 命令,但该命令,默认只是编译项目,那么岂不是每次代码发生修改,都得重新跑一次 ng build 命令?...spring boot,所以 Angular 项目使用 ng build 命令编译输出到后端项目的容器,后端跑起来,就可以直接在本地调试了。

2.6K10

Angular实战之使用NG-ZORRO创建一个企业级后台框架(进阶篇)

前言:   上一篇文章我们讲了如何在创建的Angular项目中快速引入ng-zorro-antd企业台组件,并且快速构建后台管理页面框架模板。...让你快熟的构建一个属于自己的NG-ZORRO后台管理框架,注意我们的前端代码的编写全部都是VS Code上面编写。 Angular项目目录介绍(重要): ?...// 入口ts文件 |-- polyfills.ts // 不同浏览器兼容脚本加载 |-- karma.conf.js // 自动化测试框架Karma的配置文件 |-- style.css // 整个项目的全局...运行应用程序的端到端 (E2E) 测试 构建应用程序 使用命令添加功能到现有的 Angular 应用程序: 可以使用 ng generate 命令,为已有的 Angular 应用程序添加新的功能: ng...修改项目默认调转页面,Angular应用多模块路由配置: 找到app-routing.module.ts文件【routes】对象声明新模块路由,以及项目默认调转页面地址修改。 ?

3.9K20

Angular-内存溢出的问题

本项目用的是angular6搭建,用动态组件的形式来显示页面,之前遇到过因为内存溢出导致无法aot的问题, Angular4以上的该方法都适用 解决方法:手动改写内存上限 修改目录: my-project...\@angular\cli\bin\ng" %* ) ELSE ( @SETLOCAL @SET PATHEXT=%PATHEXT:;.JS;=;% node --max_old_space_size...)文件过多; 2)订阅数据没有销毁占用内存,(看了下订阅的数据很少,应该不是的); 3)因为所有的组件都在一个根目录下(上面说了,用的动态组件没用路由),导致需要编译的组件过多?...4201 --live-reload false", "build": "ng build", "test": "ng test", "lint": "ng lint",.../node_modules/@angular/cli/bin/ng build --prod --build--optimizer --base-href /pms/" }, "private"

2.3K20

Angular4记账webApp练手项目之一(利用angular-cli构建Angular4.X项目)

前提 1、已经安装了node.js环境 2、已经安装了npm环境 windows可以通过cmd输入以下指令查看 node -v // node版本 npm -v // npm版本...ng build 开发项目 用自己喜欢的开发工具打开项目文件夹。vs code、webStroem或者其他 ? 这里写图片描述 和vue-cli构建的vue2项目很类似。...我们主要修改src文件夹下的内容。其中我们新建的代码放在app。其中spec.ts 文件是测试文件,可以删除。...count-month 每个组建默认都有四个文件,图中已经把测试文件删除了,剩下一看后缀就知道,.css里是放样式的,.html里是页面布局的,.ts里是写代码的。...这里写图片描述 用官方提供的指令创建,会将组件自动添加到app.module,我们就可以直接使用了。 ? 这里写图片描述 app.component.html使用组件 ? 这里写图片描述 ?

1K30

Angular 5.0.0发布!

Angular Universal团队还把平台服务器Domino加到了平台服务器。Domino支持服务器端环境下更多的开箱即用的DOM操作,可以改进我们对非服务端第三方JS及组件的支持。...这样可以使用只能在运行时计算的装饰器中被降级(lower)的值。 因此现在可以不使用命名函数,改用Lambda函数。换句话说,执行代码不会影响你的d.ts或你的外部API。...以前版本的Angular,我们一直依赖浏览器及其i18n API提供数值、日期和货币格式。为此,很多开发者都在使用腻子脚本(polyfill),结果也不好。...在这次小版本升级,我们默认打开了构建优化器,让开发者拿到更小的包。 我们还修改了使用 .tsconfig文件的方式,以更严格地遵守TypeScript标准。...现在你可以控件层面控制验证和更新值的时机了,也可以表单层面设置。 此外,你现在可以直接在选项中指定 asyncValidators,不是通过第三个参数指定。

4.4K40
领券