如何在浏览器开发者工具控制台启用ng全局对象？

这个调试功能并没有被新版本Angular移除，出现Uncaught ReferenceError: ng is not defined主要是以下几个原因，对应解决方法如下：

• 确保在开发环境运行应用
  生产环境构建（比如执行ng build --prod或ng build --configuration production）会自动移除所有调试相关代码，ng全局对象不会被暴露。必须使用ng serve（本地开发启动）或ng build --configuration development构建开发版本，才能在控制台拿到ng对象。

• 手动启用调试工具（如果开发环境仍不生效）
  部分项目可能手动关闭了调试模式，你可以在main.ts中添加代码强制启用：

  import { enableDebugTools, ApplicationRef } from '@angular/platform-browser';
  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { AppModule } from './app/app.module';
  
  platformBrowserDynamic().bootstrapModule(AppModule)
    .then(moduleRef => {
      const appRef = moduleRef.injector.get(ApplicationRef);
      const rootComponent = appRef.components[0];
      enableDebugTools(rootComponent);
    })
    .catch(err => console.error(err));
  

  重启应用后，控制台就能正常访问ng全局对象了。

• 检查控制台执行上下文
  确认Chrome DevTools控制台左上角的执行上下文下拉框，选中的是当前应用的域名（不要选iframe或浏览器扩展的上下文），否则会找不到页面内的ng对象。

• 更便捷的替代方式
  可以直接使用官方的Angular DevTools浏览器扩展，它能可视化展示组件树、组件状态、依赖注入关系，调试起来比手动敲ng.getComponent($0)更直观，而且不需要担心ng对象的问题。

内容的提问来源于stack exchange，提问作者john