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. angular.formJson()

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. C/C++中的内存对齐问题和pragma pack命令详解

    这个内存对齐问题,居然影响到了sizeof(struct)的结果值.突然想到了之前写的一个API库里,有个API是向后台服务程序发送socket请求.其中的socket数据包是一个结构体.在发送soc ...

  3. Node.js_express_浏览器存储技术 Cookie(服务器将少量数据交于浏览器存储管理)

    浏览器存储技术 Cookie 服务器将少量数据交于浏览器存储管理 解决 http 无状态协议的问题(无法区分多次请求是否发送自同一客户端) 一个网页一般最多 20个的 cookie,每个 cookie ...

  4. [LeetCode] Split BST 分割二叉搜索树

    Given a Binary Search Tree (BST) with root node root, and a target value V, split the tree into two ...

  5. jquery常用语句

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 小甲鱼零基础python课后题 P24 023递归:这帮小兔崽子

    0.使用递归写一个十进制转换为二进制的函数(要求“取2取余”的方式,结果与调用bin()一样返回字符串式). 答: def Dec2Bin(dec): temp = [] result = '' wh ...

  7. Spring boot 国际化自动加载资源文件问题

    Spring boot 国际化自动加载资源文件问题 最近在做基于Spring boot配置的项目.中间遇到一个国际化资源加载的问题,正常来说只要在application.properties文件中定义 ...

  8. 从零开始搭建vue开发环境及构建vue项目

    1.安装node.js 安装完成之后,打开dos(windows+R或者直接windows键打开,输入cmd,按回车键)窗口,输入命令node -v可以查看安装的 node.js版本 node.js自 ...

  9. php 数据库乱码。。。php 移动临时文件

    数据库乱码,三个位置 处理好不会乱码 第一前台,传到后台: 第二后台,传到数据库: 第三数据库,存入数据库: 详解  https://www.cnblogs.com/zhoujinyi/p/46188 ...

  10. 允许浏览器下载exe.config文件

    进入系统目录 %windir%\System32\inetsrv\config\ 编辑IIS配置文件 applicationHost.config 找到如下行 <requestFiltering ...