{"action":"created","issue":{"url":"https://api.github.com/repos/angular/angular/issues/25249","repository_url":"https://api.github.com/repos/angular/angular","labels_url":"https://api.github.com/repos/angular/angular/issues/25249/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular/issues/25249/comments","events_url":"https://api.github.com/repos/angular/angular/issues/25249/events","html_url":"https://github.com/angular/angular/issues/25249","id":346668184,"node_id":"MDU6SXNzdWUzNDY2NjgxODQ=","number":25249,"title":"@Input properties are not being recognized from angular-cli built component library when extending component","user":{"login":"sir-captainmorgan21","id":7041924,"node_id":"MDQ6VXNlcjcwNDE5MjQ=","avatar_url":"https://avatars2.githubusercontent.com/u/7041924?v=4","gravatar_id":"","url":"https://api.github.com/users/sir-captainmorgan21","html_url":"https://github.com/sir-captainmorgan21","followers_url":"https://api.github.com/users/sir-captainmorgan21/followers","following_url":"https://api.github.com/users/sir-captainmorgan21/following{/other_user}","gists_url":"https://api.github.com/users/sir-captainmorgan21/gists{/gist_id}","starred_url":"https://api.github.com/users/sir-captainmorgan21/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sir-captainmorgan21/subscriptions","organizations_url":"https://api.github.com/users/sir-captainmorgan21/orgs","repos_url":"https://api.github.com/users/sir-captainmorgan21/repos","events_url":"https://api.github.com/users/sir-captainmorgan21/events{/privacy}","received_events_url":"https://api.github.com/users/sir-captainmorgan21/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2018-08-01T16:11:40Z","updated_at":"2018-08-01T19:28:09Z","closed_at":null,"author_association":"NONE","body":"## I'm submitting a...\r\n<pre><code>\r\n[ ] Regression (a behavior that used to work and stopped working in a new release)\r\n[ X ] Bug report  <!-- Please search GitHub for a similar issue or PR before submitting -->\r\n[ ] Performance issue\r\n[ ] Feature request\r\n[ ] Documentation issue or request\r\n[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question\r\n[ ] Other... Please describe:\r\n</code></pre>\r\n\r\n## Current behavior\r\nSo I have my base component...\r\n\r\n<pre><code>\r\nimport { FormGroup, FormControl, ValidatorFn, Validators, AbstractControl } from '@angular/forms';\r\nimport { SnagFormGroup } from '../forms';\r\nimport { Component, OnInit, Input } from '@angular/core';\r\nimport { IMaskConfig } from '../interfaces';\r\n\r\n@Component({\r\n  selector: 'snag-input',\r\n  templateUrl: './snag-input.component.html'\r\n})\r\nexport class SnagInputComponent implements OnInit {\r\n\r\n  @Input() maskArray: (string | RegExp)[];\r\n  @Input() maxLength: number;\r\n  @Input() minLength: number;\r\n  @Input() regex: RegExp;\r\n  @Input() required: boolean;\r\n  @Input() label: string = '<No Label Provided>';\r\n  @Input() controlName: string;\r\n  @Input() form: SnagFormGroup;\r\n  control: FormControl;\r\n  validators: ValidatorFn[] = [];\r\n  @Input() maskConfig: IMaskConfig = {\r\n    mask: null,\r\n    pipe: null,\r\n    guide: false\r\n  };\r\n\r\n  ngOnInit(): void {\r\n    this.validateInputs();\r\n    this.configureInputMask();\r\n    this.buildValidators();\r\n    this.control = new FormControl('', this.validators);\r\n    this.form.addControl(this.controlName, this.control);\r\n  }\r\n\r\n  constructor() {}\r\n\r\n  hasError(errorName: string): boolean {\r\n    return (this.control.touched || this.form.submitted) && this.control.hasError(errorName);\r\n  }\r\n\r\n  isValid(): boolean {\r\n    return this.control.touched && this.control.valid;\r\n  }\r\n\r\n  configureInputMask(): void {\r\n    this.maskArray ? this.maskConfig.mask = this.maskArray : null;\r\n  }\r\n\r\n  trimToMaxLength(conformedValue: string): string {\r\n    return conformedValue.substring(0, this.maxLength);\r\n  }\r\n\r\n  buildValidators(): void {\r\n    this.required ? this.validators.push(Validators.required) : null;\r\n    this.maxLength ? this.validators.push(Validators.maxLength(this.maxLength)) : null;\r\n    this.minLength ? this.validators.push(Validators.minLength(this.minLength)) : null;\r\n    this.regex ? this.validators.push(Validators.pattern(this.regex)) : null;\r\n  }\r\n\r\n  validateInputs() {\r\n    if (!this.form) {\r\n      throw 'Dont forget to pass in your SnagFormGroup! EX: <snag-input [form]=\\'mySnagFormGroup\\'>';\r\n    }\r\n  }\r\n\r\n  getFormControl(): AbstractControl {\r\n    return this.form.controls[this.controlName];\r\n  }\r\n\r\n}\r\n</code></pre>\r\n\r\nAnd I have my child components \r\n<pre><code>\r\nimport { Component } from '@angular/core';\r\nimport { Validators } from '@angular/forms';\r\nimport { SnagInputComponent } from '../snag-input';\r\n\r\n@Component({\r\n  selector: 'snag-email',\r\n  templateUrl: 'email.component.html'\r\n})\r\n\r\nexport class EmailComponent extends SnagInputComponent {\r\n\r\n  buildValidators(): void {\r\n    this.validators.push(Validators.email);\r\n    this.required ? this.validators.push(Validators.required) : null;\r\n    this.maxLength ? this.validators.push(Validators.maxLength(this.maxLength)) : null;\r\n    this.minLength ? this.validators.push(Validators.minLength(this.minLength)) : null;\r\n  }\r\n\r\n}\r\n\r\n-------------------------------------------------------------------------------------------\r\n\r\nimport { Component, Input } from '@angular/core';\r\nimport { Validators } from '@angular/forms';\r\nimport { SnagInputComponent } from '../snag-input';\r\n\r\n@Component({\r\n  selector: 'snag-select',\r\n  templateUrl: 'select.component.html'\r\n})\r\n\r\nexport class SelectComponent extends SnagInputComponent {\r\n\r\n  @Input() options: any[];\r\n  @Input() value: string;\r\n  @Input() name: string;\r\n\r\n}\r\n\r\n</code></pre>\r\n\r\nThe child component is just overriding the buildValidators method. Both of these components exist in a component library generated by angular-cli (v6.0.0). In my app that I use to test the library, if I import the module by pathing to /projects, everything is ok. However, when I build the project library and import the module from the /dist folder, the app can no longer recognize the @input properties that are on the child component from the extended base component. I get the following when I try to build the app with aot, and these errors show up in my IDE also. As you can see every input that comes from the base model is not being recognized.\r\n\r\n![image](https://user-images.githubusercontent.com/7041924/43542470-14aa934c-959b-11e8-9218-a831847f267a.png)\r\n\r\n\r\n<pre><code>\r\nERROR in : Can't bind to 'form' since it isn't a known property of 'snag-email'.\r\n1. If 'snag-email' is an Angular component and it has 'form' input, then verify that it is part of this module.\r\n2. If 'snag-email' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.\r\n3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (\" <div *ngIf=\"this.formState != 'fade'\">\r\n    <div class=\"input-row\">\r\n      <snag-email class=\"input\" [ERROR ->][form]=\"form\" [label]=\"'Email'\" [required]=\"true\" [controlName]=\"'email'\"></snag-email>\r\n      <snag-p\")\r\n: Can't bind to 'label' since it isn't a known property of 'snag-email'.\r\n1. If 'snag-email' is an Angular component and it has 'label' input, then verify that it is part of this module.\r\n2. If 'snag-email' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.\r\n3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (\"his.formState != 'fade'\">\r\n    <div class=\"input-row\">\r\n      <snag-email class=\"input\" [form]=\"form\" [ERROR ->][label]=\"'Email'\" [required]=\"true\" [controlName]=\"'email'\"></snag-email>\r\n      <snag-phone [form]=\"f\")\r\n: Can't bind to 'required' since it isn't a known property of 'snag-email'.\r\n1. If 'snag-email' is an Angular component and it has 'required' input, then verify that it is part of this module.\r\n2. If 'snag-email' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.\r\n3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (\"fade'\">\r\n    <div class=\"input-row\">\r\n      <snag-email class=\"input\" [form]=\"form\" [label]=\"'Email'\" [ERROR ->][required]=\"true\" [controlName]=\"'email'\"></snag-email>\r\n      <snag-phone [form]=\"form\" [label]=\"'Pho\")\r\n: Can't bind to 'controlName' since it isn't a known property of 'snag-email'.\r\n1. If 'snag-email' is an Angular component and it has 'controlName' input, then verify that it is part of this module.\r\n2. If 'snag-email' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.\r\n3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (\"lass=\"input-row\">\r\n      <snag-email class=\"input\" [form]=\"form\" [label]=\"'Email'\" [required]=\"true\" [ERROR ->][controlName]=\"'email'\"></snag-email>\r\n      <snag-phone [form]=\"form\" [label]=\"'Phone Number'\" [contr\")\r\n</code></pre>\r\n\r\n\r\n\r\n## Environment\r\n\r\n<pre><code>\r\nAngular version: 6.0.0\r\n</code></pre>\r\n"},"comment":{"url":"https://api.github.com/repos/angular/angular/issues/comments/409693407","html_url":"https://github.com/angular/angular/issues/25249#issuecomment-409693407","issue_url":"https://api.github.com/repos/angular/angular/issues/25249","id":409693407,"node_id":"MDEyOklzc3VlQ29tbWVudDQwOTY5MzQwNw==","user":{"login":"jotatoledo","id":20740204,"node_id":"MDQ6VXNlcjIwNzQwMjA0","avatar_url":"https://avatars3.githubusercontent.com/u/20740204?v=4","gravatar_id":"","url":"https://api.github.com/users/jotatoledo","html_url":"https://github.com/jotatoledo","followers_url":"https://api.github.com/users/jotatoledo/followers","following_url":"https://api.github.com/users/jotatoledo/following{/other_user}","gists_url":"https://api.github.com/users/jotatoledo/gists{/gist_id}","starred_url":"https://api.github.com/users/jotatoledo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jotatoledo/subscriptions","organizations_url":"https://api.github.com/users/jotatoledo/orgs","repos_url":"https://api.github.com/users/jotatoledo/repos","events_url":"https://api.github.com/users/jotatoledo/events{/privacy}","received_events_url":"https://api.github.com/users/jotatoledo/received_events","type":"User","site_admin":false},"created_at":"2018-08-01T19:28:09Z","updated_at":"2018-08-01T19:28:09Z","author_association":"NONE","body":"The input decorators wont be inherited. You need to explicitly make angular aware of that by doing the following changes:\r\n\r\n```\r\n@Component({\r\n  selector: 'snag-email',\r\n  templateUrl: 'email.component.html',\r\n  inputs: ['maxLength', .... ]\r\n})\r\n```\r\n\r\nMore info can be found in [the docs](https://angular.io/api/core/Directive#inputs)"}}
{"actor":{"display_login":"jotatoledo"}}