ng2
angularjs2的环境问题解决了好久。
百度到的答案也是各种各样还解决不了我的问题。
好在这几天经过不断的测试终于给解决了。
- ERROR in AppModule is not an NgModule
- ERROR in ./src/main.ts
- Module build failed: TypeError: Cannot read property 'newLine' of undefined
- at Object.getNewLineCharacter (d:\web\myNg\ng2\node_modules\typescript\lib\typescript.js:8062:20)
- at Object.createCompilerHost (d:\web\myNg\ng2\node_modules\typescript\lib\typescript.js:44978:26)
- at Object.ngcLoader (d:\web\myNg\ng2\node_modules\@ngtools\webpack\src\loader.js:338:33)
- @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
- ERROR in ./src/polyfills.ts
- Module build failed: TypeError: Cannot read property 'newLine' of undefined
- at Object.getNewLineCharacter (d:\web\myNg\ng2\node_modules\typescript\lib\typescript.js:8062:20)
- at Object.createCompilerHost (d:\web\myNg\ng2\node_modules\typescript\lib\typescript.js:44978:26)
- at Object.ngcLoader (d:\web\myNg\ng2\node_modules\@ngtools\webpack\src\loader.js:338:33)
- @ multi ./src/polyfills.ts
- webpack: Failed to compile.
出现这个错误的原因是本地typescript版本冲突了。但是我不知道npm为什么会这样。网上说它的机制按理说不是会导致版本冲突的问题。没有研究过。
首先:
$ npm ls typescript
输入这个命令查看项目的typescript版本和依赖。
发现出现2个不同的版本在各个地方了。
由于angular\cli依赖的是2.1.6,这个是自动生成的,总不能去node_module里面去找package.json改吧。没法改。放弃。
ng2@0.0.0 d:\web\myNg\ng2
+-- @angular/cli@1.0.0-rc.1 -> d:\web\myNg\ng2\node_modules\.1.0.0-rc.1@@angular\cli
| +-- @angular/compiler-cli@2.4.9
| | +-- @angular/tsc-wrapped@0.5.2
| | | `-- typescript@2.1.6 deduped extraneous
| | `-- typescript@2.1.6 extraneous
| +-- @angular/tsc-wrapped@0.5.2
| | +-- tsickle@0.2.6
| | | `-- typescript@2.1.6 extraneous
| | `-- typescript@2.1.6 extraneous
| +-- @ngtools/webpack@1.2.12
| | `-- typescript@2.1.6 extraneous
| `-- typescript@2.1.6
`-- typescript@2.0.10
那么另一个2.0.10是在项目的package.json中配置的。这个虽然是angular/cli生成的,但是是在我们自己的项目里面,所以很好改,我们把这里的typescript改成angular/cli自己依赖的那个版本。
把这个改成
~表示npm会自动下载离他最近的一个小版本。比如我的电脑上面就是2.1.6。这样的话,就是angular/cli自己依赖的完全一致了。
再次
$ npm ls typescript
发现,版本一致了。
ng2@0.0.0 d:\web\myNg\ng2
+-- @angular/cli@1.0.0-rc.1 -> d:\web\myNg\ng2\node_modules\.1.0.0-rc.1@@angular\cli
| `-- typescript@2.1.6
`-- typescript@2.1.6 -> d:\web\myNg\ng2\node_modules\.2.1.6@typescript
$ ng serve
** NG Live Development Server is running on http://localhost:4200 **
Hash: b21dc5aadbb6f2b69213
Time: 10251ms
chunk {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered]
chunk {1} main.bundle.js, main.bundle.js.map (main) 3.14 kB {3} [initial] [rendered]
chunk {2} styles.bundle.js, styles.bundle.js.map (styles) 9.84 kB {4} [initial] [rendered]
chunk {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.6 MB [initial] [rendered]
chunk {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.
搞定。在这里做个笔记,希望能帮到之后遇到的人。毕竟这玩意刚接触太浪费时间了。
对了,安装环境的时候记得用cnpm install。原生的npm install安装会报错,原因是node-sass被墙了
ng2的更多相关文章
- ng1和ng2的部分对比----angular2系列(四)
前言: angular2相比angular1做了革命性的改变.对于开发者来说,我们知道它框架的实现上改变极大.我们看到代码也能发现它写法上变化很大,似乎完全是另一个东西. 但是当我们真正去写下去的时候 ...
- ng2收获
1.devDependencies下只有在开发应用时才用得到这个我是知道的. 但是我不知道的事要想达到这个效果是要在生产环境安装包的时候必须要加个这个才行"--production" ...
- 学习ng2,从zonejs开始(非官方翻译) ----angular2系列(一)
Zone是什么: 官方解释:zone.js为JavaScript提供了执行上下文,可以在异步任务之间进行持久性传递. 最开始我一直没理解到这句话,学习过程中我也因为自己的一些失误而一直纠结徘徊,情况是 ...
- angular2 组件之间通讯-使用服务通讯模式 2016.10.27 基于正式版ng2
工作中用到ng2的组件通讯 奈何官方文档言简意赅 没说明白 自己搞明白后 整理后分享下 rxjs 不懂的看这篇文章 讲很详细 http://www.open-open.com/lib/view/ope ...
- NG2入门 - 根模块
根模块 app.module 建议大家先去学习angularjs官网的英雄教程后再进行后面的阅读,app.module.ts 就是ng2应用中的引导启动模块也称根模块 import { NgModul ...
- NG2入门 - 架构
AngularJS2 学习 继TypeScript之后,终于到了ng2的学习路程,同样学习根据angular官网文档进行,对文档中的内容根据自己的理解略有改动.看官可看官网文档,也可以看本系列博文 首 ...
- ng2响应式表单-翻译与概括官网REACTIVE FORMS页面
本文将半翻译半总结的讲讲ng2官网的另一个未翻译高级教程页面. 原文地址. 文章目的是使用ng2提供的响应式表单技术快速搭出功能完善丰富的界面表单组件. 响应式表单是一项响应式风格的ng2技术,本文将 ...
- ng2 配置端口号
ng2 默认端口号4200 若要配置,用两种方法 (1)可以使用以下命令 ng server --port 4201 (2)找到node_modules/angular-cli/lib/confi ...
- ng2 学习笔记(三)依赖注入与服务
前两篇文章简单介绍了ng2的一些基础用法,基本和ng1的使用风格差不多,只是写法和开发方式变化比较大. 这一篇,来总结一下ng的依赖注入与服务.官方的教程上是把他分开来讲的,个人感觉放在一起比较容易理 ...
随机推荐
- Emgucv - ImageBox控件
C#的Winform中用来显示图片的控件是PictureBox,而Emgucv中显示图片用的是ImageBox. 1.ImageBox属性 在WinForm中,单击ImageBox控件,右击查看属性页 ...
- centos如何设置固定IP
### centos6.5版本 编辑ifcfg-eth0 vi /etc/sysconfig/network-scripts/ifcfg-eth0 参照下面代码修改自己的配置 ############ ...
- PYQT窗口可视化编程
1.用PYQT的Qt设计师设计完程序UI后,将其转换为UI.py脚本. 转换步骤见帖:http://www.cnblogs.com/doudongchun/p/3694765.html 2.在同目录下 ...
- 从构建分布式秒杀系统聊聊Lock锁使用中的坑
前言 在单体架构的秒杀活动中,为了减轻DB层的压力,这里我们采用了Lock锁来实现秒杀用户排队抢购.然而很不幸的是尽管使用了锁,但是测试过程中仍然会超卖,执行了N多次发现依然有问题.输出一下代码吧,可 ...
- 百度API获取经纬度使用
首先通过百度地图,注册账号,然后申请密钥 http://lbsyun.baidu.com/apiconsole/key 搜索某个关键字 http://api.map.baidu.com/place/v ...
- [Codeforces Round #438][Codeforces 868C. Qualification Rounds]
题目链接:868C - Qualification Rounds 题目大意:有\(n\)个题目,\(k\)个人,每个人可能做过这\(n\)个题里的若干道,出题方要在这\(n\)个题目里选若干个出来作为 ...
- input 在 2 和 3 上的区别
2 和 3 上面 在 input 的区别 1 2 3 name = raw_input('请输入用户名:')#python2.7的用法 name = input('请输入用户名:')#python3 ...
- express 随笔
#express 1.使用Express 应用生成器 npm install express-generator -g 2.创建一个命名为 myapp 的应用 express myapp 3.安装所有 ...
- SQL开发——SQL语法
文档资料参考: 参考:http://www.w3school.com.cn/sql/sql_syntax.asp 参考:http://wiki.jikexueyuan.com/project/sql/ ...
- Machine Learning, Homework 9, Neural Nets
Machine Learning, Homework 9, Neural NetsApril 15, 2019ContentsBoston Housing with a Single Layer an ...