Angular Injectable 装饰器 - 预期 0 个参数，但得到 1 个

Question

我刚刚开始学习 Angular 的基础教程，但我遇到了一个小的编译问题。

我正在关注 Angular 网站上的教程。我被依赖注入部分卡住了，因为它不想编译。

在教程中，他们要求创建一个服务：

ng generate service hero

在这个生成的服务中，你有一个这样的装饰器：

@Injectable()

然后他们要求像这样向该装饰器添加一个参数：

@Injectable({
  providedIn: 'root'
})

当我尝试这样做时，我有一个 TypeScript 错误告诉我：

错误 TS2554：预期 0 个参数，但得到 1 个。 我使用的版本是那些：

Angular CLI: 1.7.4
Node: 9.5.0
OS: win32 x64
Angular: 5.2.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.4
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

知道为什么它不接受参数吗？

提前致谢！

Answer 1

这是 Angular 6 中的一项新功能。

@Injectable({
  providedIn: 'root'
})

你有两个选择：

1. 请参阅 Angular 5 文档。 （正如@r-richards 所说 - 在左侧导航底部的下拉菜单中将文档的版本更改为 v5。）

2. 将您的项目升级到 Angular 6 以解决问题

遵循官方 Angular 升级指南。

您将填写一份简短的表格，选择您使用的 Angular 版本以及要升级到的版本。然后它会向您显示执行升级所需的步骤列表。您应该按照本指南进行所有升级。

https://update.angular.io/

以下是我在从 Angular 5 升级到 Angular 6 时做的一些笔记。

您的里程可能会因您的配置而异。我链接到下面对我有帮助的几篇文章。

更新 npm（节点包管理器）

npm install npm@latest -g 

升级节点

对于 Windows 和 mac 用户，最简单的方法是使用官方 Node 安装程序。或者查看下面关于 linux/unix 的文章。

https://nodejs.org/en/download/

全局和本地升级 Angular CLI

npm install -g @angular/cli
npm install @angular/cli

更新 package.json

ng update @angular/cli

更新@Angular/Core

ng update @angular/core

如果你正在使用它，请更新 Angular Material

ng update @angular/material

检查其他可能需要升级的软件包

npm outdated

更新所有过时的包

npm update

或者升级特定的包

npm update <package name>

您可能需要将 angular-cli.json 文件转换为 angular.json

ng update @angular/cli --migrate-only --from=1.7.4

正如@Sharondio 所指出的，如果您发现异常情况，重新启动您的 IDE 以及您的整个计算机可能永远不会有坏处。

参考资料：

升级节点

http://www.hostingadvice.com/how-to/update-node-js-latest-version/

升级 Angular

https://vitalflux.com/upgrade-angular-5-app-angular-6/

其他故障排除步骤

https://stackoverflow.com/a/49811824/151325

Answer 2

在 Angular 教程中应用的最简单的解决方案是：

1) 删除 @Injectable 装饰器中的意外参数（由于您的 Angular 版本）：

不要使用：

@Injectable({
  providedIn: 'root',
})
export class HeroService {

但是使用：

@Injectable()
export class HeroService {

2) 将 HeroService 和 MessageService 添加到 app.module.ts 以避免 HeroService 的 No provider！由于依赖注入导致的执行错误：

app.module.ts @NgModule 元数据：

  providers: [
    HeroService,
    MessageService
  ],

Answer 3

对于角度 5，您不需要设置参数并像离开一样

@Injectable(/* without any parameter here for angular 5 */)

Answer 4

我也遇到了这个问题，我已经解决了，包括 app.module.ts 中“Providers”中的类服务名称。

像这样：

@NgModule({
    declarations:[

    ],
    imports:[
        CommonModule,
        HttpClientModule
    ],
    exports:[

    ],
    providers: [
        PostListService 
    ]
})