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

如何让Angular监视多个库的更改并在需要时重新编译

在Angular中,可以使用Angular CLI的ng build命令来编译应用程序。要监视多个库的更改并在需要时重新编译,可以使用Angular CLI的ng build --watch命令。

ng build --watch命令会监视应用程序和库中的文件更改,并在文件更改时重新编译它们。这对于开发过程中的实时更新非常有用。

然而,Angular CLI默认情况下只会监视当前应用程序的更改,而不会监视依赖的库的更改。为了让Angular监视多个库的更改并重新编译,可以使用以下步骤:

  1. angular.json文件中的projects部分,找到需要监视的库的配置。每个库的配置都有一个architect部分。
  2. 在每个库的architect部分中,找到buildtest配置。这些配置指定了构建和测试的脚本。
  3. 在这些配置中添加一个watch参数,将其设置为true。例如:
代码语言:txt
复制
"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      ...
    },
    "configurations": {
      "production": {
        ...
      }
    },
    "watch": true  // 添加这行代码
  },
  "test": {
    "builder": "@angular-devkit/build-angular:karma",
    "options": {
      ...
    },
    "watch": true  // 添加这行代码
}

通过添加"watch": true,Angular CLI会监视库的更改并在需要时重新编译它们。

请注意,这种方法只适用于在angular.json中配置了库的情况。如果你的库是通过其他方式进行构建和引用的,可能需要进行其他配置。

推荐的腾讯云相关产品:

  • 云服务器(CVM):提供可扩展的计算容量,支持各类应用部署和运行。产品介绍:云服务器
  • 云原生容器服务(TKE):用于快速构建和管理容器化应用的托管服务。产品介绍:云原生容器服务
  • 云数据库 MySQL 版(TencentDB for MySQL):提供可扩展、高可用、自动备份的云数据库服务。产品介绍:云数据库 MySQL 版
  • 腾讯云CDN:提供全球加速、高可靠的内容分发网络服务。产品介绍:腾讯云CDN
  • 腾讯云安全组:用于设置云服务器的网络访问控制的网络安全服务。产品介绍:腾讯云安全组

以上是关于如何让Angular监视多个库的更改并在需要时重新编译的完善且全面的答案。

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

相关·内容

【17】进大厂必须掌握面试题-50个Angular面试

同样,这些应用程序组件可以立即执行,而无需任何客户端编译。这些应用程序中模板作为代码嵌入其组件中。它减少了下载Angular编译需要,从而使您免于繁琐任务。...由于所有监视变量都包含在单个循环中,因此任何变量任何更改/更新都将导致重新分配DOM中存在其余监视变量。...被监视变量处于单个循环(摘要循环)中,任何变量任何值更改都会在DOM中重新分配其他被监视变量值 32.区分DOM和BOM。...为了在Angular应用程序中执行动画,您需要包括一个称为Animate Library特殊Angular,然后将ngAnimate模块引用到您应用程序中,或者将ngAnimate作为依赖项添加到您应用程序模块内部...当Angular找到ng-app指令,它将加载与其关联模块,然后编译DOM。 手动引导: 手动引导为您提供了有关如何以及何时初始化Angular应用程序更多控制。

41.3K51

Angular12个经典问题,看看你能答对几个?(文末附带Angular测试)

Angular提供了一组生命周期hooks(特殊事件),可以被分接到生命周期中,并在需要执行操作。构造函数会在所有生命周期事件之前执行。每个接口都有一个前缀为nghook方法。...这是最常用方法,用于从后端服务检索模板数据。 ngDoCheck:检测并在Angular上下文发生变化时执行。每次更改检测运行时,会被调用。...如何实现不出现编辑器警告自定义类型? 在大多数情况下,第三方都带有它.d.ts 文件,用于类型定义。...优点: 更快下载:由于应用程序已经编译,许多Angular编译器相关就不再需要捆绑,应用程序包变得更小,所以该应用程序可以更快地下载。...这需要等待下载所有必需组件,然后等待编译器花费时间来编译应用程序。使用AOT编译,就能实现优化。 在构建检测错误:由于预先编译,可以检测到许多编译错误,能够为应用程序提供更好稳定性。

17.3K80
  • 2、Angular JS 学习笔记 – 双向数据绑定和Scope概念

    首先,模板通过浏览器编译, 这个编译步骤生成一个实时视图.对该视图所做任何更改会立即反映在模型,在模型任何更改都会传播到视图....由于视图只是一个模型投影,它将控制器和视图完全隔开,不需要关注视图. 这样隔离Controller没有dom和浏览器依赖,更加容易测试。 什么是作用域?...当回调执行完成后,浏览器重新渲染dom,然后返回继续等待更多事件。 当浏览器调用js代码不在angular执行上下文,意味着angular无法发现模型修改。...这个延迟是必要,因为它收集多个模型更新到一次watch通知中,保证在watch通知没有其他watch已经在运行。...一个显式调用只有在实现自定义事件会调用使用,或在工作在第三方回调中。 进入Angular执行上下文通过调用scope.

    13.2K20

    AngularDart 4.0 高级-生命周期钩子 顶

    开发人员可以通过在Angular core中实现一个或多个Lifecycle Hook界面来挖掘该生命周期中关键时刻。 每个接口都有一个单一钩子方法,其名称是以ng开头接口名称。...生命周期序列 通过调用其构造函数创建组件/指令后,Angular在特定时刻按以下顺序调用生命周期钩子方法: 钩子 作用和时机 ngOnChanges Angular重新)设置数据绑定输入属性响应。...OnChanges 看看每次组件输入属性发生变化时,Angular如何用变更对象调用ngOnChanges钩子。 显示如何解释更改对象。...DoCheck 使用自定义更改检测实现ngDoCheck方法。 看看Angular多久会调用这个钩子,并在更改日志后观察它。 AfterView 通过视图显示Angular意图。...英雄们永远不会知道他们正在被监视。 一边开玩笑,注意两点: Angular为指令和组件调用钩子方法。 间谍指令可以提供对不能直接更改DOM对象洞察。 显然,你不能触摸本地div实现。

    6.2K10

    IntelliJ IDEA 2022.2.2汉化版免登陆账号「winmac」

    - “提取方法”新预览面板IntelliJ IDEA为Extract Method重构引入了一个新预览面板。在确认更改之前,它可以您了解重构结果。当您重复使用重复代码片段,这非常有用。...支持此功能所有语言属性(现在包括Java和Groovy)可以在Preferences / Settings中更改 编辑| 配色方案| 语言默认值| 标识符| 重新分配。...- 多个github帐户使用IntelliJ IDEA 2019,您可以根据需要配置任意数量github帐户(在“首选项”|“版本控制”|“github”中),并为每个项目设置默认 github帐户.... | Angular Dependency ...ng在不使用终端情况下安装支持使用add 进行安装操作。...10、文件观察器插件全球文件观察者您现在可以在IDE设置中存储已配置文件监视器,并在不同项目中使用它们,因为现在可以像以前一样设置全局文件监视器而不是每个项目一个。

    4.7K30

    再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

    当你写下表达式如{{ val }},AngularJS在幕后会为你在scope模型上设置一个watcher(表达式将被 Angular 编译成一个监视函数),它用来在数据发生变化时候更新view。...除了ng-click指令,还有一些其它built-in指令以及服务来更改models(比如ng-model,$timeout等)和自动触发一次$digest循环。 目前为止还不错!...当 $digest 循环结束,DOM 相应地变化。 脏检查如何被触发? angular 会在可能触发 UI 变更时候进行脏检查:这句话并不准确。...里面调接口获取数据,那么每次该 tab 被选中都会重新加载 各位读者自己取舍。...编译模板后如何获取编译模板内容并将其转成字符串

    7.8K40

    Angular入门,开发环境搭建,使用Angular CLI创建你第一个Angular项目

    前言:   最近一直在使用阿里NG-ZORRO(Angular组件)开发公司后端管理系统,写了一段时间Angular以后发现对于我们.NET后端开发而言真是非常友善。...因此这篇文章主要是对这段时间使用Angular做一些小总结,希望可以帮到有需要同学。...钩子 用途及时机 ngOnChanges() 当 Angular重新)设置数据绑定输入属性响应。...[请求数据使用] ngDoCheck() 检测,并在发生 Angular 无法或不愿意自己检测变化时作出反应。...直接通过命名运行脚手架搭建项目: ng serve --open ng serve 命令会启动开发服务器、监视文件,并在这些文件发生更改时重建应用。

    2.8K20

    【译】.NET Core 3.0 Preview 3中关于ASP.NET Core更新内容

    这对连接速度较慢用户有着更大影响,如2G/3G手机。 它可以搜索引擎很容易搜索到你应用程序。 对于使用更快连接用户(如内网用户),此功能影响较小,因为无论如何用户界面都应该立即出现。...另外,Razor类还不支持静态资源。如果要在库中创建可与Blazor和Razor组件应用程序共享组件,仍然需要使用Blazor类。这写问题会在未来更新中解决。...这些组件提供默认行为,用于在编辑验证并更改它们CSS类以反映字段状态。...在本节中,我们将展示如何创建一个新Angular或React模板,该模板允许我们对用户进行身份验证并访问受保护API资源。...ASP.NET Core应用程序包括已配置Identity Server实例,可是Angular应用程序很方面的对用户进行身份验证,并针对ASP.NET Core应用程序中受保护资源发送HTTP请求

    22.6K10

    前端人员该怎么面试 经典Angular面试题有哪些

    当@angular/core数据绑定属性更改时,处理就会更改,在从DOM中删除其模板之前,就会销毁掉它。...Angular提供了一组生命周期hooks(特殊事件),可以被分接到生命周期中,并在需要执行操作。构造函数会在所有生命周期事件之前执行。每个接口都有一个前缀为nghook方法。...在Angular2中,组件中发生任何改变总是从当前组件传播到其所有子组件中。如果一个子组件更改需要反映到其父组件层次结构中,我们可以通过使用事件发射器api来发出事件。...优化取决于应用程序类型和大小以及许多其他因素。一般来说,在优化Angular 2应用程序时要考虑以下几点: 1)考虑AOT编译。...6)如果应用程序较大,我会考虑延迟加载而不是完全捆绑应用程序。 4、什么是Shadow DOM?它如何帮助Angular 2更好地执行?

    4.1K80

    Angular 2:Web技术发展必然选择

    开发出来软件质量更好。 现在,我们来简要讨论一下:如何在全新Angular 内核中融合上面提到这些技术?为什么要这样做?...如果要在AngularJS 1.x 中增加对Web Component 支持,一种可行策略就是:修改原有的指令实现,并在DOM 编译器中引入新原语。...WebWorker 允许在另一个线程里面执行计算密集型任务,从而解放主线程,它可以处理用户输入并渲染用户界面。 那么,在Angular 里面如何使用WebWorker 呢?...每绑定一块数据都会添加一个新监视器(watcher)。一旦digest 循环开始运行,它就需要遍历所有监视器,执行与之相关表达,并把返回结果与上一次遍历所获得结果做比较。...在监视器回调函数内部,Angular 经常直接操作DOM,从而无法把监视器移到WebWorker 中去,因为WebWorker 是在独立上下文中被调用,无法直接访问DOM。

    1.8K10

    Angular 1 vs. Angular 2 深度比较

    我我们了解下Angular 1 和 2 区别,以及新设计目标将如何实现。 Angular 2 当前仍处于 Alpha/开发预览阶段,但是主要功能和核心文档都已经可用了。...重新运行变动检查,检查是否有更多变化发生,重新运行监视器,等等 Angular 1 绑定运行后果 结果是 DOM 一直同简单 Javascript 对象进行同步,尽管这样可以工作,但是这使得有时难以进行推论...: 不清楚哪些监视器会运行,什么顺序,多少次 模型更新顺序难以推论和预期 摘要循环多次运行导致时间消耗 Angular 团队制定 Angular 2 开发方向,其中一点是提取 Angular...他可以用于很多场景,比如可以允许框架生成更长跨越多个 JavaScript VM 堆栈跟踪信息。...Angular 2 如何因 Zones 而更透明 Angular 2 使用 zones 机制使摘要循环不再被需要

    2.8K100

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

    一、ngx-build-plus 建立额外配置 这里推荐一个工具ngx-build-plus,不需要改很多东西就能在现有项目进行集成。接下来教大家如何使用,具体详情可以去github上找文档。...第二步:创建工作区和初始应用 Angular 工作区就是你开发应用的上下文环境。 每个工作区包含一些供一个或多个项目使用文件。 每个项目都是一组由应用、或端到端(e2e)测试构成文件。...ng serve --open 1 ng serve 命令会自动启动服务器,并监视文件变化,当你修改这些文件,它就会重新构建应用。...2.分离第三方 要将第三方分离出来,我们需要调整配置文件,设置 chunks: 'all',即表示所有加载类型模块在某些条件下都能打包。...需要注意是,默认angular-cli打包生成入口文件也被配置成了index.html,所以我们需要更改angular.jaon文件中配置。

    5K20

    Angular v16 来了!

    启用细粒度反应性,在未来版本中,这将允许我们仅检查受影响组件中更改 通过在模型更改时使用信号通知框架,使Zone.js在未来版本中成为可选 提供计算属性,而不会在每个变化检测周期中重新计算...在新完整应用程序非破坏性水合作用中,Angular 不再从头开始重新渲染应用程序。相反,该框架在构建内部数据结构查找现有的 DOM 节点,并将事件侦听器附加到这些节点。...我们要强调Angular CLI 完全依赖 Vite 作为开发服务器。为了支持选择器匹配,Angular 编译需要维护组件之间依赖图,这需要与 Vite 不同编译模型。...改善开发者体验 除了我们关注大型计划外,我们还致力于带来高度要求功能。 所需输入 自从我们在 2016 年引入 Angular 以来,如果您不为特定输入指定值,就不可能出现编译错误。...由于 Angular 编译器在构建执行检查,因此更改在运行时增加了零开销。多年来,开发人员一直 要求 此功能 ,我们得到了一个强烈迹象,表明这将非常方便!

    2.6K20

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

    Angular是一个完全集成框架,可以您快速开始项目工作,无需考虑选择哪个以及如何处理日常问题。我认为Angular是作为前端,就像RoR是作为后端。...另一件要提到事情是Angular CLI和它Webpack负责编译TS到JS,所以你不应该IDE为你编译它。...它还监视项目源中每个更改重新编译所有更改,之后它会要求浏览器重新加载打开页面。因此,通过使用Angular CLI,我们已经在开发环境中工作,无需编写配置或实际执行任何操作。...每次我们改变我们代码Angular CLI都会重新编译,如果需要的话重新注入,并要求我们浏览器在页面打开重新加载页面。...想想像这样:我们刚刚实现了在我们表单发生变化时调用代码。如果我们用承诺处理用户更改,则只有第一个用户更改会在我们需要重新订阅之前处理。

    42.6K10

    Angular 6正式版发布,都有哪些新功能

    官方升级手册链接如下: https://update.angular.io/ ng update可以帮助你使用正确版本依赖包,依赖包与你应用程序同步,使用 schematics ,第三方还能提供脚本更新...如果你某个依赖包提供了ng update schematic,那么它在进行重大更改时会自动更新代码!...ng update不会取代你软件包管理器,而是在后台使用 npm 或 yarn 来管理依赖包,除了更新和监视依赖包外,ng update还会在必要时候对你项目进行改造。...CLI v6 现已支持多项目工作区,如多个应用程序或,CLI 项目用 angular.json 取代 angular-cli.json 构建和配置项目。...Shakable Providers 为了应用更小,我们将服务引用模块改为模块引用服务,这让我们只需要构建在模块里注入服务。

    4.2K20

    angular5面试题_大数据面试题

    : 升级angular自身,以及依赖 ng version: 显示anuglar cli全局版本、以及本地angular cli、angular code等版本 ng add: 新增第三方。...会做2件事,1)基于npm安装node_modules, 2)自动更改配置文件,保证新依赖正常工作 关于angular依赖注入(dependency injection) 依赖注入是Angular实现一种应用程序设计模式...关于angular编译,AOT和JIT区别 每个Angular应用程序都包含浏览器无法理解组件和模板。 因此,在浏览器内部运行之前,需要编译所有Angular应用程序。...脏值检测基本原理是存储旧数值,并在进行检测时,把当前时刻新值和旧值比对。若相等则没有变化,反之则检测到变化,需要更新视图。 angular2中有了Zone.js。...如果有遗留,那么打包也会打进来。 确保应用中已经移除了不使用第三方。同上。 项目较大,考虑延迟载入(Lazy Loading), 保证首页加载速度。

    4.3K20

    Angular 11正式发布:加入webpack 5,升级至TS 4.0,不再支持IE 9 和10

    编译Angular CLI 将下载和内联在应用程序中使用和链接字体。我们会在使用版本 11 构建应用中默认启用此功能。要利用这一优化,你需要就是更新自己应用!...热模块替换(HMR)支持更新 Angular 提供了对 HMR(Hot Module Replacement)支持,但启用它需要一些配置和代码更改操作,所以不方便快速添加到 Angular 项目中。...安装依赖项,ngcc 更新流程现在加快到了 2-4 倍。 TypeScript v4.0 编译速度加快了。 实验性 Webpack 5 支持 现在,团队可以选择加入 Webpack v5 了。...IE11 是 Angular 还在支持唯一 IE 版本。我们还移除了一些已弃用 API,并在弃用列表中添加了一些项目。...如何获取版本 11 更新 当你准备好,请运行以下命令来更新 Angular 和 CLI: ng update @angular/cli @angular/core 可以前往 update.angular.io

    3.3K30

    Angular v18 现已推出!

    如需直观概述,请务必查看我们发布活动中视频:不断发展变化检测从历史上看,一个名为 zone.js 负责触发 Angular 更改检测。该具有许多开发人员体验和性能缺点。...handleClick例如,当用户单击上面的按钮,由于调度程序合并,Angular 将仅运行一次更改检测。在我们文档中了解更多信息。...我们引入了人为加载延迟来模拟非常慢网络连接。想象一下,当页面正在加载并且尚未补水,用户想要将多个耳机添加到他们购物车中。如果页面尚未冻结,因此不是交互式,则所有用户事件都将丢失。...此更改将加快您 Angular CLI 安装时间。路由重定向作为函数为了在处理重定向实现更高灵活性,在 Angular v18 中,redirectTo 现在接受返回字符串函数。...社区亮点随着 Angular 创新,我们也看到了社区中大量进步!ngrx、ngxs 和 rxAngular 等流行状态管理已经在采用 Angular 信号,并在组件中实现细粒度反应性。

    20210

    JavaScript框架比较:AngularJS vs ReactJS vs EmberJS

    Angularjs优缺点 优点: 创建自定义文档对象模型(DOM)元素。 简单UI设计和更改。 在HTML文档中创建输入字段,将为每个已渲染字段创建单独数据绑定。...Angular倾向于在重新渲染之前检查页面上每个单个绑定字段任何变化。 依赖注入。 简单路由。 易于测试代码。 此框架利于HTML语法扩展,并通过指令创建可重用组件。...Angular 2功能与上述不同。Angular 2不是从Angular 1重新设计,它被完全重写了。两个版本框架之间巨大变化在开发人员之间引起了相当大争议。...可以同时更新多个绑定,而不需要耗时DOM更新。 直截了当地将状态直接链接到UI。状态参数作为对象传递,并合并到React组件内部参考状态。 使用Handlebars默认模板引擎。...这需要深入了解所考虑每个框架优点和缺点,以及它们如何在不同用例下竞争。所有框架都有很多共同点:开源,在许可证下发布,并创建具有MVC设计模式SPA。它们都有视图,事件,数据模块和路由。

    12.7K60

    编译 Azure Static Web App 如何指定 Node.js 版本

    但是,Oryx 目前使用 Node 版本是 14.x。我想使用 16.x 来编译应用程序。在 GitHub Action 编译日志中,可以看到正在使用Node 14.x 版本。...Azure Static Web Apps 是一种服务,可从代码存储自动生成完整堆栈 Web 应用,并将其部署到 Azure。 Azure 静态 Web 应用工作流适用于开发人员日常工作流。...基于代码更改生成并部署应用。 当你创建 Azure Static Web Apps 资源,Azure 会直接与 GitHub 或 Azure DevOps 交互以监视你选择分支。...每次你向受监视分支推送提交或接受拉取请求,系统都会自动运行一次生成,并将你应用和 API 部署到 Azure。...通常使用不需要服务器端渲染和框架(例如,Angular、React、Svelte、Vue 或 Blazor)来生成静态 Web 应用。

    1.3K20
    领券