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

当我运行ng build --prod时,<router-outlet>中的(activate)事件不起作用

当您运行ng build --prod命令时,<router-outlet>中的(activate)事件不起作用的原因可能是由于在生产模式下,Angular会进行代码优化和压缩,可能会导致某些特定的事件绑定无法正常工作。

解决这个问题的方法是使用Angular提供的ng build --prod --aot=false命令来禁用AOT(Ahead-of-Time)编译。AOT编译是Angular的一种优化技术,它将模板编译为可执行的JavaScript代码,以提高应用的性能和加载速度。然而,在某些情况下,AOT编译可能会导致某些事件绑定失效。

禁用AOT编译后,重新运行ng build --prod --aot=false命令,应该可以解决<router-outlet>中的(activate)事件不起作用的问题。

关于Angular的AOT编译和生产模式构建的更多信息,您可以参考腾讯云的Angular开发文档中的相关章节:

请注意,以上答案仅供参考,具体解决方法可能因您的具体项目配置和环境而有所不同。建议您在遇到问题时,参考官方文档或向相关技术社区寻求帮助,以获得更准确和详细的解决方案。

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

相关·内容

Angular CLI 简介

首先修改上一个例子代码: 执行ng build: 可以看到生成了这些文件. 把dist里面的index.html格式化一下看看: 可以看到它引用了生成5个js文件....因为ng build是开发build, 所以没有做任何优化, 文件挺大. 这时看一下文件目录, 并没有dist目录: 那么这些文件是怎么被serve呢?...ng build ng build --prod Environment environment.ts environment..prod.ts 缓存 只缓存css里引用图片 所有build文件 source...=dev 下面则是生产build: ng build --prod ng build --prod -e=prod ng build --target=production --environment=...--proxy-config -pc 代理配置 --prod 在内存serve 生产模式build文件 试试 --prod: ng serve --prod 通过文件大小可以看出确实是prod

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

    当我们描述了我们组件职责,显然这应该是一个卡片列表组件。...让我们试着在用户击中enter密钥做到这一点。我们需要监听组件DOM keypress事件并输出由此触发Angular事件。...我们在我们组件订阅我们观察器。它们被用在我们应用程序不同部分,所以它们可能会一路销毁 - 例如,当我们在路由中使用组件作为页面(我们将在本指南后面讨论路由)。...只是为了让您对这些环境文件在这里有所了解,它们实际上包含在编译阶段项目中,并且.prod.该部分由--environment交换机为ng serveor 定义ng build。...准备生产 因此,让我们构建我们应用程序供生产使用 为此,我们运行build命令: ng build --aot -prod 65% building modules 465/466 modules

    42.6K10

    使用Angular CLI进行Build (构建) 和 Serve

    首先修改上一个例子代码: ? 执行ng build: ? ? 可以看到生成了这些文件. 把dist里面的index.html格式化一下看看: ? 可以看到它引用了生成5个js文件....打开main.bundle.js可以看到我写代码: ? 下面运行程序: ng serve -o: ? 可以看到在ng serve时候, 加载了上述文件....因为ng build是开发build, 所以没有做任何优化, 文件挺大. 这时看一下文件目录, 并没有dist目录: ? 那么这些文件是怎么被serve呢?...ng build ng build --prod Environment environment.ts environment..prod.ts 缓存 只缓存css里引用图片 所有build文件 source...--proxy-config -pc 代理配置 --prod 在内存serve 生产模式build文件 试试 --prod: ng serve --prod ?

    2.3K70

    玩转 Angular 环境变量

    通过上面的注释,我们知道在执行 ng build ---prod 命令,进行项目构建时候,会执行文件替换操作。...我们通过以下命令进行项目构建: $ ng build --prod 那么有的同学,可能想到对于构建测试环境包,是不是只要运行: $ ng build --test 想象很完美,但实际上并不是这样,ng...build 命令并不支持 --test 参数,感兴趣同学可以运行 ng build --help 命令查看 ng build 命令所支持参数: usage: ng build ...其实 ng build 命令支持很多参数,上面我们只是列出了常用几个。...: $ ng build --configuration=test 上述命令成功运行之后,就会在根目录下生成 dist 目录,并且在该目录下也会创建一个 PROJECT-NAME 目录。

    3.3K20

    Angular 从入坑到挖坑 - 路由守卫连连看

    -- 404 页面 ng g component page-not-found 在 app-routing.module.ts 文件完成对于项目路由定义,这里包含了对于路由重定向、通配路由,...ng g component crisis-detail 接下来在 crisis-list 添加 router-outlet 标签,用来定义子路由渲染出口 危机中心 在针对子路由认证授权配置,我们可以选择针对每个子路由添加 canActivateChild 属性,...这里问题与配置通配路由需要放到最后原因相似,因为脚手架在帮我们将创建模块导入到 app.module.ts ,是添加到整个数组最后,同时因为我们已经将 crisis 模块路由配置移动到专门...路由守卫来进行路由认证授权,但是当我们并没有权限访问该路由权限,却依然点击了链接,此时框架路由仍会加载该模块。

    3.8K30

    用于监控USB设备连接事件取证工具

    )USB设备,这些设备出现在历史记录但不会出现在auth.json; 当使用-s标志安装创建加密存储(7zip存档)以在crontab调度程序帮助下自动备份和积累USB事件; 根据特定USB设备...因此,如果更改syslogs格式(如,使用syslog-ng或rsyslog),它将无法解析USB历史记录。.../installers/install.sh,可以使用一些额外功能: 自动创建虚拟环境; 存储模块变为可用:你可以设置crontab job,按计划备份USB事件(你可以在usbrip/cron/usbrip.cron...警告:如果你使用是crontab计划任务,则需要使用sudo crontab -e配置cron job,以强制storage update子模块以root用户身份运行,并保护USB事件存储密码。...记录usbrip活动,参见usbrip/cron/usbrip.cron); /var/opt/usbrip/trusted/— 受信任USB设备列表(在安装过程创建); /usr/local/bin

    2.3K30

    Angular CLI 常用终端操作命令

    CLI常用命令 ---- ng new project-name - 创建一个新项目,置为默认设置 ng build - 构建/编译应用 ng test - 运行单元测试 ng e2e - 运行端到端(...关于CLI生成路由 ---- CLI以多种方式支持路由: 初始化创建项目,自动添加了 @angular/router ,自动添加到package.json 文件 生成模块路由时候可以使用指令...该--routing选项还会生成与模块名称相同默认组件。 您可以在创建或初始化项目使用该--routing选项ng new来创建app-routing.module.ts文件。...--environment=dev--environment=prod 可以在 angular-cli.json 该文件配置映射编译环境路径 //angular-cli.json...ng build --environment=loca ng build --environment=prod 关于代理服务器 ---- 在webpackdev服务器中使用代理支持,我们可以高速缓存某些

    2.1K40

    Angular 工具篇之分析包大小

    : $ npm i webpack-bundle-analyzer --save-dev 接下来我们使用 Angular CLI 来构建项目,在构建时候,需要添加相关参数,具体如下: $ ng build...在 angular6-example-app 项目中,也为我们提供了相应 npm script,具体如下: "bundle-report": "ng build --prod --stats-json...首先我们先来在当前项目中安装 source-map-explorer: $ npm i source-map-explorer --save-dev 然后在重新进行项目构建: $ ng build --.../source-map-explorer dist/main.d72e9d91fd17f9fe7b8c.js 成功执行上述命令后,在浏览器你将会看到以下内容: ?...为了方便操作,我们也可以定义一个 npm script 任务来处理上述工作: "map-explorer": "ng build --prod --source-map && source-map-explorer

    2.4K40

    AngularJs之路由配置(一)

    1.我们可新建一个路由项目   ng new 项目名称 --routing 我们可以看到路由项目有app-routing.modules.ts ?...路由配置主要有五个参数: ? 我们新建好home组件后在app-routing.modules.ts配置路路径 ? 如上图所示意思就是启动项目后比如localhost:8008/ 根据 ?...配置可以看出home路径下展示是homeComponent所示当我们访问localhost:8008/ 看到页面就是home组件上内容 2.路由传参数 上述路由肯定不能满足我们需求,比如我们进入到商品页面...4.路由是单页面应用基础,比如header标签内容不变,我们需要点击主页或者商品详情替换路由内容,我们需要指定路由内容位置 比如现在点击商品详情实现路由跳转,我们需要在页面中使用 ?...router-outlet标签来指定路由内容占位符,及/home,Home组件就在这里来显示

    89830

    Angular开发实践(六):服务端渲染

    这些页面不会处理浏览器事件,不过它们可以用 routerLink 在这个网站中导航。 在实践,你可能要使用一个着陆页静态版本来保持用户注意力。.../app/app.server.module'; 4、修改客户端应用引导程序文件:src/main.ts 监听 DOMContentLoaded 事件,在发生 DOMContentLoaded 事件运行我们代码...当你应用需要那些只有当运行在服务器实例才需要信息,就要提供 extraProviders 参数。 ngExpressEngine 函数返回了一个会解析成渲染好页面的承诺(Promise)。...在 package.json scripts 区配置 build 和 serve 有关命令: { "scripts": { "ng": "ng", "start...": "ng build --prod && ng build --prod --app 1 --output-hashing=false", "build:prerender": "npm

    4.8K100

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

    Angular提供了一组生命周期hooks(特殊事件),可以被分接到生命周期中,并在需要执行操作。构造函数会在所有生命周期事件之前执行。每个接口都有一个前缀为nghook方法。...保护运行后,它将解析路由数据并通过将所需组件实例化到 来激活路由器状态。...这通常用在setter,当类值被更改完成。 可以通过模块任何一个组件,使用订阅方法来实现事件发射订阅。.../node_modules/codelyzer", "typescript.tsdk": "node_modules/typescript/lib" } 从cli运行代码:ng lint...Observable类似于(在许多语言中)Stream,当每个事件调用回调函数,允许传递零个或多个事件

    17.3K80
    领券