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. c#清空数组&初始化数组&动态数组

    清空数组>>>Array.Clear [去MSDN查看] ]; ; i < str.Length; i++) str[i] = i.ToString(); Array.Clea ...

  2. Jmeter学习系列----2 录制脚本

    虽然专业的自动化测试人员都不会选择录制脚本的方式来进行自动化脚本的编写,但是,我们作为初学者还是可以学习一下怎么利用工具来进行脚本的录制,体验一下自动化工具的效率,下面,具体讲下如何使用jmeter自 ...

  3. Spring Boot + JPA(hibernate 5) 开发时,数据库表名大小写问题

      (转载)Spring Boot + JPA(hibernate 5) 开发时,数据库表名大小写问题   这几天在用spring boot开发项目, 在开发的过程中遇到一个问题hibernate在执 ...

  4. Jmeter遇到打不开的问题

    1.JDK的版本,一定版本的jmeter需要特定版本以上的JDK支持,比如此次运行的apache-jmeter-2.12,就需要JDK1.6以上的版本支持.我原来装的是JDK1.5,配置好JMETER ...

  5. python全栈开发 * 线程队列 线程池 协程 * 180731

    一.线程队列 队列:1.Queue 先进先出 自带锁 数据安全 from queue import Queue from multiprocessing import Queue (IPC队列)2.L ...

  6. Python Learning - One

    ## Create a directory each day, and can create files in the directory. 1. variable 2. comments 1) # ...

  7. 使用OMS查询Api Management的调用日志

    打开Azure portal,找到要操作的Api Management 实例,点击菜单Monitoring/Logs Schema Tab页搜索"diagnostics",选中Lo ...

  8. Multi-Projector Based Display Code ---- Download

    The code providing are for your reference. Please download the code according to your hareware confi ...

  9. docker上配置mysql主从复制

    1.在docker上启动2台mysql容器:(这里3306为主,3307为从) docker run -d  -e MYSQL_ROOT_PASSWORD=123456  -p 3306:3306 - ...

  10. [Day22]IO(File、递归)

    1.File 1.1 IO概述 (1)当需要把内存中的数据存储到持久化设备上的这个动作称为输出(写)Output操作 (2)当把持久设备上的数据读取到内存中的这个动作称为输入(读)Input操作 1. ...