Angular2使用中的一下注意事项与问题

在angular2项目中 compass的使用

在头部引入

@import "~compass-mixins/lib/compass/css3";

而不是

@import "compass/css3";

ng2-file-upload预览的实现

第一种使用 platform-brower

import {DomSanitizer, SafeUrl} from "@angular/platform-browser";

这种方式有极限，浏览器支持比较少

第二种使用 编写一个指令

import { Directive, ElementRef, Input, OnChanges, Renderer } from '@angular/core';

@Directive({ selector: 'img[imgPreview]' })
export class ImagePreviewDirective implements OnChanges {
  @Input() image: any;

  constructor(private el: ElementRef, private renderer: Renderer) {}

  ngOnChanges(changes: SimpleChanges) {
    const reader = new FileReader();
    const el = this.el;
    reader.onloadend = function (e) {
      el.nativeElement.src = reader.result;
    };
    if (this.image) {
      return reader.readAsDataURL(this.image);
    }
  }
}

Angular2 使用websocket sockjs和stomp碰到 Cannot resolve module 'net'

https://github.com/jmesnil/stomp-websocket/issues/119

我的处理方式安装net模块

stomp必须依赖于sockjs运行，否则程序无法运行

centos下ng-client无法npm install的问题angular2-image-popup@1.1.2 postinstall /opt/soft/ngclient/node_modules/angular2-

angular2-image-popup@1.1.2 postinstall /opt/soft/ngclient/node_modules/angular2-image-popup

\> typings install

/opt/soft/ngclient/node_modules/configstore/index.js:48

throw err;

^

Error: EACCES: permission denied, open '/root/.config/configstore/typings.json'

You don't have access to this file.

    at Object.fs.openSync (fs.js:652:18)

    at Object.fs.readFileSync (fs.js:553:33)

   at Configstore.get all [as all] (/opt/soft/ngclient/node_modules/configstore/index.js:29:25)

    at new Configstore (/opt/soft/ngclient/node_modules/configstore/index.js:25:46)
    at Object.<anonymous> (/opt/soft/ngclient/node_modules/typings-core/dist/utils/store.js:5:19)

  at Module._compile (module.js:573:30)

    at Object.Module._extensions..js (module.js:584:10)

    at Module.load (module.js:507:32)

    at tryModuleLoad (module.js:470:12)

   at Function.Module._load (module.js:462:3)

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.2 (node_modules/fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

https://github.com/yeoman/yeoman.github.io/issues/282

解决的方法：

执行：

chmod g+rwx /root /root/.config /root/.config/configstore

ng-client在centos npm install无法安装

message EACCES: permission denied, open '/opt/yjmicro-saas-ngclient/node_modules/angular2-image-popup/typings/index.d.ts'
typings ERR!
typings ERR! cwd /opt/yjmicro-saas-ngclient/node_modules/angular2-image-popup
typings ERR! system Linux 3.10.0-123.el7.x86_64
typings ERR! command "/usr/local/src/node/bin/node" "/opt/yjmicro-saas-ngclient/node_modules/.bin/typings" "install"
typings ERR! node -v v8.9.1
typings ERR! typings -v 2.1.1
typings ERR! code EACCES
typings ERR!
typings ERR! If you need help, you may report this error at:
typings ERR!   <https://github.com/typings/typings/issues>
npm WARN bootstrap@4.0.0-beta requires a peer of popper.js@^1.11.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.2 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: angular2-image-popup@1.1.2 (node_modules/angular2-image-popup):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: angular2-image-popup@1.1.2 postinstall: `typings install`
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1

解决：

npm config set unsafe-perm=true

参考 ：https://github.com/Microsoft/WSL/issues/14