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

无法仅在dev上读取ng serve上未定义的angular 8的属性'id‘。ng-serve --prod工作正常

问题描述: 在使用Angular 8开发过程中,当在dev模式下运行ng serve命令时,无法读取到属性'id'的定义。但是在ng serve --prod模式下却可以正常工作。

解决方案:

  1. 确认属性'id'的定义: 首先,需要确认在Angular组件或模板中是否正确定义了属性'id'。请检查相关的组件类文件和模板文件,确保属性'id'在相应的类中被声明和初始化。
  2. 检查编译配置: 在开发模式下,Angular使用JIT(即时编译)来编译和运行应用程序,而在生产模式下使用AOT(预编译)来进行编译。这可能导致在开发模式下出现属性'id'未定义的问题。 可以尝试检查Angular项目的编译配置,确保在开发模式下也进行AOT编译。可以在angular.json文件中的"configurations"部分添加以下配置:
  3. 检查编译配置: 在开发模式下,Angular使用JIT(即时编译)来编译和运行应用程序,而在生产模式下使用AOT(预编译)来进行编译。这可能导致在开发模式下出现属性'id'未定义的问题。 可以尝试检查Angular项目的编译配置,确保在开发模式下也进行AOT编译。可以在angular.json文件中的"configurations"部分添加以下配置:
  4. 然后,在运行ng serve命令时,使用--configuration标志指定开发模式:
  5. 然后,在运行ng serve命令时,使用--configuration标志指定开发模式:
  6. 检查依赖项和版本兼容性: 确保项目中使用的所有依赖项和Angular版本是兼容的。可以尝试更新相关的依赖项,并确保它们与Angular 8兼容。
  7. 检查开发环境配置: 如果在开发模式下仍然无法读取属性'id',可以尝试检查开发环境的配置。可能是由于某些开发环境的设置或插件导致的问题。可以尝试在干净的开发环境中重新配置和运行应用程序。
  8. 腾讯云相关产品推荐: 腾讯云提供了一系列云计算产品,可以帮助开发者构建和部署应用程序。以下是一些与Angular开发相关的腾讯云产品:
    • 云服务器(CVM):提供可扩展的虚拟服务器实例,用于部署和运行应用程序。
    • 云数据库MySQL版(CDB):提供高性能、可扩展的MySQL数据库服务,用于存储和管理数据。
    • 云存储(COS):提供安全、可靠的对象存储服务,用于存储和管理应用程序的静态文件。
    • 人工智能(AI):腾讯云提供了多个人工智能相关的产品和服务,如人脸识别、语音识别等,可以与Angular应用程序集成,实现更丰富的功能和体验。

请注意,以上答案仅供参考,具体解决方案可能因实际情况而异。建议根据具体问题和需求进行进一步调查和实验。

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

相关·内容

Angular CLI 使用教程指南参考

Angular CLI 使用教程指南参考 Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本....> [options] 创建一个新 Angular 项目,默认在当前所在目录下 参数 描述 --dry-run -d 只输出要创建文件和执行操作,实际并没有创建项目 --verbose -v...init [options] 在当前所在目录下初始化一个新 Angular 项目 参数 描述 --dry-run -d 只输出要创建文件和执行操作,实际并没有创建项目...此命令默认情况下仅在项目目录中工作。 参数 描述 --global 返回全局配置值,而不是本地配置值(如果都设置)....pathN参数是一个有效JavaScript路径,如“users [1] .userName”。 该值将被强制转换为正确类型,或者如果类型无法强制,则会抛出错误。

3K50

Angular 2 + 折腾记 :(1)初识Angular-cli及脱坑要点

装不 装了visual studio 2015+及python2+ [node-sass及部分模块需要调用这两个依赖进行编译] 或者采用国内cnpm安装,记得带版本号,有时候不带版本会安装0.0.1...---- 初始化项目 angular-cli可以初始化ng2或者ng4项目,我这里说2+; 脚手架命令很多,我这里只列出最常用; 新建东东 范围 命令 作用 new ng new new_project...ng lint 调用tslint跑整个项目,可以收获一堆警告和错误,--force --fix --format可以帮助格式和修复部分问题 ---- 启动 ng serve: 启动脚手架服务,默认端口...4200;自定义什么看帮助额 ---- 打包 ng build: 开发模式打包,调用环境文件是/src/environments/environments.ts; ng build --prod: 以前调用...ng serve --proxy-config proxy.conf.json配置反向代理(用webpack)这个老版本是支持,现在不知道支不支持,写法如下 { "/": { "target

1.8K10

angular打包报错内存溢出 nodejs 执行失败报错 “JavaScript heap out of memory” 解决办法

其根本原因在于 nodejs 默认限制了最大可使用内存大小。 nodejs V8 引擎在 64 位机器默认限制使用内存最大不超过 1.7GB,超过这个限制官方建议尝试优化为多线程方式。...解决办法一: 设置 nodejs 配置项 配置项 max_old_space_size 如果希望超越 V8 引擎默认内存大小限制,可以通过设置配置项 max_old_space_size来解决。.../node_modules/@angular/cli/bin/ng serve", "prod": "node --max_old_space_size=8000 ..../node_modules/@angular/cli/bin/ng build --prod", } } 解决办法二:项目构建流程关闭 sourcemap 生成 以 Angular 为例,对于越来越庞大...Angular 项目,Angular 编译时间、内存消耗也越来越长,其中 sourceMap 生成占据了绝大部分时间。

6K20

用Angule Cli创建Angular项目

Angular4.0来了,更小,更快,改动少 接下来为Angular4.0准备环境和学会使用Angular cli项目 1.环境准备: 1)在开始工作之前我们必须设置好开发环境 如果你机器还没有安装...Installing packages for tooling via npm 这里如果你选这了淘宝cnmp镜像,应该最好在安装完全局Angular cli后设置一下,保证正常下载工具 ng set...和jQuery一些字符(比如jQuery$): cnpm install @types/bootstrap --save-dev cnpm install @types/jquery --save-dev...这样我们就在项目中正常使用bootstrap和jQuery了 4)项目的启动 启动项目我们可以直接通过: ng serve 或者是 npm start 这两个默认端口都是4200: http://...localhost:4200  这里你也可以修改默认端口: ng serve -p 3000 5)最后项目的打包    用angular cli创建项目会有很多文件,我们就需要打包后再发行: ng

1.5K60

angular入门教程_初学者织围巾简单教程慢动作

node-sass 模块被墙问题,强烈推荐使用 cnpm 进行安装,可以非常有效地避免撞墙。 一些开发者来抱怨说 @angular/cli 在打包时候加上 –prod 参数会报错,无法编译。...如果你想让编译包更小一些,可以使用 ng serveprod,@angular/cli 会启用 TreeShaking 特性,加了参数之后编译过程也会慢很多。...所以,在正常开发过程里面请不要加 –prod 参数。 ng serve 是在内存里面生成项目,如果你想看到项目编译之后产物,请运行 ng build。...构建最终产品版本可以加参数,ng build –prod。...构建项目:ng build,如果你想构建最终产品版本,可以用 ng build –prod 更多命令和参数请在终端里面敲 ng 仔细查看,尽快熟悉这些工具可以非常显著地提升你编码效率。

3.3K20

如何使用Angular CLI和PM2运行Angular应用程序

Angular CLI是Angular框架命令行界面,用于在开发过程中在本地创建,构建和运行应用程序。 它旨在在开发服务器构建和测试Angular项目。...PM2是Node.js应用程序流行,高级且功能丰富生产流程管理器,具有内置负载均衡器。其功能集包括对应用程序监视,微服务/进程高效管理,运行应用程序集群模式以及应用程序正常重启和关闭支持。...] linuxidc 密码: /usr/local/bin/ng -> /usr/local/lib/node_modules/@angular/cli/bin/ng > @...serve  10% building 3/3 modules 0 activeℹ 「wds」: Project is running at http://localhost:4200/webpack-dev-server...从ng serve命令输出中,您可以看到Angular应用程序未在后台运行,您无法再访问命令提示符。 因此,在运行时不能执行任何其他命令。

2.2K30

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

完成之后,我们可以通过ng serve耗尽其目录来请求我们新应用程序: ng serve ** NG Live Development Server is listening on localhost...Angular CLI运行webpack dev服务器,该服务器将我们应用呈现在下一个空闲端口上(以便您可以在同一台机器运行多个应用),并进行实时重新加载。...这是命名Angular 结构指令默认约定。结构指令控制着我们模板结构。这里星号实际是“语法糖”,你可以进一步阅读以理解它是如何工作。...实际Angular为我们提供了一些糖语,我们可以在这里使用它,所以我从另一个角度开始解释糖工作原理。...只是为了让您对这些环境文件在这里有所了解,它们实际包含在编译阶段项目中,并且.prod.该部分由--environment交换机为ng serveor 定义ng build。

42.6K10

Angular 工具篇之分析包大小

下面我们将使用 Github angular6-example-app 这个项目来演示上述两个工具使用案例,首先我们先来初始化 angular6-example-app 这个项目。...: $ 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 --...为了方便操作,我们也可以定义一个 npm script 任务来处理上述工作: "map-explorer": "ng build --prod --source-map && source-map-explorer

2.3K40

Angular 工具篇之npx及angular-cli-ghpages

今天本文两个主角是 npx 及 angular-cli-ghpages,npx 是 npm 5.2 引入了工具, 用于帮助我们执行 npm 二进制任务和加速我们工作流。...你可以通过 Angular CLI 创建新项目或在想要部署到 Github Pages Angular 项目中使用 angular-cli-ghpages。...首先你需要运行一下命令安装 angular-cli-ghpages: $ npm i angular-cli-ghpages --save-dev 假设你已经完成项目的开发,在发布到 Github Pages...前,你需要进行项目构建,这时你可以执行以下命令: $ ng build --prod --base-href "https://USERNAME.github.io/REPOSITORY_NAME/"...或者使用以下命令: $ ng build --prod --base-href "/REPOSITORY_NAME/" 在项目构建完成后,就可以通过以下命令自动地把本地项目发布到 Github Pages

1.9K20
领券