问题:

我是Angular的新手。 我开始了“英雄之旅”以学习它。 因此,我创建了带有two-way绑定的app.component

import { Component } from '@angular/core';
export class Hero {
    id: number;
    name: string;
}
@Component({
    selector: 'app-root',
    template: `
        <h1>{{title}}</h1>
        <h2>{{hero.name}}  details!</h2>
        <div><label>id: </label>{{hero.id}}</div>
        <div><label>Name: </label>
            <input [(ngModel)]="hero.name" placeholder="Name">
        </div>
    `,
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'Tour of Heroes';
    hero: Hero = {
        id: 1,
        name: 'Windstorm'
    };
}

在学习本教程之后,我导入了FormsModule并将其添加到声明数组中。 错误出现在此步骤:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
      AppComponent,
      FormsModule
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是错误:

未捕获的错误:模块’AppModule’声明了意外的模块’FormsModule’。 请添加@ Pipe / @ Directive / @ Component批注。

I’m new in Angular.I started Tour of Heroes to learn it.So, I am created an app.component with two-way binding.Following the tutorial I imported FormsModule and added it into declarations array.Error appeared at this step:Here is error:Uncaught Error: Unexpected module ‘FormsModule’ declared by the module ‘AppModule’.Please add a @Pipe/@Directive/@Component annotation.

问题:

我们已经完成了一个angular2项目设置和内部创建了一个模块(my-module),并在该模块内部使用以下cmd命令创建了一个组件(my-new-component):

ng new angular2test
cd angular2test
ng g module my-module
ng generate component my-new-component

在创建设置和所有组件之后,我们从angular2test文件夹中的cmd运行ng test命令。

下面的文件是我的my-new-component.component.ts文件 :

import { Component, OnInit } from '@angular/core';
import { Router, Routes, RouterModule } from '@angular/router';
import { DummyService } from '../services/dummy.service';

@Component({
  selector: 'app-my-new-component',
  templateUrl: './my-new-component.component.html',
  styleUrls: ['./my-new-component.component.css']
})
export class MyNewComponentComponent implements OnInit {

  constructor(private router : Router, private dummyService:DummyService) { }

  ngOnInit() {
  }
    redirect() : void{
        //this.router.navigate(['/my-module/my-new-component-1'])
    }
}

下面的文件是我的my-new-component.component.spec.ts文件 :

/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';

import { RouterTestingModule } from '@angular/router/testing';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { DummyService } from '../services/dummy.service';

import { MyNewComponentComponent } from './my-new-component.component';

describe('MyNewComponentComponent', () => {
  let component: MyNewComponentComponent;
  let fixture: ComponentFixture<MyNewComponentComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports: [RouterTestingModule, NgbModule.forRoot(), DummyService],
      declarations: [ MyNewComponentComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MyNewComponentComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  }); 
});

运行ng test命令时,我们收到以下cmd错误:

    Chrome 54.0.2840 (Windows 7 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.593 secs / 2.007 secs)
Chrome 54.0.2840 (Windows 7 0.0.0) MyNewComponentComponent should create FAILED
        Failed: Unexpected value 'DummyService' imported by the module 'DynamicTestModule'
        Error: Unexpected value 'DummyService' imported by the module 'DynamicTestModule'

我们更新了组件文件和spec文件。 很高兴找到下面的代码片段。

下面的文件是我的my-new-component.component.ts文件 :

import { Component, OnInit } from '@angular/core';
import { Router, Routes, RouterModule } from '@angular/router';
import { DummyService } from '../services/dummy.service';

@Component({
  selector: 'app-my-new-component',
  templateUrl: './my-new-component.component.html',
  styleUrls: ['./my-new-component.component.css']
})
export class MyNewComponentComponent implements OnInit {

  constructor(private router : Router, private dummyService:DummyService, public fb: FormBuilder) { 
  super(fb);
  }

  ngOnInit() {
  }
    redirect() : void{
        //this.router.navigate(['/my-module/my-new-component-1'])
    }
}

下面的文件是我的my-new-component.component.spec.ts文件 :

/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { FormsModule, FormGroup, FormBuilder, Validators, ReactiveFormsModule} from '@angular/forms';
import { SplitPipe } from '../../common/pipes/string-split.pipe';
import { RouterTestingModule } from '@angular/router/testing';
import { DummyService } from '../services/dummy.service';
import { MyNewComponentComponent } from './my-new-component.component';

describe('MyNewComponentComponent', () => {
  let component: MyNewComponentComponent;
  let fixture: ComponentFixture<MyNewComponentComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports: [RouterTestingModule, DummyService ,HttpModule, FormBuilder],
      declarations: [ MyNewComponentComponent, SplitPipe]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MyNewComponentComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  }); 
});

但是在运行ng test命令时,我们得到以下错误。

09 12 2016 09:13:48.987:WARN [karma]: No captured browser, open http://localhost:9876/
09 12 2016 09:13:49.008:INFO [karma]: Karma v1.2.0 server started at http://localhost:9876/
09 12 2016 09:13:49.010:INFO [launcher]: Launching browser Chrome with unlimited concurrency
09 12 2016 09:13:49.420:INFO [launcher]: Starting browser Chrome
09 12 2016 09:13:58.642:INFO [Chrome 54.0.2840 (Windows 7 0.0.0)]: Connected on socket /#QZ9LSSUVeK6KwNDlAAAA with id 46830907
        Failed: Unexpected value 'FormBuilder' imported by the module 'DynamicTestModule'
        Error: Unexpected value 'FormBuilder' imported by the module 'DynamicTestModule'

We have done one angular2 project set up and inside that created one module (my-module) and inside that module created one component (my-new-component) using following cmd commands:After creating the set up and all components, we ran ng test command from cmd inside angular2test folder.The below file is our my-new-component.component.ts file :The below file is our my-new-component.component.spec.ts file :We are getting the below cmd error while running the ng test command:We have updated the component file and the spec file.Pleased find below the code snippet.The below file is our my-new-component.component.ts file :The below file is our my-new-component.component.spec.ts file :But while running the ng test command, we are getting the below error.

问题:

我从本教程中提取了示例模板代码,并按照以下两个步骤进行了入门-

  1. npm install // worked fine and created node_modules folder with all dependencies
  2. npm start //失败,并出现以下错误-

     node_modules/rxjs/Subject.d.ts(16,22): error TS2415: Class 'Subject<T>' incorrectly extends base class 'Observable<T>'. Types of property 'lift' are incompatible. Type '<T, R>(operator: Operator<T, R>) => Observable<T>' is not assignable to type '<R>(operator: Operator<T, R>) => Observable<R>'. Type 'Observable<T>' is not assignable to type 'Observable<R>'. Type 'T' is not assignable to type 'R'. npm ERR! code ELIFECYCLE npm ERR! errno 2 

我看到在抬升的subject.d.ts声明中如下所示-

 lift<T, R>(operator: Operator<T, R>): Observable<T>;

在Observable.ts中,它的定义如下:

 lift<R>(operator: Operator<T, R>): Observable<R> {

注意:1. 1.我是Angular2的新手,正在尝试掌握一切。

  1. 该错误可能是由于提升方法的定义不兼容

  2. 我阅读了这个github线程

  3. 如果我需要安装其他版本的rxjs,请告诉我们如何卸载并安装正确的rxjs。

Edit1:我在这里响应可能有点晚,但是即使使用打字稿2.3.4rxjs 6 alpha,我仍然会遇到相同的错误。 以下是我的package.json,

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "6.0.0-alpha.0",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.23",
    "angular2-in-memory-web-api": "0.0.20",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.2.0",
    "lite-server": "^2.2.2",
    "typescript": "2.3.4",
    "typings": "^1.3.2"
  }
}

I extracted sample template code from this tutorial and did below two steps to get started –npm start // failed with below error-I see that in the subject.d.ts declaration of lift is as below -And in Observable.ts it is defined as below-Note:- 1. I am new to Angular2 and trying to get hold of things.The error might be due to incompatible definitions of lift methodI read through this github threadIf I need to install some different version of rxjs then please tell how to uninstall and install the correct rxjs.Edit1: I might be a bit late in responding here but I still get the same error even after using typescript 2.3.4 or rxjs 6 alpha .Below is my package.json,

问题:

我刚刚创建了一个全新的项目
并运行npm install [email protected] jquery popper.js --save
并更改了.angular-cli.json的相关部分,如下所示

  "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/popper.js/dist/popper.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ],

但是接收到以下错误

10:2287 Uncaught SyntaxError: Unexpected token export
    at eval (<anonymous>)
    at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9)
    at Object.../../../../script-loader/index.js!../../../../popper.js/dist/popper.js (popper.js?4b43:1)
    at __webpack_require__ (bootstrap 4403042439558687cdd6:54)
    at Object.2 (scripts.bundle.js:66)
    at __webpack_require__ (bootstrap 4403042439558687cdd6:54)
    at webpackJsonpCallback (bootstrap 4403042439558687cdd6:25)
    at scripts.bundle.js:1

任何想法如何解决它?

I just created a brand new projectand ran npm install [email protected] jquery popper.js --saveand changed the .angular-cli.json ‘s related parts as belowhowever receiving the error belowany idea how to fix it?

问题:

我正在使用Angular 4 HttpClient将请求发送到外部服务。 这是一个非常标准的设置:

this.httpClient.get(url).subscribe(response => {
  //do something with response
}, err => {
  console.log(err.message);
}, () => {
  console.log('completed');
}

问题是,当请求失败时,我会看到Http failure response for (unknown url): 0 Unknown Error的通用Http failure response for (unknown url): 0 Unknown Error控制台中出现Http failure response for (unknown url): 0 Unknown Error消息。 同时,当我检查Chrome中失败的请求时,我可以看到响应状态为422,并且在“预览”选项卡中,我看到了描述失败原因的实际消息。

如何访问我在chrome开发工具中看到的实际响应消息?

这是展示问题的屏幕截图: 在此处输入图片说明

I’m using Angular 4 HttpClient to send requests to external service.It is a very standard setup:The problem is, when the request fails I see a generic Http failure response for (unknown url): 0 Unknown Error message in console.Meanwhile, when I inspect the failed request in chrome I can see the response status is 422, and in the “preview” tab I see the actual message desribing failure cause.How do I access the actual response message I can see in chrome dev tools?Here’s a screenshot demonstrating the problem: