标签: angular

我对Angular项目遇到了一些麻烦.我正在学习Angular并且遇到各种各样的错误.

我的项目正在编译并运行良好,但每当我尝试运行"ng测试"以查看我的测试是否成功时,我会收到所有类型的错误.它们看起来像这样:

ERROR in ./node_modules/webdriver-js-extender/node_modules/selenium-webdriver/firefox/extension.js
Module not found: Error: Can't resolve 'fs' in '

要么

ERROR in ./node_modules/tough-cookie/lib/cookie.js
Module not found: Error: Can't resolve 'net' in 

等等.我读到了我应该添加目标的fs:webpack配置中的'node'.当我执行一个ng Eject时,webpack配置文件就有了这个

...
"node": {
    "fs": "empty",
...

我的测试看起来像这样,我只附加了错误开始的部分:

it('should send credentials on submit', () => {
  let fixture = TestBed.createComponent(LoginComponent);
  let component: LoginComponent = fixture.componentInstance;
  let element = fixture.nativeElement;

  fixture.detectChanges();

  element.username = expectedUsername;


  element.query(by.id('login-username')).value = expectedUsername;
  element.query(by.id('login-username')).dispatchEvent(new Event('input'));
  element.query(by.id('login-password')).value = expectedPassword;
  element.query(by.id('login-password')).dispatchEvent(new Event('input'));

当我做:

ionic generate component my-component

这创建了这个文件夹结构:

components
    my-component
        my-component.ts
        my-component.scss
        my-component.html

    components.module.ts

我想在页面中使用此组件.我不打算在Ionic 3中使用新的延迟加载机制,但我不介意.无论什么工作最简单,我只想使用该组件!顺便说一句,我的页面没有自己的模块,这是页面的文件夹结构:

pages
    somepage
        somepage.ts
        somepage.scss
        somepage.html

现在回到组件:我在模板中使用自定义离子组件(离子网格).所以my-component.html看起来像这样:

<ion-grid></ion-grid>

该代码在VS Code中以红色突出显示.错误如下:

'ion-grid' is not a known element:
1. If 'ion-grid' is an Angular component, then verify that it is part of this module.
2. If 'ion-grid' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

这应该根据一百个帖子和问题通过添加IonicModule和CommonModule解决components.module.ts:

@NgModule({
    declarations: [MyComponent],
    imports: [
        CommonModule …

我正在迁移到rxjs 6.0.0-ucandoit-rc.6.在5.5.2我使用的版本ErrorObservable中创建了错误的observable.

我正在使用这里推荐的方式:https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md

因为throw是一个关键词,你可以在'rxjs/observable/throw'导入{_throw}之后使用_throw.

但是,不建议在rxjs6中导入此方法.

什么是正确的方法导入_throw或ErrorObservable？

我试图在Angular 5中创建一个组件，该组件将包含按钮的可重用模板。在我的应用程序的不同部分中，按钮将调用不同的函数，因此我希望能够告诉按钮的给定实例调用什么函数。我知道我可以在需要的地方为按钮创建HTML标记，但是我希望可以创建一个可重用的组件，以便确保整个应用程序中的格式一致。

错误

 Got interpolation ({{}}) where expression was expected at column 0 in 
        [{{functioncall}}]

零件

<div id = "button">
  <button type="button" class= "btn" (click) ="{{functioncall}}" >{{label}}</button>
</div>

和HTML

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

    @Component({
      selector: 'app-button',
      templateUrl: './button.component.html',
      styleUrls: ['./button.component.css']
    })
    export class ButtonComponent implements OnInit {
      @Input() label:string;
      @Input() functionCall:string;

      constructor() { }

      ngOnInit() {
      }
    }

我希望使用IONIC为我的应用程序创建上传功能.

这是我的HTML代码:

<input ion-button block type="file" id="uploadBR">
<input ion-button block type="file" id="uploadIC">
<button ion-button block (click)="upload()">Confirm Claim Restaurant</button>

这是我的upload()功能:

upload(){   
   let BR = document.getElementById('uploadBR').files[0]
   let IC = document.getElementById('uploadIC').files[0]
   console.log(BR)
   console.log(IC)    
 }

在普通的HTML中它应该可以工作,但它不适用于我的IONIC.

构建应用程序时,它将显示错误 Typescript Error: Property 'files' does not exist on type 'HTMLElement'.

我是以错误的方式做到的,还是必须以打字稿的不同方式完成？

谢谢.

我使用的角度,我想从一个变量,它是JSON形式.I'm能够做到这一点的显示数据*ngfor而且我希望把它检查是否msg.who =="博特"的条件我正在这样做:

<div class="UserWrapper" *ngFor="let msg of msgs" ngIf="msg.who == 'User ">
    <div class=""></div>
        <div class = "speech-bubble1 z-depth-5"><p>{{msg.msg}}</p>
            <p class="timeRight">{{msg.time}}</p>
    </div>
 </div>

我不知道如何使用ng如果另一种方式,但这样做我得到以下错误.

ERROR Error: StaticInjectorError(AppModule)[NgForOf -> TemplateRef]: 
StaticInjectorError(Platform: core)[NgForOf -> TemplateRef]: 
NullInjectorError: No provider for TemplateRef!

我该如何检查给定的条件

我正在尝试在NPM上发布一个打字稿库，但是发布后我找不到“好的”路径。

在这一点上，我遵循一些指南，但是找不到解决方案。

问题：因此，请考虑以下结构：

dist
 |- Alls files generated after tsc build
lib
 |- All TS files of library (source)
CHANGELOG.md
LICENSE
package.json
README.md
tsconfig.json

发布后，例如在Angular应用程序中，我将键入：

import {Component} from '<library name>/dist/Component';

我的问题：如何配置项目导入到有from '<library name>/Component'代替from '<library name>/dist/Component'吗？

谢谢

我正在使用Angular 5,Protractor和Cucumber进行e2e和bdd测试.当我在终端上运行时,ng e2e我收到以下错误:

当我打开页面#e2e\steps\home.steps.ts:15

错误:函数超时,确保promise在5000毫秒内解析

在第15行,我有:

 When(/^I open the page$/, async () => {
    await browser.get('http://localhost:49156');
 });

具体来说,就是这条线:

 When(/^I open the page$/, async () => {

我目前面临带有和输入的mat-chip-list的奇怪问题。我有一个包含两个表单控件的表单组：联系人和姓名。

this.form = this.formBuilder.group({
    name: ['', [Validators.required]],
    contactIds: ['', [Validators.required]]
})

该表单的视图如下所示：

<mat-form-field #contactsChipList>
    <mat-chip-list>
        <mat-chip *ngFor="let contact of contacts" [removable]="removable" (remove)="removeChipListItem(contact)">
            {{ contact.name | titlecase }} {{ contact.surname | titlecase }}
        <mat-icon matChipRemove *ngIf="removable"></mat-icon>
        </mat-chip>
        <input [matChipInputFor]="contactsChipList" placeholder="Contacts" formControlName="contactIds" />
        <mat-error *ngIf="form.hasError('required', 'contactIds')">This field is required</mat-error>
    </mat-chip-list>
</mat-form-field>

问题：当我从输入字段中删除所有元素时，父表单（formGroup）被标记为无效，但是formGroup的error属性不包含任何值。因此错误永远不会显示。

其他尝试：但是，当我使用普通的具有matInput属性但没有mat-chip-list的输入元素时，删除输入字段的内容时会正确显示错误。

在这种情况下，标记如下所示：

<div class="form-group">
    <mat-form-field>
        <input matInput placeholder="Contacts" formControlName="contactIds" />
        <mat-error *ngIf="form.hasError('required', 'contactIds')">This field is required</mat-error>
    </mat-form-field>
</div>

假设：我现在认为问题出在mat-chip-list元素上。我试图研究： @Input()errorStateMatcher: ErrorStateMatcher 但是我不确定如何使用。Google对该搜索并不友好。

有没有人遇到过这个问题？如果您需要澄清，请告诉我。

我有一个带有2个控件(port_start和port_end)的反应式表单,它们具有以下要求:

• 两者都必须有价值
• 它们的值必须介于0到65535之间
• port_start值必须小于port_end值

这是我到目前为止所尝试的:

[...]
this.formModel.addControl('port_start', 
  new FormControl(object.port_start ? object.port_start : 0, 
  [Validators.required, Validators.min(0), Validators.max(65535), this.minMaxValidator('port_start', 'port_end').bind(this)]));

this.formModel.addControl('port_end', 
  new FormControl(object.ort_end ? object.port_end : 0, 
  [Validators.required, Validators.min(0), Validators.max(65535), this.minMaxValidator('port_start', 'port_end').bind(this)]));
[...]

这是自定义验证器功能:

minMaxValidator = function(startControl : string, endControl : string): ValidatorFn {
  return (control: FormControl): {[key: string]: any} => {
    let valid = true;
    let valStart = 0;
    let valEnd = 0;

    if(this.formModel.controls[startControl] && this.formModel.controls[endControl]) {
      valStart = <number>this.formModel.controls[startControl].value;

      valEnd = <number>this.formModel.controls[endControl].value;
    }

    valid = valEnd >= valStart;

    return valid …