Angular 5组件构造函数注入ActivatedRoute报错问题咨询

这个错误我在Angular 5项目里碰到过好几次，大概率是依赖解析时的元数据问题或者路由配置没到位，给你几个排查和解决的方向：

• 先确认ActivatedRoute的导入是否正确
  别小看这个基础步骤，很多时候报错就是因为漏了导入。打开你的dashboard.component.ts，确保顶部有这行代码：

  import { ActivatedRoute } from '@angular/router';
  

  如果没导入，Angular根本识别不了这个类型，自然没法解析构造函数里的参数。

• 检查组件所属模块是否导入了RouterModule
  就算组件里导入了ActivatedRoute，如果所在的模块（比如AppModule或者Dashboard特性模块）没配置路由，Angular也提供不了这个依赖。打开对应的模块文件，确保已经导入并配置了RouterModule：

  import { RouterModule, Routes } from '@angular/router';
  import { DashboardComponent } from './dashboard/dashboard.component';
  
  const routes: Routes = [
    { path: 'dashboard', component: DashboardComponent }
    // 其他路由规则按需添加
  ];
  
  @NgModule({
    imports: [
      // 根模块用forRoot，特性模块用forChild
      RouterModule.forRoot(routes)
    ],
    declarations: [DashboardComponent]
  })
  export class AppModule { }
  

• 验证组件的@Component装饰器是否完整
  确认你的DashboardComponent类上方存在正确的@Component装饰器，要是装饰器丢了或者写法有误，Angular的元数据解析会直接卡壳：

  import { Component } from '@angular/core';
  import { ActivatedRoute } from '@angular/router';
  
  @Component({
    selector: 'app-dashboard',
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.css']
  })
  export class DashboardComponent {
    constructor(private route: ActivatedRoute) {
      // 这里可以正常使用route对象，比如获取路由参数
      this.route.params.subscribe(params => {
        console.log('路由参数：', params);
      });
    }
  }
  

• 检查tsconfig.json的元数据配置
  Angular 5依赖TypeScript的装饰器元数据来解析依赖，所以要确保tsconfig.json里的这两个选项是开启的：

  {
    "compilerOptions": {
      // ...其他配置
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true
    }
  }
  

  如果emitDecoratorMetadata是false，Angular拿不到参数的类型信息，就会抛出你看到的那个错误。

• 最后试试清理缓存重新构建
  有时候项目缓存会导致一些莫名其妙的问题，执行下面的命令清理后重新构建：

  rm -rf node_modules dist
  npm install
  ng build
  

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