关于使用angular-cli开发angular2项目时遇到的一些问题集锦

一、安装angular-cli时的问题

因为某些大家都知道的问题，会出现一些问题，无法正常安装成功！我在网上找了一些方法给大家放出了共享。

配置.npmrc文件

sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
electron_mirror=https://npm.taobao.org/mirrors/electron/
registry=https://registry.npm.taobao.org/
prefix=D:\Program Files\nodejs\node_global
cache=D:\Program Files\nodejs\node_cache

.npmrc 文件位置在系统用户根目录（windows），其他系统不清楚，如果没有这个文件可以使用命令行去设置，如：

npm config set registry=https://registry.npm.taobao.org/

二、路由守卫的问题

前端时间刚接触angular2的时候想做一个简单项目，想法是做任务事情之前都必须登录，可是折腾来折腾去就是不知如何下手，最后在每个组件里面都去判断下是否登录的情况，但还是不理想，然后去看官方的文档，发现个有趣的东西，那就是路由守卫，但去看了下 @大漠穷秋 的NiceFish项目之后，发现也没这个东西，直到最近才集合网络上的文章和实践，琢磨出来了。

1、第一步

首先添加一个文件app/service/auth-guard.service.ts，这个代码是用来做路由认证服务，我这里做的是根据登录后存储的UID判断是否登录。没登录则跳转到登录界面，登录了的则返回true。

import { Injectable }       from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {
	
	constructor(private router: Router) {}

	canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
		//取得用户访问的URL
		let url: string = state.url;

		return this.checkLogin(url);
	}

	checkLogin(url: string): boolean {
		//如果用户已经登录就放行
		if (localStorage.getItem('uid')) { return true; }

		//否则，存储要访问的URL到本地
		localStorage.setItem('redirectUrl', url);

		// 然后导航到登录页面
		this.router.navigate(['/login']);
		return false;
	}
}

2、第二步

就是在路由里面做修改，路由里面导入认证服务

import { AuthGuard } from './service/auth-guard.service';

路由对象修改

	{
		path: 'home',
		component:HomeComponent,
		canActivate: [AuthGuard],
	},

3、第三步

当然别忘了在根模块里面导入认证服务，修改app/app.module.ts文件

 import { AuthGuard } from './service/auth-guard.service';

providers: [ AuthGuard],

才疏学浅，有什么不对的地方欢迎指正，也是刚接触。

后续待更

内容会经常更新，目前正在学习中

转载于:https://my.oschina.net/molong/blog/906336