angular-programming / issues Goto Github PK

14.4 P387 中 home/home.modules.ts 的示例代码中， imports: [CommonModule, SharedModule, CarouselModule], 去掉了angular-seed 中原来的 HomeRoutingModule, 但是项目此时启动依然会通过HomeRoutingModule 去启动HomeComponent，所以这里不能去掉这个 import, 否则home页面无法加载。按照书中讲解，此时项目若想成功工作，home/home.module.ts 的代码如下：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { HomeComponent } from './home.component';
import { HomeRoutingModule } from './home-routing.module';
import { SharedModule } from '../shared/shared.module';
import { CarouselModule } from 'ng2-bootstrap/components/carousel';

@NgModule({
imports: [CommonModule, HomeRoutingModule, SharedModule, CarouselModule],
declarations: [HomeComponent],
exports: [HomeComponent]
})
export class HomeModule { }

期待中看到Angular2的表格组件没有出现在书中，建议使用的是ng2-bootstrap UI，但是该组件没有table、tree等，问下广发的Angular2系统是怎么解决实现table问题的，我们目前只能使用bootstrap table，也就是jquery插件，觉得和jquery耦合不太好

import {ModuleA} from "./ModuleA.ts";

error message: 'An import path cannot end with a '.ts' extension. Consider importing './ModuleA' instead.'

书上写 function f([first, second]) =[number, number]) {
console.log(first + second);
}
会报错, 上面的那个等号(=)应该是冒号(:)吧

本人初学ng2，webpack也是首次使用，一些问题还不是特别明白，clone下来书中的demo，npm start报错（应该是npm和node都是最新的问题），往作者能改善一下书中demo的代码：）

错误日志如下:
(SystemJS) Can't resolve all parameters for RegisterComponent: (?, UserService, Router).

组件:RegisterComponent 部分代码如下:
export class RegisterComponent implements OnInit {
form:FormGroup;
registered = false;
fields:FieldBase[] = [];
alert:any = {msg:'注册成功',type:'success',closable:true};

constructor(
    private registerService:RegisterService,
    private userService:UserService,
    private route:Router
    ) {
        this.fields = registerService.getFields();
     }

RegisterService.ts的代码如下:
import { Injectable } from '@angular/core';
import { Http,Headers } from '@angular/http';
import { FormControl,Validators,FormGroup } from '@angular/forms';

import { FieldBase,FieldText,FieldValidators} from '../../user/shared/index';
import { SITE_HOST_URL } from '../../shared/index';

@Injectable()
export class RegisterService {

private registerUrl = `${SITE_HOST_URL}user/add`;

constructor(private http:Http) { }

getFields(){
    let fields:FieldBase<any>[]=[
        new FieldText({
            key:'username',
            lable:'用户名',
            value:'',
            required:true,
            pattern:'username',
            order:1
        }),
        new FieldText({
            key:'password',
            lable:'密码',
            type:'password',
            value:'',
            required:true,
            pattern:'password',
            order:2
        }),
    ];
   return fields.sort((a,b)=>a.order - b.order); 
}

toFormGroup(fields:FieldBase<any>[]){
    let group :any = {};
    fields.forEach(field=>{
        group[field.key]=
            field.pattern?
            new FormControl(field.value||'',(<any>FieldValidators)[field.pattern]):
            field.required?
            new FormControl(field.value||'',Validators.required):
            new FormControl(field.value||'');
    });
    return new FormGroup(group);
}

addUser(data:Object){
    let body = JSON.stringify(data);
    let headers = new Headers();
    headers.append('Content-Type','application/json');
    return this.http.post(this.registerUrl,body,{headers});
}

}

1.组件中私有属性服务:RegisterService已在父模块中注入了.
2.如果注释掉构造方法中的私有属性private registerService:RegisterService,错误会消失.
3.如果注释掉RegisterService中的toFormGroup(),getFields()方法,则错误会消失.

组件 animations 章节中(146页), 绑定动画变量应该为 [@buttonStatus]='status',书中为@buttonStatus='status'

直接在.angular-cli.json中配置css和js，不行啊

看了半天没看懂。

Angular CLI 1.0.0已经出了，可以迁移一下？

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { QuestionSharedModule } from './shared/question-shared.module';

@NgModule({
  imports: [CommonModule, FormsModule, QuestionSharedModule],
  exports: [CommonModule, QuestionSharedModule]
})
export class QuestionModule {

  static forRoot(): ModuleWithProviders {
    return {
      ngModule: QuestionModule
    };
  }
}

想请教下为什么问题模块的到处要写成这种方式，这种方式的写法会带来什么好处吗？

项目webpack编译打包后，放入服务器，想要代理生效怎么弄哈，下述代码貌似没生效，调用的接口是本地地址，是不是下述配置只对开发模式生效。
proxy: {
'/api/*': {
target: 'http://localhost:8888',
secure: false
}
}

3.8.6装饰器组合部分，装饰器的调用顺序的描述虽然没有写错，但最重要的，关于结果返回函数的调用顺序没有说明，因为它正好相反。
神奇的是，给出的例子代码没有问题，但是输出竟然是错的。出错的原因真是耐人寻味。

如果pure js实现双向数据绑定，如何检测一个变量变化了，更新dom组件

P287 有派生组件继承父组件的代码，class SortedContactAppComponent implements ContactAppComponent{} , 因为在TypeScript里，类继承用的关键字是 extends, 接口继承的关键字是 implements. 而组件本质上是一个类，所以这里让我有些迷惑。这是不是书上的一个 typo呢？

烦请老师看一下，给予澄清。多谢。

在
< h3 >
Hello World!
< /h3 >
前面应该标注“app.component.html的代码如下：”

1、打包css，可以分模块打包么，现在直接把所有组件的css全部通过style标签导入。
2、动态生成的图片好像检测不到，导致打不了。只能拷贝。
请问下这方面怎么配置比较好

原文是：contactForm.value 的值为：
{ name: '李四', telNum: '123456789' }
其中的name应该为'contactName'：
{ contactName: '李四', telNum: '123456789' }

181面中，原文为：下面的例子是一个文本控件，将[{ngModel}] 初始化为联系人姓名，并添加控件局部变量name...
[{ngModel}]应该改为[(ngModel)]。

ng2-translate国际化的词条(assets/i18n/en.json、zh.json)，用webpack方式的话，编译后怎么拷贝过去，目前编译后dist目录找不到

一、异步事件被zones捕获，哪个自定义事件决定去执行变化检测
有的写onUnstable、有的写onMicrotaskEmpty。
以下三个自定义事件，我这样理解可以么
1、onUnstable，异步事件启动，执行异步之前。
2、onMicrotaskEmpty，异步事件完成了，回调函数开始。
3、onStable，回调函数完成。
如果这么理解了，按道理应该onStable去通知执行变化检测啊，因为数据没变化，通知也没用啊。
另外，Angular双向数据绑定原理，书中好像没有涉及，检测数据变化后，怎么通知视图的啊，视图变化，怎么更新到变量啊。
二、依赖注入底层怎么实现的啊，Angular的实现方式和Spring一样么，反射、工厂模式啥的。

浏览器访问edit.component.ts组件就报以下错误:core.umd.js:2838 EXCEPTION: Uncaught (in promise): Error: Error in http://localhost:5555/app/edit/edit.component.html:3:12 caused by: No provider for e!

edit.component.html:

edit.component.ts文件完全按书上代码写的.

如果注释掉一部分代码访问就没问题:

... <span *ngSwitchCase="'TimCook"> 蒂姆 · 库克 </span> ...
TimCook的右边缺了个单引号

Angular2项目切换时，根据选择的皮肤，组件加载相应的css，可以做到么

书上各种图太赞了，非常有助于理解各种知识点和流程，很想知道是怎么做出来的？多谢！

181页NgForm表单局部变量部分
原文：

{
neme：‘李四’，
telNum:'123456789'
}

这个JSON对象的属性名neme，根据上下文，应为contactName。

代码最开始有: private el: HTMLElement

构造函数中注入ElementRef时又将属性命名为el

当用http发送请求后(map&catch方式)，如果rest接口只返回状态码，结果返回null，http请求走的是catch流程，这个解决哈

在用Angular 2.4.10版本实践的时候，在书中第243页contact.service.ts代码段里
import { Http } from "@angular/http";
一句少了Response模块引入，报错信息为：

The type argument for type parameter 'T' cannot be inferred from the usage. Consider specifying the type arguments explicitly.
  Type argument candidate 'Response[]' is not a valid type argument because it is not a supertype of candidate 'Response'.
    Property 'find' is missing in type 'Response'.

应该改为：
import { Http, Response } from "@angular/http";

虽然这个错误坑了我好久，但还是谢谢你们的书，收获甚大！

随手翻到第五页的时候，章节1.5的第四自然段：

……过去有人提出Om在速度上比原生Javascript版本的React快了非常多……究其背后，其中一个很重要的原因是……使用了不可变数据类型……受此启发，React社区也冒出了Immutable.js，优化了Javascript这门弱类型语言对于引用对象的变化检测性能问题，也更好地提升了性能。

对这段话不太理解，请问不可变的数据类型是指强类型吗？也就像是TypeScript一样？就性能而言，Typescript比原生弱类型的Javascript更好吗？

1. 第374页 的下载angular-seed 项目的命令有误。现在git 的clone命令，需要把url 放在最后。 git clone [] [--] [

   ]， 书上给的命令是无法使用的。

2. 下载完angular-seed 项目，执行 npm install 命令后，会看到以下错误信息：
   npm ERR! Windows_NT 10.0.10586
   npm ERR! argv "D:\Program Files\nodejs\node.exe" "D:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install"
   npm ERR! node v6.10.1
   npm ERR! npm v3.10.10
   npm ERR! code ELIFECYCLE

npm ERR! [email protected] postinstall: node scripts/build.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script 'node scripts/build.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the node-sass package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node scripts/build.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs node-sass
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls node-sass
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! D:\Code\Angular 2\angular2-questionnaire\frontend\npm-debug.log

此时node_modules 文件夹已经生成。

执行npm start 命令后，启动失败，看到如下错误信息：

[09:59:36] Error: Cannot find module '.tmp/Rx.min.js'
at Function.Module._resolveFilename (module.js:469:15)
at Function.resolve (internal/module.js:27:19)
at D:\Code\Angular 2\angular2-questionnaire\frontend\tools\config\seed.config.ts:617:59
at Array.forEach (native)
at normalizeDependencies (D:\Code\Angular 2\angular2-questionnaire\frontend\tools\config\seed.config.ts:617:6)
at ProjectConfig.get [as DEPENDENCIES] (D:\Code\Angular 2\angular2-questionnaire\frontend\tools\config\seed.config.ts:326:12)
at getExternalCss (D:\Code\Angular 2\angular2-questionnaire\frontend\tools\tasks\seed\build.html_css.ts:139:16)
at getExternalCssStream (D:\Code\Angular 2\angular2-questionnaire\frontend\tools\tasks\seed\build.html_css.ts:131:19)
at processExternalCss (D:\Code\Angular 2\angular2-questionnaire\frontend\tools\tasks\seed\build.html_css.ts:163:10)
at processExternalStylesheets (D:\Code\Angular 2\angular2-questionnaire\frontend\tools\tasks\seed\build.html_css.ts:112:65)
[09:59:36] 'serve.dev' errored after 5.36 s
[09:59:36] Error in plugin 'run-sequence(build.html_css)'
Message:
Cannot find module '.tmp/Rx.min.js'
Details:
code: MODULE_NOT_FOUND
Stack:
Error: Cannot find module '.tmp/Rx.min.js'
at Function.Module._resolveFilename (module.js:469:15)
at Function.resolve (internal/module.js:27:19)
at D:\Code\Angular 2\angular2-questionnaire\frontend\tools\config\seed.config.ts:617:59
at Array.forEach (native)
at normalizeDependencies (D:\Code\Angular 2\angular2-questionnaire\frontend\tools\config\seed.config.ts:617:6)
at ProjectConfig.get [as DEPENDENCIES] (D:\Code\Angular 2\angular2-questionnaire\frontend\tools\config\seed.config.ts:326:12)
at getExternalCss (D:\Code\Angular 2\angular2-questionnaire\frontend\tools\tasks\seed\build.html_css.ts:139:16)
at getExternalCssStream (D:\Code\Angular 2\angular2-questionnaire\frontend\tools\tasks\seed\build.html_css.ts:131:19)
at processExternalCss (D:\Code\Angular 2\angular2-questionnaire\frontend\tools\tasks\seed\build.html_css.ts:163:10)
at processExternalStylesheets (D:\Code\Angular 2\angular2-questionnaire\frontend\tools\tasks\seed\build.html_css.ts:112:65)
[09:59:36] 'build.dev' errored after 5.38 s
[09:59:36] Error in plugin 'run-sequence(serve.dev)'
Message:
Cannot find module '.tmp/Rx.min.js'
Details:
code: MODULE_NOT_FOUND
Stack:
Error: Cannot find module '.tmp/Rx.min.js'
at Function.Module._resolveFilename (module.js:469:15)
at Function.resolve (internal/module.js:27:19)
at D:\Code\Angular 2\angular2-questionnaire\frontend\tools\config\seed.config.ts:617:59
at Array.forEach (native)
at normalizeDependencies (D:\Code\Angular 2\angular2-questionnaire\frontend\tools\config\seed.config.ts:617:6)
at ProjectConfig.get [as DEPENDENCIES] (D:\Code\Angular 2\angular2-questionnaire\frontend\tools\config\seed.config.ts:326:12)
at getExternalCss (D:\Code\Angular 2\angular2-questionnaire\frontend\tools\tasks\seed\build.html_css.ts:139:16)
at getExternalCssStream (D:\Code\Angular 2\angular2-questionnaire\frontend\tools\tasks\seed\build.html_css.ts:131:19)
at processExternalCss (D:\Code\Angular 2\angular2-questionnaire\frontend\tools\tasks\seed\build.html_css.ts:163:10)
at processExternalStylesheets (D:\Code\Angular 2\angular2-questionnaire\frontend\tools\tasks\seed\build.html_css.ts:112:65)
[09:59:36] 'build.dev' errored after 5.41 s
[09:59:36] Error in plugin 'run-sequence(build.html_css)'
Message:
Cannot find module '.tmp/Rx.min.js'
Details:
code: MODULE_NOT_FOUND
Stack:
Error: Cannot find module '.tmp/Rx.min.js'
at Function.Module._resolveFilename (module.js:469:15)
at Function.resolve (internal/module.js:27:19)
at D:\Code\Angular 2\angular2-questionnaire\frontend\tools\config\seed.config.ts:617:59
at Array.forEach (native)
at normalizeDependencies (D:\Code\Angular 2\angular2-questionnaire\frontend\tools\config\seed.config.ts:617:6)
at ProjectConfig.get [as DEPENDENCIES] (D:\Code\Angular 2\angular2-questionnaire\frontend\tools\config\seed.config.ts:326:12)
at getExternalCss (D:\Code\Angular 2\angular2-questionnaire\frontend\tools\tasks\seed\build.html_css.ts:139:16)
at getExternalCssStream (D:\Code\Angular 2\angular2-questionnaire\frontend\tools\tasks\seed\build.html_css.ts:131:19)
at processExternalCss (D:\Code\Angular 2\angular2-questionnaire\frontend\tools\tasks\seed\build.html_css.ts:163:10)
at processExternalStylesheets (D:\Code\Angular 2\angular2-questionnaire\frontend\tools\tasks\seed\build.html_css.ts:112:65)

npm ERR! Windows_NT 10.0.10586
npm ERR! argv "D:\Program Files\nodejs\node.exe" "D:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v6.10.1
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: gulp serve.dev --color
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'gulp serve.dev --color'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular-seed package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! gulp serve.dev --color
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular-seed
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular-seed
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! D:\Code\Angular 2\angular2-questionnaire\frontend\npm-debug.log

node 和 npm 的版本如下：
node v6.10.1
npm v3.10.10
因为我在运行angular官网的例子是可以成功的。想请教一下，不知道是git上这个代码包里少文件，还是我的计算机哪里配置有问题。万望不吝赐教，十分感谢！

1.在通讯录列子中新增了一个模块文件p238.module.ts，用于懒加载。
const operateRoutes: Routes = [
{ path: "p238",component: ParentComponent}
];
@NgModule({
imports: [CommonModule, FormsModule, RouterModule.forChild(operateRoutes)],
declarations: [ParentComponent, ChildComponent]
})
export class P238Module {}

2.在app.routes.ts根路由配置中，添加如下内容。
{
path: "p238",
loadChildren:'app/p238/p238.module#P238Module'
}
3.运行时报错，如果不使用模块懒加载是正常的，感觉跟webpack有关。请帮忙指导下。

我是angular的初学者，学到angular单元测试一块的时候，对于344-349页的文件组织，以及要下载的包之类的摸不着头脑，希望能够有源码提供。另外感觉可以在将karma.config.js的配置之前大概讲解一下，要先安装哪些东西，还是基于前面的某一个文件的环境开始，以方便初学者学习，谢谢。

在27面数组解构中：
function f([first, second] = [number, number]){ console.log(first + second); } f([1, 2]);
会报错：
test.ts(1,29): error TS2304: Cannot find name 'number'. test.ts(1,37): error TS2304: Cannot find name 'number'.
不加上后面的[number, number]就不报错了。

求测试部分的代码，因为书中给的代码不全，所以总有一些包引入不了。比如没有引入import {} from 'jasmine';，导致decsribe等一些关键字找不到。
其次，在mock测试时，我的provide还是"cannot find name 'provide'"

在读本书过程中碰到了很多疑惑。如:
page103,108,109 提到的 contactItem.component.ts 在本书源码中没有找到，
另page119 中的 changeLog.component.ts 也没找到，
page121页中的 ContactCollectComponent具体实现也没找到，
还望指点迷津，谢谢！！

1、Angular的http请求怎么设置同步哈。
2、ng2-translate的国际化，怎么分文件编写，本来gulp我们是写脚本把文件合并到en.json、zh.json，如果webpack应该怎么弄哈。

当只改变@input对象的属性时，组件的ngonchanges方法不会被执行，重新赋值是可以的，研究老半天解决不了，你们有经验么~

一共四个label，成对的第一个都写错成lable了

引入HostListener：
import { Directive, ElementRef, Input, HostListener }

原文：...可以将backgroundColor 属性用set 方法重写，示例代码如下：
... constructor(el: ElementRef){ this.el = el.nativeElement; this.setStyle(_defaultColor); }
此处的_defaultColor应该改为this._defaultColor。

请问这个是什么问题，该如何解决。
另外代码中ng2-bootstrap文件目录，和现在用npm，install下来的目录不一样。

并没有ng2-bootstrap/component/这一级目录。#

P180 标签label的for属性是对应到input的id属性值的

P181 原文：则contactForm.value的值为： {name: '李四', telNum: '123456789'}
此处name应该为contactName。取得是input的name属性值

P239 父组件示例代码中有一行 <ul *ngFor="#item in list">, 这里为何使用#？ 是否是一个typo？

如图所示，正确来说应该用中括号属性传值的方式

原文：

//list.component.html
....
<list-li [contact]="contact" (routerNavigate)="routerNavigate($event)">
</list-li>
...

这里的子组件名应该为“list-item”而不是“list-li”

模板表单的章节的多次出现curContact，问下这个数据在哪里？到处找没找到，不是杜撰出来的吧？