拒绝访问 |
| 百度云加速
请打开cookies.
此网站 () 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(38fd401c6271661c-ua98).
重新安装浏览器，或使用别的浏览器angular开发环境搭件（WebStorm，Angular-cli） |
自己尝试用WebStorm搭建Angular的工程，虽然在网上看了一些仁兄的帖子，很有帮助，但是感觉关键的、核心的问题没有说清楚（也可能是由于用Node不是很久，知识浅薄），所以搭建过程特别是在Windows上也是磕磕绊绊，总是有些问题。相信其他人也会遇到同样的问题，所以将问题梳理总结如下。
angular/cli
windows win32 x64
WebStorm安装下载安装WebStorm2017版（）WebStorm安装很简单，破解如图，建议还是支持正版。
NodeJs安装下载安装NodeJs()这一步很简单，下载Windows版的Nodejs，进行按照提示安装即可，记得选择将nodejs增加到PATH一项，如果界面上没有，应该就是默认帮你搞定了，可以忽略我这句废话。通过命令，验证是否安装成功：12node -v
//如果正常显示版本号，即安装成功。npm -v
Nodejs配置Nodejs安装完成之后，默认会将node.exe的路径，添加到系统的环境变量中，如果没有请手动添加。除此之外还要进行其他的配置。1.配置prefix和cache目录123456示例目录地址为：C:\Program Files\nodejscd C:\Program Files\nodejsmkdir node_global\node_modules //创建目录mkdir node_cachenpm config set prefix "C:\Program Files\nodejs\node_global"npm config set cache "C:\Program Files\nodejs\node_cache"
2.配置环境变量右击“计算机”—&”属性”—&”高级系统设置”—&”环境变量”12345在[系统变量]中,设置 NODE_PATH ，新建 NODE_PATH ,值为C:\Program Files\nodejs\node_global\node_modules在”用户变量”中,修改用户变量中的path，添加C:\Program Files\nodejs\node_global\
3.配置sass_binary手工下载node-sass () angular cli 是要依赖node-sass的，默认情况下，不会像其它包一样直接下载，而是要下载后进行编译的。在Windows下，首先要通过git下载win32-x64-51_binding.node，但是不知道是被墙还是什么原因，下不下来，就会导致后面的编译出错，以及提示找不到python和Visual Studio的问题。
12345678910111213将下载的binding.node放到指定目录，例如：C:\win32-x64-51_binding.node执行配置命令：npm config set sass_binary_path "C:\win32-x64-51_binding.node"npm config set sass_binary_site “https://npm.taobao.org/mirrors/node-sass/” //使用阿里的镜像当然以上prefix， cache，sass_binary_site， sass_binary_path等，也可以通过修改下面文件进行配置：C:\&username&\.npmrcprefix=C:\Program Files\nodejs\node_globalcache=C:\Program Files\nodejs\node_cachesass_binary_site=https://npm.taobao.org/mirrors/node-sass/sass_binary_path=C:\win32-x64-51_binding.node
4.全局安装typescript | typings1npm install -g typescript typings
5.全局安装angularjs-cli新版已经不用angular-cli进行安装，而是使用@angular/cli，1npm install -g @angular/cli
创建工程1.打开WebStorm新建一个Angualr CLI 工程
2.等待工程创建完成以上工作完成，就是等待新建一个angular 2工程。这个过程有点慢，主要是IDE会根据package.json下载依赖的包到工程里面。
3.运行程序选择package.json, 右键选择“Show npm Scripts”，或者用“Edit Configurations”，添加“npm”
4.点击“start” 启动 Web Server
5.在浏览器輸入
，若出現 app works! ，表示Angular已经正常启动。
（Win10主机 最好“以管理员身份运行”系统！避免权限不足等问题！）
扫一扫，关注作者
觉得文章写的不错，打赏一包辣条(??????‵)
支付宝打赏用户名：mybabe0312
文章数：45
访问量：17565
注册日期：
阅读量：1297
阅读量：3317
阅读量：447178
阅读量：1132422
51CTO推荐博文
安装Node.js1，下载安装包并安装&&&& 2，查看node和npm的版本信息node -vnpm -v3，查看和更新包安装路径--查看&npm config get prefixnpm config get cache--更新npm config set prefix"E:\nodejs-repository\npm_global"npm config set cache "E:\nodejs-repository\npm_cache"& &修改环境变量PATH和NODE_PATH（可选，以分号分割的绝对路径）& & --修改PATH,对应项改为：E:\nodejs-repository\npm_global&&&&--新建NODE_PATH，设置值：E:\nodejs-repository\npm_global\node_modules提示：NODE_PATH是历史遗留下来的一个路径解决方案，通常不应该使用，而应该使用node_modules目录机制。在其他位置找不到指定模块时，Node会去这些路径查找。附：require命令加载规则require命令用于加载文件，后缀名默认为.jsvar foo = require('foo');// &等同于var foo = require('foo.js');根据参数的不同格式，require命令去不同路径寻找模块文件。（1）如果参数字符串以“/”开头，则表示加载的是一个位于绝对路径的模块文件。比如，require('/home/marco/foo.js')将加载/home/marco/foo.js。（2）如果参数字符串以“./”开头，则表示加载的是一个位于相对路径（跟当前执行脚本的位置相比）的模块文件。比如，require('./circle')将加载当前脚本同一目录的circle.js。（3）如果参数字符串不以“./“或”/“开头，则表示加载的是一个默认提供的核心模块（位于Node的系统安装目录中），或者一个位于各级node_modules目录的已安装模块（全局安装或局部安装）。举例来说，脚本/home/user/projects/foo.js执行了require('bar.js')命令，Node会依次搜索以下文件。/usr/local/lib/node/bar.js/home/user/projects/node_modules/bar.js/home/user/node_modules/bar.js/home/node_modules/bar.js/node_modules/bar.js这样设计的目的是，使得不同的模块可以将所依赖的模块本地化。（4）如果参数字符串不以“./“或”/“开头，而且是一个路径，比如require('example-module/path/to/file')，则将先找到example-module的位置，然后再以它为参数，找到后续路径。（5）如果指定的模块文件没有发现，Node会尝试为文件名添加.js、.json、.node后，再去搜索。.js件会以文本格式的JavaScript脚本文件解析，.json文件会以JSON格式的文本文件解析，.node文件会以编译后的二进制文件解析。（6）如果想得到require命令加载的确切文件名，使用require.resolve()方法目录的加载规则通常，我们会把相关的文件会放在一个目录里面，便于组织。这时，最好为该目录设置一个入口文件，让require方法可以通过这个入口文件，加载整个目录。在目录中放置一个package.json文件，并且将入口文件写入main字段。下面是一个例子。// package.json{&"name" : "some-library",& "main" : "./lib/some-library.js"&}require发现参数字符串指向一个目录以后，会自动查看该目录的package.json文件，然后加载main字段指定的入口文件。如果package.json文件没有main字段，或者根本就没有package.json文件，则会加载该目录下的index.js文件或index.node文件。参考链接：4，设置淘宝镜像npm config set registry https://registry.npm.taobao.org5，更新npmnpm install npm@latest -g还可以通过以下地址获取npm的模块 提示：npm install 指令会在当前路径下创建node_modules目录，并将下载的包存入到该目录下。& & & & & 如果当前路径下没有package.json文件，则会下载最新版本的模块。附：创建package.json文件来管理本地模块package.json文件中最少要具备以下两个信息：1，name& 全小写、不能有空格，下划线和破折号是允许的。2,version& 格式：x.x.x例如：&&&&{&&&&& "name": "my-awesome-package",&&&&& "version": "1.0.0"&&&&}3，使用npm init来创建package.json文件该指令会提醒你输入信息，但还可以使用以下命令在不提示的情况下直接创建package.jsonnpm init --yes&npm init -y4，使用指令往package.json文件中添加依赖&&&&{&&&&& "name": "my_package",&&&&& "version": "1.0.0",&&&&& "dependencies": {&&&&& & &&&&"my_dep": "^1.0.0"&&&&& },&&&&& "devDependencies" : {&&&&& &&&&& "my_test_framework": "^3.1.0"&&&&& }&&&&}npm install &package_name& --savenpm install &package_name& --save-devnpm uninstall --save&&package_name&npm uninstall --save-dev &package_name&5，更新本地包&&&&在package.json所在路径下执行npm update安装“本机编译插件模块”有三个最主要的原因使得你应该安装该模块1，你有一个现成的c++类库想在nodejs应用中使用2，你有兴趣通过c++来编写一些性能优异的代码3，运行的时候遇到可怕的“node-gyp”问题并且也不知道发生了什么事的时候安装node-gyp的依赖环境1，安装VC++编译环境&&&&安装方式一：使用管理员权限打开cmd，执行以下命令【Windows 下编译 Node 的 C++ 模块】npm install --global --production windows-build-tools& & 安装方式二：&&&&&&&&1，下载Visual C++ Build Tools（），并使用默认选项安装 或者&下载安装Visual Studio 2015(或者免费的vc++ express)，在安装的过程中选择“Common Tools for Visual C++”安装即可。& & & & & &注意：win7及以上操作系统需要.NET Framework 4.5.1的支持。&&&&&&&&2，安装Python2.7（v3.x.x不支持），并添加到PATH路径下，同时运行以下命令来设置默认的pythonnpm config set python python2.7& & 或npm config set python /path/to/executable/python2.7使用npm来安装python的过程中，可以使用“--pythond=2.7”来指定版本。&&&&&&&&3，启动cmd，执行以下命令npm config set msvs_version 2015验证：任意安装以下一个包以测试环境是否正确bsonbufferutilkerberosnode-sasssqlite3phantomjsutf-8-validate安装后可以执行该命令试试：npm install gulp-image安装node-gyp执行以下命令完成安装npm install -g node-gyp&如果系统上安装有多个版本的Python，可以按照以下的方式配置：& &--确定要使用的Python版本，执行以下指令设置“--python”变量：node-gyp --python /path/to/python2.7& &--如果node-gyp通过npm的方式调用，那么你可以修改npm的python配置项npm config set python /path/to/executable/python2.7手动使用方式(编译本地插件)：--进入插件跟路径$cd&my_node_addon--生成本系统平台的编译配置文件$node-gyp&configure--执行编译$node-gyp&build安装Angular-cli1，执行以下指令安装Angular-clinpm install -g @angular/cli2，创建Angular应用ng new my-app3，进入my-app下，启动应用ng serve4，访问& &&安装ngx-bootstrap（Bootstrap3和Bootstrap4的本地Angular指令）1，进入项目路径下，执行以下指令安装ngx-bootstrap和bootstrap4npm&install&ngx-bootstrap bootstrap@next --save使用CSS1，打开项目根路径下的.angular-cli.json文件在apps配置项下的第一项下找到“styles”配置项，该项配置允许你将外部全局的css样式应用到项目中。指定bootstrap.min.css的路径，例如："styles": [ && & & & &&"../node_modules/bootstrap/dist/css/bootstrap.min.css",&&& & & & & "styles.css" && ],在“styles”配置项下面的“scripts”配置项中指定bootstrap的js文件"scripts":&[&&&&&&&&"../node_modules/jquery/dist/jquery.min.js",&&&&&&&&"../node_modules/bootstrap/dist/js/bootstrap.min.js"&&]注意：修改该文件后你必须重启服务才能生效。使用SASS方式一：创建项目的时候指定告知使用sassng new my-app --style=scss方式二：修改已经创建好的项目1，修改src/styles.css为src/styles.scss2，修改.angular-cli.json中"styles"配置项和"defaults"配置项：&"styles": [ && & & & "styles.scss" &-- rename this from .css to .scss && & & ],& . && . && . && &"defaults": { && & "styleExt": "scss", &-- set this to default to .scss && & "component": {} && }&3，在src下创建一个“_variables.scss”空文件4，在styles.scss中添加以下内容@import 'variables';&@import '../node_modules/bootstrap/scss/bootstrap';让ngx-bootstrap知道使用bootstrap4在src/index.html添加以下标记&body&& &!-- Enable bootstrap 4 theme --&& &script&window.__theme = 'bs4';&/script&& &app-root& &&/app-root&&/body&&安装node-sass(如果要使用SASS)在线安装方式注意：npm 安装 node-sass 依赖时，会从
上下载 & .node
文件。由于国内网络环境的问题，这个下载时间可能会很长，甚至导致超时失败。1，设置变量（sass_binary_site）使用淘宝镜像npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/或者添加环境变量set SASS_BINARY_SITE=或者设置全局镜像源npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/2，进入项目路径，执行以下指令安装：npm install node-sass或npm install node-sass --msvs_version=2013下载模块文件本地安装方式1，下载文件&&&& 2，安装时候指定变量npm i node-sass --sass_binary_path=/Users/dsf/Downloads/darwin-x64-48_binding.node提示：可以先卸载了再装：npm uninstall node-sass&测试环境1，打开src/app/app.module.ts然后添加以下内容import { BsDropdownModule} from 'ngx-bootstrap/dropdown';...@NgModule({& &...& &imports: [BsDropdownModule.forRoot(), ... ],& & ...&})2，打开src/ponent.html然后添加以下内容&div&class="btn-group"&dropdown&
&&&button&id="single-button"&type="button"&class="btn&btn-primary"&dropdownToggle&
&&&&Button&dropdown&&span&class="caret"&&/span&
&&&/button&
&&&ul&*dropdownMenu&role="menu"&aria-labelledby="single-button"&
&&&&&li&role="menuitem"&&a&class="dropdown-item"&href="#"&Action&/a&&/li&
&&&&&li&role="menuitem"&&a&class="dropdown-item"&href="#"&Another&action&/a&&/li&
&&&&&li&role="menuitem"&&a&class="dropdown-item"&href="#"&Something&else&here&/a&&/li&
&&&&&li&class="divider&dropdown-divider"&&/li&
&&&&&li&role="menuitem"&&a&class="dropdown-item"&href="#"&Separated&link&/a&&/li&
&/div&3，运行应用，查看效果&&&& 参考地址：附：一：开发工具推荐1，Visual Studio Code2，Node.js Tools for Visual Studio is&3，WebStorm4，sublime二：常见错误和解决方案错误有关错误信息解决方法PythonPython 2.7 is not installed or can't be foundInstall Python 2.7 and add to PATHSpecifiy --python=2.7 during npm installnpm config set python 2.7 to set defaultInability to find msbuild, Visual Studio, or VC compilerVC compiler not installed, or environment not properly configuredInstall VC++ compilerSpecify --msvs_version=2015 (or other VS version)npm config set msvs_version 2015 -gNaN/Node/v8/iojs-related syntax errorsPackage incompatible with current version of Node.jsUpgrade to latest version of package + node.js, and see if issue still existsSearch issues and/or file an issue on package repoOther syntax errorsIncompatible with compiler versionUpgrade to latest version of package + node.js, and see if issue still existsSearch issues and/or file an issue on package repo*Missing command or .h fileConfiguration is probably fine, but missing other prerequisitesUpgrade to latest version of packageCheck docs, try to install missing prerequisites, ensure they're accessible in PATHSearch for header file or other pre-requisite that's missing, that may provide a clue where it's supposed to come from (e.g. Windows SDK not installed, OpenSSL, etc.)Search issues and/or file an issue on package repositoryMSB4019 errorOlder versions of Visual Studio or C++ Build tools already installed & & & & & & & & & & & & & & &Add or modify the environment variable VCTargetsPath top point at the C++ build tools path. This should be something like C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\v140 (where 140 corresponds to Visual Studio 2015)Search issues and/or file an issue on package repo__pfnDliNotifyHook2 redefinition errorRun npm -g install npm@next本文出自 “” 博客，请务必保留此出处
了这篇文章
类别：┆阅读(0)┆评论(0)