Angular 5项目如何获取package.json版本？编译报错求助

我之前在Angular 5（CLI 1.x）项目里踩过完全一样的坑，给你一步步拆解解决方法，先从最可能的错误说起：

首先检查路径是否正确！ #

你的environment.ts在src/app/目录下，要访问项目根目录的package.json，相对路径应该是../../package.json，而不是../package.json——../只能回到src/目录，那里并没有package.json，这大概率是你遇到Module not found的直接原因！

先把代码改成这样试试：

export const environment = {
  VERSION: require('../../package.json').version
};

如果改完路径还是报错，再执行下面的配置步骤：

步骤1：安装Node.js类型定义 #

因为你用了Node.js的require方法，TypeScript需要对应的类型声明才能识别它，安装@types/node：

npm install @types/node --save-dev

步骤2：配置TypeScript允许Node.js模块 #

找到src/tsconfig.app.json文件，修改compilerOptions里的types字段，添加node：

{
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": ["node"] // 加上这行
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

这一步是告诉TypeScript编译时包含Node.js的类型定义，避免对require语法报错。

步骤3：让Angular CLI处理package.json #

Angular CLI 1.x的Webpack默认不会把根目录的package.json纳入编译范围，所以我们需要在angular-cli.json里把它加入assets配置，确保编译时能访问到：
找到defaults -> build -> assets数组，添加package.json：

{
  "defaults": {
    "build": {
      "assets": [
        "assets",
        "favicon.ico",
        "package.json" // 加上这行
      ]
    }
  }
}

做完这些步骤后，重新启动你的项目（ng serve）或者重新编译（ng build），应该就能正常读取package.json里的版本号了。

内容的提问来源于stack exchange，提问作者Jeterson Miranda Gomes