首先说环境,我是 npm 5.6.0,Angular6,windows7 64位
$ npm -version
5.6.0
问题背景:学习Angular有一段时间了,现在想系统的根据官网学习一遍,但在最后一个课程出了问题
官方课程:https://www.angular.cn/tutorial/toh-pt6
问题描述:
在 app.module.ts 添加module失败:
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
运行直接报错
$ ng serve --open --port 4205
** Angular Live Development Server is listening on localhost:4205, open your browser on http://localhost:4205/ **
Date: 2019-05-21T06:38:50.789Z
Hash: 59cc300197aa21e668a0
Time: 5891ms
chunk {main} main.js, main.js.map (main) 2.03 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 93.6 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 19.4 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 327 kB [initial] [rendered]
ERROR in src/app/app.module.ts(4,48): error TS2307: Cannot find module 'angular-in-memory-web-api'.
i 「wdm」: Failed to compile.
解决过程
1、项目中安装失败:
$ npm install angular-in-memory-web-api --save --proxy=http://proxysh.zte.com.cn --registry https://registry.npm.taobao.org
npm ERR! Error while executing:
npm ERR! C:\Program Files\Git\mingw64\bin\git.EXE ls-remote -h -t ssh://git@github.com/brandonroberts/in-memory-web-api-bazel.git
2、全局安装正常:
$ npm install -g angular-in-memory-web-api --registry https://registry.npm.taobao.org
+ angular-in-memory-web-api@0.8.0
added 1 package in 7.148s
但即使这样,在项目中引用仍然失败
3、查看项目中的配置 package.json,果然,该设置明显不一样:
"keywords": [],
"author": "",
"license": "MIT",
"dependencies": {
"@angular/animations": "^7.1.0",
"@angular/common": "^7.1.0",
"@angular/compiler": "^7.1.0",
"@angular/core": "^7.1.0",
"@angular/forms": "^7.1.0",
"@angular/http": "^7.1.0",
"@angular/platform-browser": "^7.1.0",
"@angular/platform-browser-dynamic": "^7.1.0",
"@angular/router": "^7.1.0",
"@angular/upgrade": "^7.1.0",
"angular-in-memory-web-api": "github:brandonroberts/in-memory-web-api-bazel#50a34d8", # 这里问题
"core-js": "^2.5.4",
"rxjs": "^6.3.0",
"zone.js": "~0.8.26"
},
于是修改为
"keywords": [],
"author": "",
"license": "MIT",
"dependencies": {
"@angular/animations": "^7.1.0",
"@angular/common": "^7.1.0",
"@angular/compiler": "^7.1.0",
"@angular/core": "^7.1.0",
"@angular/forms": "^7.1.0",
"@angular/http": "^7.1.0",
"@angular/platform-browser": "^7.1.0",
"@angular/platform-browser-dynamic": "^7.1.0",
"@angular/router": "^7.1.0",
"@angular/upgrade": "^7.1.0",
"angular-in-memory-web-api": "^0.6.1", # 修改后
"core-js": "^2.5.4",
"rxjs": "^6.3.0",
"zone.js": "~0.8.26"
},
注意json文件没有注释
4、重新执行安装成功:
$ npm install angular-in-memory-web-api --save --registry https://registry.npm.taobao.org
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN angular-in-memory-web-api@0.6.1 requires a peer of @angular/common@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN angular-in-memory-web-api@0.6.1 requires a peer of @angular/core@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN angular-in-memory-web-api@0.6.1 requires a peer of @angular/http@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN angular-in-memory-web-api@0.6.1 requires a peer of rxjs@^6.0.0 but none is installed. You must install peer dependencies yourself.
+ angular-in-memory-web-api@0.6.1
added 1 package in 2.038s
项目中也能正常使用~
希望对大家有帮助,感谢观看