Angular 5升级至6报错：资源路径需以项目根目录开头

我之前从Angular 5升级到6的时候也碰到过一模一样的问题，这是因为Angular 6的构建工具（@angular-devkit/build-angular）对资源文件的路径规则做了更严格的校验，不再允许直接把node_modules下的路径直接写到assets数组里了。你可以按照下面的步骤修改配置：

1. 修改angular.json中的assets配置 #

找到项目根目录下的angular.json文件（Angular 6开始替代了原来的.angular-cli.json），找到对应项目的assets数组配置：

原来的配置可能是这样的：

"assets": [
  "src/assets",
  "node_modules/font-awesome/fonts"
]

把它改成带glob模式的对象配置，明确输入、输出路径：

"assets": [
  "src/assets",
  {
    "glob": "**/*",
    "input": "./node_modules/font-awesome/fonts/",
    "output": "./fonts/"
  }
]

• glob: "**/*"：匹配input路径下所有文件和子目录
• input：指定资源文件的源路径（这里是font-awesome的字体文件目录）
• output：指定打包后资源输出到dist目录下的路径

2. 确保styles配置正确引入font-awesome样式 #

同样在angular.json的styles数组里，确认已经正确引入font-awesome的css文件：

"styles": [
  "src/styles.css",
  "./node_modules/font-awesome/css/font-awesome.min.css"
]

3. 重启服务 #

修改完配置后，先停止当前的ng serve进程，重新执行ng serve启动开发服务器，这个报错应该就消失了。

简单说下原因：Angular 6的构建工具要求所有资源路径必须基于项目源码根目录，或者通过这种glob对象的方式明确声明外部资源的来源和输出位置，避免路径解析混乱。

内容的提问来源于stack exchange，提问作者Kay