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

在ng build --prod之后,为什么我在main.js:1和polyfills.js:1中得到错误,而不是在我创建的组件中,如何撤销这个错误?

在执行命令"ng build --prod"后,生成的代码会经过优化和压缩,以提高应用的性能和加载速度。当你在浏览器中运行生成的代码时,如果出现错误,错误信息通常会指向生成的代码文件(如main.js和polyfills.js),而不是你自己创建的组件文件。

这是因为生成的代码文件是经过编译和优化的,它们包含了整个应用的逻辑和依赖关系。当出现错误时,浏览器只能根据生成的代码文件提供的信息来定位错误的位置。

要解决这个问题,你可以使用开发者工具来调试生成的代码。在浏览器中打开开发者工具(通常是按下F12键),然后切换到"Sources"(或类似的标签)选项卡。在这里,你可以找到生成的代码文件(如main.js和polyfills.js),并浏览它们的内容以定位错误。

另外,你也可以在构建过程中禁用代码优化和压缩,以便在生成的代码中更容易定位错误。在执行"ng build --prod"命令时,可以添加"--sourceMap"选项,这将生成源映射文件,使得在浏览器中调试时可以直接定位到你自己创建的组件文件。

总结起来,当在执行"ng build --prod"后出现错误时,错误信息通常会指向生成的代码文件,而不是你自己创建的组件文件。你可以使用开发者工具来调试生成的代码,或者在构建过程中禁用代码优化和压缩以方便定位错误。

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

相关·内容

Angular8稳定版修改概述

下面是对8.0.0一些新功能简单介绍,希望可以帮助大家快速了解新版本。 新功能 差分加载 根据您browserlist 文件,构建期间,Angular将为其创建单独包polyfills。...最喜欢:你可以调试模板(确信很多开发人员需要这个功能)。 Bazel支持 Bazel是谷歌开源另一款工具,“我们不喜欢谷歌”。...Bazel将提供以下优势: 更快构建时间(对于第一次构建需要时间,但并发构建将更快),Angular已经使用它,现在CI7.5分钟内完成,不是Bazel之前60分钟。...增量构建:您将能够仅构建和部署已更改内容不是整个应用程序。 您可以弹出Bazel文件,默认情况下它们是隐藏。...angular使用builders进行主要操作:serve ,build ,test ,linte2e 。您可以angular.json文件查看使用过构建器。 ...

4.5K20

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

但在基本层面上,请考虑如下这些方法:创建组件之后立即调用构造函数,传递给它数据准备好并填充之前很久才调用该构造函数,ngOnInit仅在第一个更改周期数据,因此您可以访问组件输入。...同时,Observable能够处理每一个事件,实际上有着无数“承诺”。我们可以通过在这个过程得到一些错误或者通过退订Observable来解决这个问题。 这里是什么takeWhile?...让我们看看这是如何实现。我们讨论了State它不变性,这意味着我们创建之后不能改变它任何属性。这使得我们应用程序状态存储我们系统几乎不可能State。...两者都是不可变,但第二个是基于第一个,所以State我们创建一个新State对象,不是我们变异值上。...这就是我们如何告诉我们组件,我们正在扩展我们配置,不是从头开始创建它。

42.5K10

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

而这一切 NodeJS 出现之后得到了很好解决: 对 JS 代码预处理经历了 Grunt、Gulp 短暂辉煌之后,终于 webpack 这里形成了事实标准局面。...安装完成之后,使用 ng serve 命令启动项目: 打开你浏览器,访问默认4200端口,看到以下界面说明环境 OK 了: 请注意: 这里是 serve,不是 server,看到一些初学者经常坑在这个地方...所以,正常开发过程里面请不要加 –prod 参数。 ng serve 是在内存里面生成项目,如果你想看到项目编译之后产物,请运行 ng build。...构建最终产品版本可以加参数,ng buildprod。...构建项目:ng build,如果你想构建最终产品版本,可以用 ng buildprod 更多命令参数请在终端里面敲 ng 仔细查看,尽快熟悉这些工具可以非常显著地提升你编码效率。

3.3K20

Vue安装及使用快速入门

Shift+右键可以直接打开命令框 命令流程 三、vue项目目录讲解   1build:构建脚本目录     1build.js ==> 生产环境构建脚本;     2)...:8010/#/first,查看页面效果     注意:     一个组件下只能有一个并列 div,以下写法是错误:     数据要写在 return 里面,不是像文档那样子写...,以下写法错误:   2、讲讲父子组件     1components目录下新建sub文件夹,用于存放一下可以复用组件。...比如新建一个Confirm.vue组件     3)组件引入子组件     引入:import Confirm from ‘…/sub/Confirm’     注册:标签内 name...,html解析成了a标签     这里只是简单介绍了一下路由使用,更多详细信息,请前往官网学习:https://router.vuejs.org/zh-cn/   4、如何用less

55320

《Vue3.0抢先学》系列之:一个简单例子

之后,我们可以看到packages下各个子项目文件夹,有已经生成好dist目录,里面躺着几个文件,命名不太一样,有的文件名中有prod后缀,有的则没有,这个代表经过压缩或不压缩js;有的包含了...下面将选用 packages/vue/dist 目录下 vue.global.prod.js 这个文件,因为它是打包后得到最完整框架代码,可以直接通过标签引入HTML页面,最适合用来快速编写示例代码...开始写代码咯,让来先初始化一下示例项目:建一个文件夹,下面的文件结构如下图所示,有cssjs目录,分别存放示例代码要用到样式、vuejs库文件、以及我们编写示例js代码文件; index.html...让我们从这个 index.html 写起,在里面引入cssjs文件并创建了一个Vue应用所需挂载点元素,代码不多,保持简洁: 接着,要开始编写上面预想界面了。将它拆分成两个组件(红色部分组件,以及蓝色部分组件): ?

1.2K20

Ionic 2 应用剖析0 开始之前1 创建一个新Ionic 2 应用2 目录结构3. Class 定义Root Components 模版App Module总结

根据功能组织代码想法不是Angular 2 & Ionic 2 特权,事实上人们Ionic 1使用倡导基于特征方式,只是大多数人没那样做(趋势是很难打破)。...这里最大不同是没用附加ng-app 到body标签(目的是是让Ionic知道应用存在地方),而是使用了: 根组件将在这里被创建,通常你入口应用在这里注入。...Root Components 模版 当我们创建组件是我们提供了一个模版给组件,就是被渲染到屏幕内容。1).这里是我们浏览器运行时根组件样子: ?...记住这里 “content” 是表达式不是字符串。我们不是设置 content 属性为字符串“content”,我们设置是变量 “content”。...你还会发现main.dev.ts main.prod.ts 文件同一个目录下面。其中只有一个会被用到(取决于你是开发还是发布build)。

4.4K50

用 TypeScript 开发 Node.js 程序

本文中,将向你展示如何设置一个简单开发环境,以便使用 TypeScript 编写 Node.js 程序。...首先创建一个带有 main.js information-logger.js 文件 src/ 目录,其中包含一些 Node.js 功能: 1// src/information-logger.js...它是专门为这个目的开发工具:开发期间重新启动 Node.js 应用程序。 让我们从安装 nodemon-webpack-plugin开始。...程序 我们仍然需要将 JavaScript 文件扩展名从 .js 改为.ts。让我们这样做并尝试运行项目。 运行项目后,可以立即看到我们创建测试应用程序犯了“错误”。...最后注意事项 确信 TypeScript 中有数千种不同方法来编写 Node.js 应用程序。所写下不是你必须要照样做方式,这只是你可以做到方式一种。

2.4K30

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

前言 这个系列进度有些跳跃性,尽量直白点解释,但是不是官方文档,直入主题!!!!...正式版配置稍微有些改动,比较了下基本不大,放心使用 ---- 安装之前 window下: 安装lts版本nodejs[6.10.0] , Angular-clinode-sass不支持7.x,...ng lint 调用tslint跑整个项目,可以收获一堆警告错误,--force --fix --format可以帮助格式修复部分问题 ---- 启动 ng serve: 启动脚手架服务,默认端口...4200;自定义什么看帮助额 ---- 打包 ng build: 开发模式打包,调用环境文件是/src/environments/environments.ts; ng build --prod: 以前调用...有时候我们想要改源文件或者看到原始配置是怎么样这货就用到了 ---- 生成目录树小解释 ? ---- 总结 这个脚手架支持sassless,手动改下.angular-cli.json就可以了。

1.8K10

一文搞懂 Webpack 多入口配置

由于不同入口下路由页面有一些是重复,因此考虑使用 Webpack 多入口配置来解决这个需求。...windows 系统目标目录下使用 tree/f1.txt 即可把当前目录树生成到一个新文件 1.txt 。...开始配置 3.1 文件结构改动 src 目录下将 main.js App.vue 两个文件各复制一下,作为不同入口,文件结构变为: . ├── build │ ├── build.js │...当前代码:Github - multi-entry-vue1 如上图,此时我们 npm run build 打包出一个引用了这两个文件 index.html,那么如何打包出不同 HTML 文件,分别应用不同入口...下面我们进行文件结构改造: 首先我们根目录创建一个 entries 文件夹,把不同入口 router、 store、 main.js 都放这里,每个入口相关单独放在一个文件夹; src 目录下建立一个

63520

手摸手 Webpack 多入口配置实践

由于不同入口下路由页面有一些是重复,因此考虑使用 Webpack 多入口配置来解决这个需求。...windows 系统目标目录下使用 tree /f 1.txt 即可把当前目录树生成到一个新文件 1.txt 。...开始配置 3.1 文件结构改动 src 目录下将 main.js App.vue 两个文件各复制一下,作为不同入口,文件结构变为: . ├── build │ ├── build.js │...打包结果如下: image.png 当前代码:Github - multi-entry-vue1 如上图,此时我们 npm run build 打包出一个引用了这两个文件 index.html,那么如何打包出不同...下面我们进行文件结构改造: 首先我们根目录创建一个 entries 文件夹,把不同入口 router、store、main.js 都放这里,每个入口相关单独放在一个文件夹; src 目录下建立一个

77420

一文搞懂 Webpack 多入口配置

由于不同入口下路由页面有一些是重复,因此考虑使用 Webpack 多入口配置来解决这个需求。...windows 系统目标目录下使用 tree/f1.txt 即可把当前目录树生成到一个新文件 1.txt 。...开始配置 3.1 文件结构改动 src 目录下将 main.js App.vue 两个文件各复制一下,作为不同入口,文件结构变为: . ├── build │ ├── build.js │...当前代码:Github - multi-entry-vue1 如上图,此时我们 npm run build 打包出一个引用了这两个文件 index.html,那么如何打包出不同 HTML 文件,分别应用不同入口...下面我们进行文件结构改造: 首先我们根目录创建一个 entries 文件夹,把不同入口 router、 store、 main.js 都放这里,每个入口相关单独放在一个文件夹; src 目录下建立一个

2.7K40

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

前言   这个系列进度有些跳跃性,尽量直白点解释,但是不是官方文档,直入主题!!!!...e2e 跑自动化测试-自己写测试测试用例 test ng test 跑单元测试 -- 自己写 lint ng lint 调用tslint跑整个项目,可以收获一堆警告错误,--force --fix -...-format可以帮助格式修复部分问题 启动 ng serve: 启动脚手架服务,默认端口4200;自定义什么看帮助额 打包 ng build: 开发模式打包,调用环境文件是/src/environments.../environments.ts; ng build --prod: 以前调用aot打包还需要带上--aot,从beta31开始,--prod模式下自动调用aot打包, 调用环境文件是/src/environments.../environments.prod.ts 弹出配置文件(还原真实配置文件) ng eject : 这个东西配置很多,可以弹出各种各样源配置和文件 我们看到ng开头命令都是二重封装。。。

11910

vue项目实战:实战技巧总结

一样,将我们创建 Vuex 实例挂载到这个 vue 实例 render: h => h(App) }) 3.3 组件中使用 Vuex ...3.我们可以将同一函数定义为一个方法不是一个计算属性。两种方式最终结果确实是完全相同。然而,不同是计算属性是基于它们依赖进行缓存。计算属性只有相关依赖发生改变时才会重新求值。...Vue 是数据驱动视图更新框架, 所以对于 Vue 来说组件数据通信非常重要。Vue 实现组件间通信有很多方式,今天来给大家讲解一下父子组件间通信:props \$emit。...// 这个目录只能有一级,如果目录层次大于一级,在生成时候不会有任何错误提示,预渲染时候只会卡着不动。...说明:指导浏览器如何缓存某个响应以及缓存多长时间。这一段内容在网上找了很久,但都没有找到满意。 最后终于 Google Developers 中发现了想要答案。

3.3K40

Angular Library 快速入门

新建 Workspace $ ng new sf-lib-app $ cd sf-lib-app $ ng serve 介绍如何创建 Angular Library 之前,让我们来看一下 Angular...文件添加 sf-lib 项目; package.json 文件添加 ng-packagr 依赖; tsconfig.json 文件添加 sf-lib 库引用; 项目中 projects...: $ ng build --prod sf-lib 小伙伴们,构建 Library 时,记得始终添加 —prod 标志。...app.component.ts 组件对应模板引用 sf-lib 默认创建组件: 通常情况下,我们会删除默认创建组件,然后创建自定义组件,下面我们就来介绍如何为...完成新建 ButtonComponent 组件导出工作后,我们需要使用下列命令,重新构建 sf-lib 库: $ ng build --prod sf-lib sf-lib 重新构建成功后,我们就可以模板中使用刚创建

2.3K10
领券