angular2 本地起项目

以下三步即配置好代理，顺利起项目

• 脚手架angular-cli搭建好项目结构后在根目录添加文件‘proxy.conf.json’,并填充内容如图：

proxy.conf.json

注意：红色箭头‘target’所指为本地eclipse起后台代码的本地后台地址（链接到本地时需要加上端口号，此端口号和前端本地的端口号不同），或是日常或线上地址（即可以本地起项目调试或者链接到日常或线上环境调试本地代码）。

• .angular-cli.json文件修改部分如下：

"default": {
  "styleExt": "less",
  "component": {},
  "serve": {
    "host": "daily.etmp.xxx-inc.com",
    "port": 8010
  }
}

注意：在此文件的‘defaults’中加‘serve’如上，其中‘host’指本地前端host，‘port’指本地前端端口号。

• package.json文件中修改部分如下图：

package.json
注意：箭头所指处小心拼写错误，会导致302错误！
scripts中加--proxy-config参数时后接代理文件或文件夹，加--config参数时后接webpack配置文件；嵌套scripts命令时如"build: npm start -- --config webpack.config.js --proxy-config proxy.conf.json",需要单独在所有的参数前面加一个--。

常见错误

• 本地代理文件错误会导致302错误；
• 脏检查previous value 和current value错误往往出现在插入组件时：
  • 解决办法：把控制子组件显示隐藏的条件变量放在子组件中。
• 本地调试链接到日常环境时先把日常环境的host注释掉才能起项目，项目起成功后可打开host。

总结

• webpack的配置文件中把target设置成线上环境或本地后台环境，前端本地可以直接访问本地端口开发或利用charels访问线上环境开发。