使用location接口为何在Angular CLI中报错？浏览器可正常运行

错误原因 #

• 直接使用浏览器全局对象location不符合Angular的依赖注入规范，在你开启strict: true和isolatedModules: true的编译设置下，TypeScript编译器无法识别未显式声明的全局变量，导致编译阶段报错。
• 浏览器运行时能正常工作是因为浏览器环境原生提供了全局location对象，但Angular CLI的编译过程基于Node.js环境，该环境不存在这个全局对象，因此编译失败。

解决方法 #

方法一：使用Angular官方Location服务（推荐） #

这是Angular官方推荐的方式，通过依赖注入获取路径信息，符合框架规范，同时避免全局变量带来的测试和维护问题。

1. 在组件文件中导入Location服务：

import { Location } from '@angular/common';

2. 在组件构造函数中注入该服务：

constructor(private location: Location) {}

3. 修改isHomePage函数：

isHomePage() {
  return this.location.path() === '/';
}

方法二：显式声明全局location变量（不推荐） #

如果坚持使用全局location，可在组件顶部添加类型声明，让TypeScript编译器识别该变量：

declare const location: Location;

isHomePage() {
  return location.pathname === '/';
}

这种方式依赖浏览器环境，不利于单元测试和代码可维护性，不推荐在Angular项目中使用。

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