angularjs2的环境问题解决了好久。

百度到的答案也是各种各样还解决不了我的问题。

好在这几天经过不断的测试终于给解决了。

  1. ERROR in AppModule is not an NgModule
  2. ERROR in ./src/main.ts
  3. Module build failed: TypeError: Cannot read property 'newLine' of undefined
  4. at Object.getNewLineCharacter (d:\web\myNg\ng2\node_modules\typescript\lib\typescript.js:8062:20)
  5. at Object.createCompilerHost (d:\web\myNg\ng2\node_modules\typescript\lib\typescript.js:44978:26)
  6. at Object.ngcLoader (d:\web\myNg\ng2\node_modules\@ngtools\webpack\src\loader.js:338:33)
  7. @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
  8. ERROR in ./src/polyfills.ts
  9. Module build failed: TypeError: Cannot read property 'newLine' of undefined
  10. at Object.getNewLineCharacter (d:\web\myNg\ng2\node_modules\typescript\lib\typescript.js:8062:20)
  11. at Object.createCompilerHost (d:\web\myNg\ng2\node_modules\typescript\lib\typescript.js:44978:26)
  12. at Object.ngcLoader (d:\web\myNg\ng2\node_modules\@ngtools\webpack\src\loader.js:338:33)
  13. @ multi ./src/polyfills.ts
  14. 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自己依赖的那个版本。

"typescript": "~2.0.0"

把这个改成

"typescript": "~2.1.0"

~表示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的更多相关文章

  1. ng1和ng2的部分对比----angular2系列(四)

    前言: angular2相比angular1做了革命性的改变.对于开发者来说,我们知道它框架的实现上改变极大.我们看到代码也能发现它写法上变化很大,似乎完全是另一个东西. 但是当我们真正去写下去的时候 ...

  2. ng2收获

    1.devDependencies下只有在开发应用时才用得到这个我是知道的. 但是我不知道的事要想达到这个效果是要在生产环境安装包的时候必须要加个这个才行"--production" ...

  3. 学习ng2,从zonejs开始(非官方翻译) ----angular2系列(一)

    Zone是什么: 官方解释:zone.js为JavaScript提供了执行上下文,可以在异步任务之间进行持久性传递. 最开始我一直没理解到这句话,学习过程中我也因为自己的一些失误而一直纠结徘徊,情况是 ...

  4. angular2 组件之间通讯-使用服务通讯模式 2016.10.27 基于正式版ng2

    工作中用到ng2的组件通讯 奈何官方文档言简意赅 没说明白 自己搞明白后 整理后分享下 rxjs 不懂的看这篇文章 讲很详细 http://www.open-open.com/lib/view/ope ...

  5. NG2入门 - 根模块

    根模块 app.module 建议大家先去学习angularjs官网的英雄教程后再进行后面的阅读,app.module.ts 就是ng2应用中的引导启动模块也称根模块 import { NgModul ...

  6. NG2入门 - 架构

    AngularJS2 学习 继TypeScript之后,终于到了ng2的学习路程,同样学习根据angular官网文档进行,对文档中的内容根据自己的理解略有改动.看官可看官网文档,也可以看本系列博文 首 ...

  7. ng2响应式表单-翻译与概括官网REACTIVE FORMS页面

    本文将半翻译半总结的讲讲ng2官网的另一个未翻译高级教程页面. 原文地址. 文章目的是使用ng2提供的响应式表单技术快速搭出功能完善丰富的界面表单组件. 响应式表单是一项响应式风格的ng2技术,本文将 ...

  8. ng2 配置端口号

    ng2 默认端口号4200  若要配置,用两种方法 (1)可以使用以下命令  ng server --port 4201 (2)找到node_modules/angular-cli/lib/confi ...

  9. ng2 学习笔记(三)依赖注入与服务

    前两篇文章简单介绍了ng2的一些基础用法,基本和ng1的使用风格差不多,只是写法和开发方式变化比较大. 这一篇,来总结一下ng的依赖注入与服务.官方的教程上是把他分开来讲的,个人感觉放在一起比较容易理 ...

随机推荐

  1. HBuilder 的使用

    创建一个nui项目 打开index.html才能运行 查看夜神模拟器 创建App标题:mhe :在body中输入mhe让后回车,如果右侧不显示,Ctrl+s保存一下 创建标题:mhe 创建九宫格:mb ...

  2. buffer格式的转换

    ---恢复内容开始--- 定义好一个buffer 例如: var buf = new Buffer(''nihaoya); 通过str转成base64的字符 var str =buf.toString ...

  3. __http原理__03__content-type 对照表

    HTTP content-type Content-Type,内容类型,一般是指网页中存在的Content-Type,用于定义网络文件的类型和网页的编码,决定浏览器将以什么形式.什么编码读取这个文件, ...

  4. java基础 第七章课后习题

    1.改正后的应该为: String [] scores= new String[5];    或者 String [] scores={ “ Mike”,"Lily" ," ...

  5. Selenium 3----WebDriver常用方法

    在学会定位元素的基础上,进行元素的操作. WebDriver常用方法: clear(): 清除文本. send_keys (value): 模拟按键输入. click(): 单击元素. submit( ...

  6. [dev]typeof, offsetof 和container_of

    转一篇文章.写的比较好,浅显易懂,还画了图. https://www.cnblogs.com/idorax/p/6796897.html 概况一下: container_of用到了typeof和off ...

  7. js手机浏览器浏览WebApp弹出的键盘遮盖住文本框的解决办法

    if(window.navigator.userAgent.indexOf('Android') > -1 || window.navigator.userAgent.indexOf('Adr' ...

  8. 缓存机制 ehcache、redis

    本文主要记录ehcache和redis实现缓存(redis版本号:5.0.3) 一.ehcache 1.ehcache:用来管理Java中缓存的轻量级工具,其核心通过CacheManager使用,一般 ...

  9. HBuilder打包vue项目app后空白,并请求不到数据

    (解决空白问题)在打包之前一定要修改 config 目录下的 index.js 文件中的 bulid 模块打包配置项,否则会出现空白,如图   修改前 assetsPublicPath= '/',. ...

  10. Django和Flask框架学习目录

    Django目录 Django基本配置与URLconf DjangoMTV模型之视图层views及模板层template DjangoMTV模型之model层——ORM操作数据库(基本增删改查) Dj ...