blocks|key|2380879|text|最后，我们利用更改检测中断的事实解决了问题，并使用角绑定[hidden]='true'在模型中创建了一个始终隐藏的元素，但是当更改检测中断时，它将被忽略，因此它中的文本将被显示出来，这样，当app真的崩溃时，我们甚至可以显示非常具体的消息。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2380880|
++++<div+class='crash-error-heading'+[hidden]='true'>
++++++<h2>Something+went+really+wrong</h2>
++++</div>
|code-block|syntax|javascript|2380881|entityMap^0|S|F|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

In the end we solved it by using the fact that change detection is broken and created an always hidden element in the modal using angular binding <code>[hidden]='true'</code>, but as change detection is broken it will be ignored, so text inside it will be displayed and this way we can even show a very specific message when app really crashed like 

<pre><code>&lt;!-- This part is fallback for unhandled error which happens during change detection in the template --&gt;
 &lt;div class='crash-error-heading' [hidden]='true'&gt;
 &lt;h2&gt;Something went really wrong&lt;/h2&gt;
 &lt;/div&gt;
&lt;!----&gt;
</code></pre>

blocks|key|2617989|text|可以在全局级别上定义自定义错误处理程序，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2617990|custom-error-handler.service.ts|offset|length|style|BOLD|2617991|import+{+ErrorHandler,+Injectable+}+from+'@angular/core';

@Injectable()
export+class+CustomErrorHandler+implements+ErrorHandler+{
++constructor()+{+}

++handleError(error)+{
++++//+your+custom+error+handling+logic
++++console.log('GLOBAL+ERROR+CAUGHT:+',+error.toString())
++}
}|code-block|syntax|javascript|2617992|app.module.ts|2617993|import+{+NgModule,+ErrorHandler+}+from+'@angular/core';
import+{+CustomErrorHandler+}+from+'./custom-error-handler.service';

@NgModule({
++//+...
++providers:+[
++++{
++++++provide:+ErrorHandler,
++++++useClass:+CustomErrorHandler
++++}
++],
++//+...
})
export+class+AppModule+{+}|2617994|但是你不能用它来捕捉变量上的错误。这是有道理的。如果使用以下组件：|2617995|TS|2617996|@Component({
++selector:+'my-app',
++templateUrl:+'./app.component.html',
++styleUrls:+['./app.component.css']
})
export+class+AppComponent+{
++name+=+'Angular+6';

++triggerError()+{
++++throw+new+Error('Some+error');
++}
}|2617997|2617998|

++Name:+{{+nam+%7C%7C+'Default+name'+}}


<button+(click)="triggerError()">Trigger+error+caught+by+global/custom+error+handler</button>|2617999|在这里，我们获得了呈现视图“默认名称”，因为nam只是未定义。这不是一个真正的错误。尝试在浏览器控制台或nodejs上下文中编写undefined，可以。这不是一个错误。|CODE|2618000|也就是说，如果试图访问未定义的对象上的属性，就会得到一个错误。因此，如果您将HTML更新为：|2618001|
++Name:+{{+nam.someUndefinedProp+%7C%7C+'Default+name'+}}
|2618002|您会注意到，CustomErrorHandler捕获了该错误。|2618003|但总的来说，我不建议你这么做。它必须得到确认，但也许AOT可以捕捉到这一点，如果没有，您应该编写一些集成或E2E测试，这样就可以捕捉到这一点。|2618004|下面是stackblitz上的一个工作示例：|2618005|https://stackblitz.com/edit/angular-sipcki?file=src%252Fapp%252Fapp.component.html|2618006|entityMap|0|LINK|mutability|MUTABLE|url|https://stackblitz.com/edit/angular-sipcki?file=src%252Fapp%252Fapp.component.html^0|0|0|V|0|0|0|D|0|0|0|0|2|0|0|0|0|M|3|1S|9|0|0|0|6|I|0|0|0|0|26|0|0^^$0|@$1|2|3|4|5|6|7|1M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1N|8|@$D|1O|E|1P|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|1Q|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1R|8|@$D|1S|E|1T|F|G]]|9|@]|A|$]]|$1|O|3|P|5|J|7|1U|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|1V|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1W|8|@$D|1X|E|1Y|F|G]]|9|@]|A|$]]|$1|U|3|V|5|J|7|1Z|8|@]|9|@]|A|$K|L]]|$1|W|3|-4|5|6|7|20|8|@]|9|@]|A|$]]|$1|X|3|Y|5|J|7|21|8|@]|9|@]|A|$K|L]]|$1|Z|3|10|5|6|7|22|8|@$D|23|E|24|F|11]|$D|25|E|26|F|11]]|9|@]|A|$]]|$1|12|3|13|5|6|7|27|8|@]|9|@]|A|$]]|$1|14|3|15|5|J|7|28|8|@]|9|@]|A|$K|L]]|$1|16|3|17|5|6|7|29|8|@$D|2A|E|2B|F|11]]|9|@]|A|$]]|$1|18|3|19|5|6|7|2C|8|@]|9|@]|A|$]]|$1|1A|3|1B|5|6|7|2D|8|@]|9|@]|A|$]]|$1|1C|3|1D|5|6|7|2E|8|@]|9|@$D|2F|E|2G|1|2H]]|A|$]]|$1|1E|3|-4|5|6|7|2I|8|@]|9|@]|A|$]]]|1F|$1G|$5|1H|1I|1J|A|$1K|1L]]]]

You can define a custom error handler on a global level like that:

custom-error-handler.service.ts

<pre><code>import { ErrorHandler, Injectable } from '@angular/core';

@Injectable()
export class CustomErrorHandler implements ErrorHandler {
 constructor() { }

 handleError(error) {
 // your custom error handling logic
 console.log('GLOBAL ERROR CAUGHT: ', error.toString())
 }
}
</code></pre>

app.module.ts

<pre><code>import { NgModule, ErrorHandler } from '@angular/core';
import { CustomErrorHandler } from './custom-error-handler.service';

@NgModule({
 // ...
 providers: [
 {
 provide: ErrorHandler,
 useClass: CustomErrorHandler
 }
 ],
 // ...
})
export class AppModule { }
</code></pre>

But you cannot catch a typo on a variable with that. And it makes sense. If you take the following component:

TS

<pre><code>@Component({
 selector: 'my-app',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 name = 'Angular 6';

 triggerError() {
 throw new Error('Some error');
 }
}
</code></pre>

HTML

<pre><code>&lt;!-- variable is defined as `name` but typo --&gt;
&lt;p&gt;
 Name: {{ nam || 'Default name' }}
&lt;/p&gt;

&lt;button (click)="triggerError()"&gt;Trigger error caught by global/custom error handler&lt;/button&gt;
</code></pre>

Here we get in the rendered view "Default name" because <code>nam</code> is just undefined. It's not an actual error. Try to write <code>undefined</code> in your browser console or in a nodejs context, fine. It's not an error.

That say, if you try to access a property on an object that's not define, there you get an error. So if you update the HTML to:

<pre><code>&lt;p&gt;
 Name: {{ nam.someUndefinedProp || 'Default name' }}
&lt;/p&gt;
</code></pre>

You'll notice that the <code>CustomErrorHandler</code> caught that error.

But in general, I wouldn't advise you to do that. It would have to be confirmed but maybe AOT can catch that and if it doesn't you should just write some integration or E2E tests anyway that would catch that.

Here's a working example on stackblitz: 

<a href="https://stackblitz.com/edit/angular-sipcki?file=src%2Fapp%2Fapp.component.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-sipcki?file=src%2Fapp%2Fapp.component.html</a>

I am working on global error handler in angular and requirement of my project is also to show a modal window on error, so that user can report if something is wrong and we can fix it. It works fine unless error happens in template. The change detection is basically broken in that case it doesn't update bindings, thus Material Modal Dialog is displayed empty. I tried to google around and checked all available data in ngDebugContext, but nothing could answer my question. Point is that in case error happens in template(or maybe we can know if change detection is generally dead) then I would just display alert. As last resort solution I will just create modal component with static template, where text will be hardcoded and display that in case of any unhandled error.

How to detect if error happened in template in angular?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在致力于全局错误处理程序的角度和我的项目的要求也是显示一个模式窗口的错误，以便用户可以报告，如果有什么问题，我们可以修复它。除非模板中出现错误，否则它可以正常工作。在不更新绑定的情况下，更改检测基本上被破坏，因此Material对话框显示为空。我试着用谷歌搜索ngDebugContext中的所有可用数据，但是没有什...

问如何检测模板在角度上是否发生错误？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何检测模板在角度上是否发生错误？EN