angular2, angular4 development environment construction

1. Install the node.js running environment and install the NPM package management tool (the NPM package management tool will be included when installing the node running environment)

1. Enter ( https://nodejs.org/en/download/ ) to download LTS6.10.0+ Window 64bit .msithe file (ps: The current Node version of the company’s development environment is, you can use the Nvm management tool to manage the Node version problem, and you can install multiple Node on the computer. Version)

2. Run the downloaded Window 64bit .msiinstallation file (click Next all the way to install by default)

3. Check the Node version and Npm version
(1), check the installed Node version: node -v
(2), check the Npm version:npm -v

2. Switch the default source of npm to Taobao image

1. View the current npm source npm config get registry, the default is https://registry.npmjs.org/(the source npm installis the warehouse from which the npm package is pulled by default when executing)

2. Modify the npm source (choose one of the following three methods)
(1), through the config command, execute window+Rthe key, enter cmd to open the Dos command box of the Window, enter npm config set registry https://registry.npm.taobao.org
(2), command line specification, execute window+Rthe key, enter cmd to open the Dos of the Window In the command box, enter npm --registry https://registry.npm.taobao.org info underscore
(3), edit ~/.npmrcthe file and add the following content, open the file explorer, C:/Users/电脑名find it under the path ~/.npmrc, open ~/.npmrcReplaceregistry = https://registry.npm.taobao.org

3. Install the angular-cli scaffolding tool

1. Execute npm install -g @angular/clithe global installation of the angular-cli scaffolding tool. If you ng -vsuccessfully query the version number of the angular-cli scaffolding, the installation is successful. For more ng scaffolding operations, please executeng help

4. Initialize the project using angular-cli scaffolding

1. Enter the folder where the project is to be stored, use to shift+鼠标右键pop up the prompt box, select 在此处打开命令窗口(or W键+Enter键) pop up the Window Dos command box

2. Enter in the Dos command box ng new 项目名称to download the basic template for using scaffolding development projects

3. cd into the downloaded project folder and execute npm installto install the dependency packages of the project

4. Wait for the project dependency package to be installed and execute ng serveto start the project.

5. After the project development is completed, you can use ng buildthe package project (the angular4+ version uses –aot compilation by default, and the angular2 version uses it ng build --aot --prod)

5. Install the node-sass package (this step is optional. You must install this npm package when you want to compile sass files locally or use .sass files to write style files in project components)

1. Since directly executing npm install -g node-sassthe command to install the node-sass package will definitely fail, you have the following solutions:
(1) Download over the wall and make sure your computer network is over the wall. npm install -g node-sass
(2) Use node- sass offline installation package offline installation of node-sass package

6. Installation failures you may encounter and their solutions

1. Node-sass installation failed (node-sass requires a pre-installed c++ environment, node-sass is blocked)
(1) Since the default dependency on node-sass has been canceled in the angular4.0 project dependencies, use the npm installinstallation project dependency No error will be reported when

(2) If you need to use .scss files in project components, you need to install the node-sass package

(3) Install the dependent environment of node-sass (mainly the dependent c++ environment) and enter it in the window Dos command boxnpm install --global --production windows-build-tools

(4) Download over the wall: After bypassing the network wall, open the Window Dos command box, enter npm install -g node-sass, and use node-sass -v to check the version of node-sass, which means the download is successful, otherwise it means failure.

(5) If you cannot circumvent the wall, use this method. Download the node-sass offline package (win32-x64-51_binding.node, x64-48 version or above), open the window file explorer, and find the folder C:/Users /window用户名/AppData/Roaming/npm-cache/node-sass/4.5.3(node-sass版本号). Delete the package folder and package.tgz file inside, then put the win32-x64-51_binding.node file, then open the window Dos command box and enter to npm install -g node-sassglobally install the node-sass package. The projects generated by the scaffolding also need to use the npm install node-sassnode-installation project. Sass depends on the package. You can use node-sass -v to check the node-sass version, which means the download is successful. Otherwise, it means a failure (ps: explain why global installation and project installation are needed. Global installation is to use the node-sass command to compile static files. The .scss file in the resource is a .css file. The project installation is because you use .scss files in the project components, so you need to install the project's sass compilation environment. This means that when the project is packaged and compiled, it will not actively search for node-sass globally. Package compiled .scss file)