Angular新手如何解决组件模板访问服务内变量的TS2339报错

• 编译时报TS2339的本质是：Angular模板只能直接访问所属组件类的公开属性，你模板里绑定的Fcomponent只存在于服务类里，没有在AppComponent类中声明，自然会触发找不到属性的错误
• 页面显示Cannot GET /是编译失败引发的连锁问题，只要修复编译错误让项目能正常构建，这个报错会自动消失
• 你目前的文件结构有冗余：variables1.component.ts里写的是和service完全重复的服务代码，属于无效文件，极易引发导入冲突

• 第一步：直接删除冗余的variables1.component.ts文件，保留正式的服务文件variables1.service.ts即可
• 第二步：修改app.component.ts，把服务依赖注入到组件类中，将服务内的Fcomponent变量暴露为组件的公开属性，供模板绑定使用。修改后的代码如下：

import { Component } from '@angular/core';
// 导入我们写好的服务
import { Variables1Service } from './variables1.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'project';
  // 声明组件要暴露给模板的Fcomponent属性
  Fcomponent: number[];

  // 构造函数注入服务
  constructor(private variables1Service: Variables1Service) {
    // 从服务中取出数组赋值给组件属性
    this.Fcomponent = this.variables1Service.Fcomponent;
  }
}

• 第三步：你的app.module.ts和app.component.html代码不需要做任何修改。注意：因为服务已经在装饰器里写了providedIn: 'root'，本身就是全局单例注入，手动在providers数组里重复注册不会引发冲突，后续如果要简化配置也可以把providers里的Variables1Service移除，不影响运行。
• 第四步：保存所有修改后，等编译器没有抛出TS错误，重新访问本地开发服务地址，即可看到正常渲染的列表内容

• 不要把服务代码写在后缀为.component.ts的文件中，Angular的编译规则会识别组件文件内的内容为组件类逻辑，混入服务代码很容易触发额外的编译报错
• 同一个类不要在两个文件中重复定义，否则很容易出现导入路径错误、引用到无效类的问题
• 尽量不要在模板里直接写深层嵌套的服务属性绑定（比如variables1Service.Fcomponent），建议在组件类里把需要用到的变量取出来后再给模板绑定，降低模板的复杂度

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