Question

我正在使用Ionic 2.我刚刚将Ionic 2 rc3项目中的一些文物移动到了Ionic 2 rc4项目。

运行ionic serve后，我在浏览器中的运行时遇到以下错误：

Unhandled Promise rejection: Template parse errors:
Can't bind to 'control' since it isn't a known property of 'control-messages'.
1. If 'control-messages' is an Angular component and it has 'control' input, then verify that it is part of this module.
2. If 'control-messages' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("lName="username" id="username"></ion-input>
    </ion-item>
    <control-messages class="error-box" [ERROR ->][control]="forgotForm.controls.username"></control-messages>
    <br>
    <p class="or-text">OR</p>
"): ForgotPage@16:40
'control-messages' is not a known element:
1. If 'control-messages' is an Angular component, then verify that it is part of this module.
2. If 'control-messages' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("   <ion-input type="text" formControlName="username" id="username"></ion-input>
    </ion-item>
    [ERROR ->]<control-messages class="error-box" [control]="forgotForm.controls.username"></control-messages>
    "): ForgotPage@16:4
Can't bind to 'control' since it isn't a known property of 'control-messages'.
1. If 'control-messages' is an Angular component and it has 'control' input, then verify that it is part of this module.
2. If 'control-messages' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("ControlName="email" id="email"></ion-input>
    </ion-item>
    <control-messages class="error-box" [ERROR ->][control]="forgotForm.controls.email"></control-messages>
    <br/>
    <ion-buttons>
"): ForgotPage@23:40
'control-messages' is not a known element:
1. If 'control-messages' is an Angular component, then verify that it is part of this module.
2. If 'control-messages' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
      <ion-input type="text" formControlName="email" id="email"></ion-input>
    </ion-item>
    [ERROR ->]<control-messages class="error-box" [control]="forgotForm.controls.email"></control-messages>
    <br"): ForgotPage@23:4 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
Can't bind to 'control' since it isn't a known property of 'control-messages'.
1. If 'control-messages' is an Angular component and it has 'control' input, then verify that it is part of this module.
2. If 'control-messages' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("lName="username" id="username"></ion-input>
    </ion-item>
    <control-messages class="error-box" [ERROR ->][control]="forgotForm.controls.username"></control-messages>
    <br>
    <p class="or-text">OR</p>
"): ForgotPage@16:40
'control-messages' is not a known element:
1. If 'control-messages' is an Angular component, then verify that it is part of this module.
2. If 'control-messages' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("   <ion-input type="text" formControlName="username" id="username"></ion-input>
    </ion-item>
    [ERROR ->]<control-messages class="error-box" [control]="forgotForm.controls.username"></control-messages>
    "): ForgotPage@16:4
Can't bind to 'control' since it isn't a known property of 'control-messages'.
1. If 'control-messages' is an Angular component and it has 'control' input, then verify that it is part of this module.
2. If 'control-messages' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("ControlName="email" id="email"></ion-input>
    </ion-item>
    <control-messages class="error-box" [ERROR ->][control]="forgotForm.controls.email"></control-messages>
    <br/>
    <ion-buttons>
"): ForgotPage@23:40
'control-messages' is not a known element:
1. If 'control-messages' is an Angular component, then verify that it is part of this module.
2. If 'control-messages' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
      <ion-input type="text" formControlName="email" id="email"></ion-input>
    </ion-item>
    [ERROR ->]<control-messages class="error-box" [control]="forgotForm.controls.email"></control-messages>
    <br"): ForgotPage@23:4
Stack trace:
TemplateParser</TemplateParser.prototype.parse@http://localhost:8100/build/main.js:27049:19
RuntimeCompiler</RuntimeCompiler.prototype._compileTemplate@http://localhost:8100/build/main.js:54254:30
RuntimeCompiler</RuntimeCompiler.prototype._compileComponents/<@http://localhost:8100/build/main.js:54174:56
RuntimeCompiler</RuntimeCompiler.prototype._compileComponents@http://localhost:8100/build/main.js:54174:9
RuntimeCompiler</RuntimeCompiler.prototype._compileModuleAndComponents/createResult@http://localhost:8100/build/main.js:54070:13
T</d</t.prototype.invoke@http://localhost:8100/build/polyfills.js:3:9092
T</v</e.prototype.run@http://localhost:8100/build/polyfills.js:3:6462
h/<@http://localhost:8100/build/polyfills.js:3:4581
T</d</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:9712
T</v</e.prototype.runTask@http://localhost:8100/build/polyfills.js:3:7064
i@http://localhost:8100/build/polyfills.js:3:3664
 TemplateParser</TemplateParser.prototype.parse@http://localhost:8100/build/main.js:27049:19
RuntimeCompiler</RuntimeCompiler.prototype._compileTemplate@http://localhost:8100/build/main.js:54254:30
RuntimeCompiler</RuntimeCompiler.prototype._compileComponents/<@http://localhost:8100/build/main.js:54174:56
RuntimeCompiler</RuntimeCompiler.prototype._compileComponents@http://localhost:8100/build/main.js:54174:9
RuntimeCompiler</RuntimeCompiler.prototype._compileModuleAndComponents/createResult@http://localhost:8100/build/main.js:54070:13
T</d</t.prototype.invoke@http://localhost:8100/build/polyfills.js:3:9092
T</v</e.prototype.run@http://localhost:8100/build/polyfills.js:3:6462
h/<@http://localhost:8100/build/polyfills.js:3:4581
T</d</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:9712
T</v</e.prototype.runTask@http://localhost:8100/build/polyfills.js:3:7064
i@http://localhost:8100/build/polyfills.js:3:3664
  polyfills.js:3:3373
Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'control' since it isn't a known property of 'control-messages'.
1. If 'control-messages' is an Angular component and it has 'control' input, then verify that it is part of this module.
2. If 'control-messages' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("lName="username" id="username"></ion-input>
    </ion-item>
    <control-messages class="error-box" [ERROR ->][control]="forgotForm.controls.username"></control-messages>
    <br>
    <p class="or-text">OR</p>
"): ForgotPage@16:40
'control-messages' is not a known element:
1. If 'control-messages' is an Angular component, then verify that it is part of this module.
2. If 'control-messages' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("   <ion-input type="text" formControlName="username" id="username"></ion-input>
    </ion-item>
    [ERROR ->]<control-messages class="error-box" [control]="forgotForm.controls.username"></control-messages>
    "): ForgotPage@16:4
Can't bind to 'control' since it isn't a known property of 'control-messages'.
1. If 'control-messages' is an Angular component and it has 'control' input, then verify that it is part of this module.
2. If 'control-messages' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("ControlName="email" id="email"></ion-input>
    </ion-item>
    <control-messages class="error-box" [ERROR ->][control]="forgotForm.controls.email"></control-messages>
    <br/>
    <ion-buttons>
"): ForgotPage@23:40
'control-messages' is not a known element:
1. If 'control-messages' is an Angular component, then verify that it is part of this module.
2. If 'control-messages' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
      <ion-input type="text" formControlName="email" id="email"></ion-input>
    </ion-item>
    [ERROR ->]<control-messages class="error-box" [control]="forgotForm.controls.email"></control-messages>
    <br"): ForgotPage@23:4
TemplateParser</TemplateParser.prototype.parse@http://localhost:8100/build/main.js:27049:19
RuntimeCompiler</RuntimeCompiler.prototype._compileTemplate@http://localhost:8100/build/main.js:54254:30
RuntimeCompiler</RuntimeCompiler.prototype._compileComponents/<@http://localhost:8100/build/main.js:54174:56
RuntimeCompiler</RuntimeCompiler.prototype._compileComponents@http://localhost:8100/build/main.js:54174:9
RuntimeCompiler</RuntimeCompiler.prototype._compileModuleAndComponents/createResult@http://localhost:8100/build/main.js:54070:13
T</d</t.prototype.invoke@http://localhost:8100/build/polyfills.js:3:9092
T</v</e.prototype.run@http://localhost:8100/build/polyfills.js:3:6462
h/<@http://localhost:8100/build/polyfills.js:3:4581
T</d</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:9712
T</v</e.prototype.runTask@http://localhost:8100/build/polyfills.js:3:7064
i@http://localhost:8100/build/polyfills.js:3:3664

Stack trace:
s@http://localhost:8100/build/polyfills.js:3:4211
s@http://localhost:8100/build/polyfills.js:3:4034
h/<@http://localhost:8100/build/polyfills.js:3:4574
T</d</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:9712
T</v</e.prototype.runTask@http://localhost:8100/build/polyfills.js:3:7064
i@http://localhost:8100/build/polyfills.js:3:3664
  polyfills.js:3:3551

HTML

  <form [formGroup]="forgotForm" (ngSubmit)="submit()">
    <ion-item>
      <ion-label floating>Username</ion-label>
      <ion-input type="text" formControlName="username" id="username"></ion-input>
    </ion-item>
    <control-messages class="error-box" [control]="forgotForm.controls.username"></control-messages>
    <br>
    <p class="or-text">OR</p>
    <ion-item>
      <ion-label floating>Email</ion-label>
      <ion-input type="text" formControlName="email" id="email"></ion-input>
    </ion-item>
    <control-messages class="error-box" [control]="forgotForm.controls.email"></control-messages>
    <br/>
    <ion-buttons>
      <button ion-button class="form-button-text" type="submit" [disabled]="!forgotForm.valid" block round>Email</button>
    </ion-buttons>
  </form>

TS

import { Component } from '@angular/core';
import { NavController, NavParams, AlertController } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ValidationService } from '../validation/validationService';
import { EmailService } from '../service/emailService';
import { PersonModel } from '../model/PersonModel';

@Component({
  selector: 'forgot',
  templateUrl: 'forgot.html'
})
export class ForgotPage {

  public forgotForm: FormGroup;
  public emailService: EmailService = null;
  public personModel: PersonModel = null;

  constructor(public navCtrl: NavController, public navParams: NavParams, public builder: FormBuilder, emailService: EmailService, public alertCtrl: AlertController) {
    this.emailService = emailService;
    this.personModel = this.navParams.get('personModel');
    this.forgotForm = builder.group({
      'username': ['', [Validators.maxLength(55), ValidationService.userNameValidator]],
      'email': ['', [Validators.maxLength(55), ValidationService.emailValidator]],
    }
    // , {
    //     'validator': ValidationService.oneRequired('username', 'email')
    //   }
     );
  }

  submit() {
    if (this.forgotForm.dirty && this.forgotForm.valid) {
      if (this.forgotForm.value.email || this.forgotForm.value.username) {
        this.forgotPassword(this.forgotForm.value.email, this.forgotForm.value.username);
      }
    }
  }

  forgotPassword(email: string, userName: string) {
    let promise: Promise<string> = this.emailService.sendPassword(email, userName);
    promise.then((msg: string) => {
      this.doAlert(msg);
    });
  }

  doAlert(msg: string) {
    let alert = this.alertCtrl.create({
      title: 'Forgot Password',
      subTitle: msg,
      buttons: ['Dismiss']
    });
    alert.present();
  }
}

的package.json

{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "2.2.1",
    "@angular/compiler": "2.2.1",
    "@angular/compiler-cli": "2.2.1",
    "@angular/core": "2.2.1",
    "@angular/forms": "2.2.1",
    "@angular/http": "2.2.1",
    "@angular/platform-browser": "2.2.1",
    "@angular/platform-browser-dynamic": "2.2.1",
    "@angular/platform-server": "2.2.1",
    "@ionic/storage": "1.1.7",
    "@types/googlemaps": "^3.25.42",
    "angular2-moment": "^1.1.0",
    "angularfire2": "^2.0.0-beta.7.1-pre",
    "firebase": "^3.6.4",
    "ionic-angular": "2.0.0-rc.4",
    "ionic-native": "2.2.11",
    "ionicons": "3.0.0",
    "rxjs": "^5.0.3",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^1.0.0",
    "sw-toolbox": "^3.4.0",
    "typescript": "^2.0.9"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [],
  "description": "theWhoZoo-chat: An Ionic project"
}

离子信息

Your system information:

 ordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.2
Xcode version: Not installed

更新

查看this，如果我在import { ControlMessagesComponent } from './control-messages.component';中尝试app.module.ts，我会得到：

Error: Cannot find module "./control-messages.component"

任何建议都表示赞赏。

Answer 1

val testActor = actorSystem.actorOf(Props(classOf[TestActor], reqContext), "test-actor")中有一个缺失的组件。

添加了以下内容：

app.modules.ts

其中import { ControlMessages } from '../pages/validation/controlMessages';的选择器为ControlMessages：

control-messages

Answer 2

我有同样的问题，但我已解决。对于后来的人。将ControlMessagesComponent导入到使用它的模块中。根据上述问题，我们应该将ControlMessagesComponent导入forgot.module.ts：

@NgModule({
declarations: [
    ...
],
imports: [
    ...
    ControlMessagesComponent
],
exports: [
    ...
]

}）

无法绑定到'control'，因为它不是'control-messages'的已知属性

2 个答案: