Skip to content

Why can it work without specifying an operator (@) in services? #21382

Description

@splincode

Adequate behavior

If I write this code, the compiler will swear

Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
Unexpected value 'AppComponent' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation

Inadequate behavior

But if I write this code, the compiler will not swear

app.component.ts

import { Component, Injectable } from '@angular/core';

Injectable() // thats without @
export class AuthService {
  constructor() {

  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  constructor(public auth: AuthService) {

  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent, AuthService } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [AuthService],
  bootstrap: [AppComponent]
})
export class AppModule { }

image

That is, I am purely allowed from the beginning to write Injectable without an operator (@). So, it can lead me here:

Uncertain behavior

app.component.ts

import { Component, Injectable } from '@angular/core';
import { HttpClient } from 'selenium-webdriver/http';

Injectable()
export class AuthService {
  constructor(private http: HttpClient) {

  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  constructor(private auth: AuthService) {

  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent, AuthService } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [AuthService],
  bootstrap: [AppComponent]
})
export class AppModule { }

image

Uncaught Error: Can't resolve all parameters for AuthService: (?).

But I would expect from the very beginning

Unexpected value 'AuthService' declared by the module 'AppModule'. Please add a @Injectable annotation

The worst after

The worst thing is that if I add an immediately missed statement (@), it means that ng serve does not work properly after that.

image

image

Environment

Angular version: 5.1.3
Browser: Chrome 63
Node version: 8.7.0
Windows 10

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: coreIssues related to the framework runtime

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions