Solvedangular Required Input() parameters

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[x] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Regardless of whether Input parameters of a component are optional or not, AoT does not throw an error or warning, making it difficult to find out mistakes where a required attribute is not passed down to a component in the template before runtime.

@Component({
  selector: 'app-username',
  template: `
    <p>{{username}}</p>
  `,
})
export class UsernameCompoennt implements OnInit {
  @Input() id: string;
  username: string;
  
  constructor(private usernameService: UsernameService) { }

  ngOnInit() {
    this.usernameService.getUsername(id).subscribe(user => this.username = user.name);
  }
};
<app-name></app-name>
// will be compiled with no warning or error, while the component is essentially useless without name being provided

Expected behavior

AoT will throw a warning or error, because a required input parameter has not been passed down to the component

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Will enable catching errors during compilation

Environment

Angular version: 4.2.X
13 Answers

✔️Accepted Answer

@HoumanKml If you really need some property, you can ensure that in selector like:

@Component({
    selector: 'app-username[id]'
})

This way it would become error when id is not provided in template.

But there still could be other issue, what if user provide an undefined/null deliberately? Then inside component it's still a nil value.

Theoretically this should be covered by type-checking, microsoft/TypeScript#8476 is a great proposal to handle some problem like this, but unfortunately, it's not suitable for Angular since none of the @Input()s are initialized within constructor.

And my understanding about the type-checking of Angular compiler is, if it's not an error in compiled .ngfactory.ts code raised by tsc, then it should not be an error of ngc. But if there is, it should be mapping to source of Angular (maybe in .html template).

More Issues: