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

Upgarde节点

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

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

Upgarde Angular CLI全球和本地

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

更新package.json

ng update @angular/cli

更新@ Angular / Core

ng update @angular/core

如果您正在使用它，请更新Angular材料

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

参考文献：

升级节点

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

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

像这样：

@NgModule({
    declarations:[

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

    ],
    providers: [
        PostListService 
    ]
})

Answer 3

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

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

请勿使用：

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

但是使用：

@Injectable()
export class HeroService {

2）将HeroService和MessageService添加到app.module.ts 中，以避免Hero Service的否提供者！由于依赖注入导致执行错误：

app.module.ts @NgModule元数据：

  providers: [
    HeroService,
    MessageService
  ],

Answer 4

对于角度5，您不需要设置参数，而像

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

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

4 个答案: