首页
学习
活动
专区
工具
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已经在使用它,现在CI在7.5分钟内完成,而不是在Bazel之前的60分钟。...增量构建:您将能够仅构建和部署已更改的内容而不是整个应用程序。 您可以弹出Bazel文件,默认情况下它们是隐藏的。...angular使用builders进行主要操作:serve ,build ,test ,lint和e2e 。您可以在angular.json文件中查看使用过的构建器。 ...

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

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

    42.7K10

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

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

    3.3K20

    Vue的安装及使用快速入门

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

    62320

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

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

    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-cli中的node-sass不支持7.x,...ng lint 调用tslint跑整个项目,可以收获一堆警告和错误,--force --fix --format可以帮助格式和修复部分问题 ---- 启动 ng serve: 启动脚手架服务,默认端口...4200;自定义什么看帮助额 ---- 打包 ng build: 开发模式打包,调用的环境文件是/src/environments/environments.ts; ng build --prod: 以前调用...有时候我们想要改源文件或者看到原始配置是怎么样的这货就用到了 ---- 生成的目录树小解释 ? ---- 总结 这个脚手架支持sass和less,手动改下.angular-cli.json就可以了。

    1.8K10

    手摸手 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 目录下建立一个

    81920

    一文搞懂 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 目录下建立一个

    66620

    一文搞懂 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.9K40

    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开头的命令都是二重封装的。。。

    17010

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

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

    3.5K40

    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.4K10
    领券