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 { }

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 { }

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.


Environment
Angular version: 5.1.3
Browser: Chrome 63
Node version: 8.7.0
Windows 10
Adequate behavior
If I write this code, the compiler will swear
Inadequate behavior
But if I write this code, the compiler will not swear
app.component.ts
app.module.ts
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
app.module.ts
But I would expect from the very beginning
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.
Environment
Angular version: 5.1.3
Browser: Chrome 63
Node version: 8.7.0
Windows 10