问题现象:
创建一个 angular4 以后的项目, 通过 cnpm ([email protected])安装依赖,
cnpm install
根据 package.json 在当前目录生成 node_modules 后, ng serve 和 ng build 没有问题, 但是
ng build --prod
则会报缺少某个依赖的 package.json 而 build 失败, 如下:
Unhandled rejection Error: ENOENT: no such file or directory, open 'C:\Users\zheng\Desktop\angular4-tutorial-TodoApp\node_modules\_@[email protected]@@angular-mdl\package.json'
问题排查:
进入相应的 module 后的目录后, 确实缺少 package.json 文件, 这个是 cnpm 的问题, 用 "npm install" 就不会有类似的情况, 看看这些包都发生了什么:
cnpm outdated
结果是以下这样, 这个和包没有完整更新有关:
Package Current Wanted Latest Location
ts-node 1.2.1 1.2.1 4.1.0 ng2-tut
webdriver-manager 10.2.5 10.2.5 12.0.6 ng2-tut
@angular/cli 1.6.4 linked linked ng2-tut
@angular/common 4.4.6 linked linked ng2-tut
@angular/compiler 4.4.6 linked linked ng2-tut
@angular/compiler-cli 4.4.6 linked linked ng2-tut
@angular/core 4.4.6 linked linked ng2-tut
@angular/forms 4.4.6 linked linked ng2-tut
@angular/http 4.4.6 linked linked ng2-tut
@angular/platform-browser 4.4.6 linked linked ng2-tut
@angular/platform-browser-dynamic 4.4.6 linked linked ng2-tut
@angular/router 4.4.6 linked linked ng2-tut
@types/jasmine 2.8.3 linked linked ng2-tut
@types/node 6.0.96 linked linked ng2-tut
angular2-uuid 1.1.1 linked linked ng2-tut
codelyzer 1.0.0-beta.4 linked linked ng2-tut
jasmine-spec-reporter 4.2.1 linked linked ng2-tut
karma 2.0.0 linked linked ng2-tut
karma-cli 1.0.1 linked linked ng2-tut
karma-remap-istanbul 0.2.2 linked linked ng2-tut
protractor 4.0.9 linked linked ng2-tut
ts-helpers 1.1.2 linked linked ng2-tut
tslint 3.13.0 linked linked ng2-tut
typescript 2.3.4 linked linked ng2-tut
zone.js 0.8.20 linked linked ng2-tut
一般 linked 是没问题的, 但是, 如果 linked 错了位置( cnpm 这个包, 就经常出现这个问题, 导致找不到 package.json, 只是因为 link 错了文件夹, 其实这些文件都有的).
那么问题和 cnpm 关系就很大了, 而和这些 npm 的 js 包没多大关系.
问题解决方案:
- npm install
彻底不用 cnpm, 慢就慢点, 但是质量好.
- 通过 alias 添加 cnpm
不要通过 "npm install -g cnpm" 安装, 有 bug 官方修复的也很慢.
- cnpm update
不再用 cnpm install, 而改用这种方式, 获取的包, 就都是最新的, 之后再 ng build --prod 就不会有问题了.
这之后再运行 cnpm outdated, 就会显示如下:
Package Current Wanted Latest Location
@angular/common 4.4.6 4.4.6 5.2.0 ng2-tut
@angular/compiler 4.4.6 4.4.6 5.2.0 ng2-tut
@angular/compiler-cli 4.4.6 4.4.6 5.2.0 ng2-tut
@angular/core 4.4.6 4.4.6 5.2.0 ng2-tut
@angular/forms 4.4.6 4.4.6 5.2.0 ng2-tut
@angular/http 4.4.6 4.4.6 5.2.0 ng2-tut
@angular/platform-browser 4.4.6 4.4.6 5.2.0 ng2-tut
@angular/platform-browser-dynamic 4.4.6 4.4.6 5.2.0 ng2-tut
@angular/router 4.4.6 4.4.6 5.2.0 ng2-tut
@types/node 6.0.96 6.0.96 9.3.0 ng2-tut
codelyzer 1.0.0-beta.4 1.0.0-beta.4 4.0.2 ng2-tut
karma-remap-istanbul 0.2.2 0.2.2 0.6.0 ng2-tut
protractor 4.0.9 4.0.9 5.2.2 ng2-tut
ts-node 1.2.1 1.2.1 4.1.0 ng2-tut
tslint 3.13.0 3.13.0 5.9.1 ng2-tut
typescript 2.3.4 2.3.4 2.6.2 ng2-tut
webdriver-manager 10.2.5 10.2.5 12.0.6 ng2-tut
至此, 再对 prod 模式下 打包就没有问题了.
ng biuld --prod
显示如下:
Date: 2018-01-13T07:04:32.678Z
Hash: 977d5541cb6f8769c908
Time: 25466ms
chunk {0} polyfills.af87acd62e072161da52.bundle.js (polyfills) 59.4 kB [initial] [rendered]
chunk {1} main.368272e94098a0d3d910.bundle.js (main) 95.6 kB [initial] [rendered]
chunk {2} styles.742033d4e2d0d281a47b.bundle.css (styles) 104 kB [initial] [rendered]
chunk {3} vendor.94a1dbbb81a71d96fd54.bundle.js (vendor) 612 kB [initial] [rendered]
chunk {4} inline.1b64468c90eb924ad355.bundle.js (inline) 1.45 kB [entry] [rendered]