• [转]windows 10 搭建angular开发环境


    本文转自:https://www.cnblogs.com/lilunpai/articles/7992538.html

    一、环境介绍

    1、开发环境:Windows10 

    2、开发ide工具:VS code https://code.visualstudio.com/

    二、准备环境

    1、下载并安装nodejs(建议下载LTS版本),安装过程中会默认添加path,不要不小心取消掉了。

    2、Nodejs安装完成之后,先使用下面两个命令检查安装是否正常,如果正常话应该会显示相应的版本号。

    1
    2
    node -v    查看node版本 
    npm -v      查看npm版本

    3、安装Typescript和Angular CLI

       安装之前我们先设置一下淘宝镜像,这样npm下载速度会快一些     

    1
    npm config set registry https://registry.npm.taobao.org 

      接下来,我们就可以真正的安装Typescript了。  

    1
    npm install -g typescript typings 

      之后安装Angular CLI,此处注意不要使用angular-cli

    1
    npm install -g @angular/cli

    三、安装失败以及解决办法

    1、Angular CLI安装失败,使用下面命令卸载,然后重新安装

    npm uninstall @angular/cli
    npm cache clean
    npm cache verify --force

      执行上面命令之后,找到C盘-->用户-->你登录的账户-->AppData-->Roaming-->npm目录并且删除

    2、缺少Python环境

      a、下载并安装Python,官方下载

      b、安装时,最好直接安装到C盘根目录,比如C:Python27python.exe

      c、检查配置环境变量path路径,电脑->属性->高级配置->环境变量->把安装的Python路径复制到path里面就可以了 

    四、配置VS code 

      1、点击菜单中的【调试】按钮,选择【安装其他调试器】,然后搜索 Debugger for Chrome 并安装

      2、找到launch.json文件,并修改一下内容

    复制代码
     1 {
     2     // 使用 IntelliSense 了解相关属性。 
     3     // 悬停以查看现有属性的描述。
     4     // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
     5     "version": "0.2.0",
     6     "configurations": [          
     7         {
     8             "type": "Chrome",
     9             "request": "launch",
    10             "name": "Launch Chrome with ng serve",
    11             "sourceMaps": true,
    12             "url": "http://localhost:4200",
    13             "webRoot": "${workspaceRoot}"
    14         }
    15     ]
    16 }
    复制代码

      3、在VS code 中的终端里面输入 ng serve,项目就会启动

      最后就可以直接F5启动并且任意debug调试了

  • 相关阅读:
    Java 拆分 PDF 文档
    [Java] Spire.Cloud.Word 在Word 文档中添加、删除形状
    Java 生成Word文档
    Java 添加文本框到 PPT 幻灯片
    Linux下kafka的安装及配置
    Linux下zookeeper的安装及配置
    Linux下pip的安装及配置
    Linux安装Python环境
    Linux安装jdk8
    SnowNLP——获取关键词(keywords(1))
  • 原文地址:https://www.cnblogs.com/freeliver54/p/10344049.html
Copyright © 2020-2023  润新知