Angular环境搭建

最新推荐文章于 2024-05-30 18:38:28 发布
最新推荐文章于 2024-05-30 18:38:28 发布
阅读量673 收藏
点赞数 1
分类专栏： Angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44036436/article/details/103787138
版权

在这里插入图片描述

Angular环境搭建

1 .安装前环境准备

  • 安装nodejs(安装稳定版本)

  • 安装cnpm

    • npm install -g cnpm --registry=https://registry.npm.taobao.org
2.全局安装Angular/cli(只需要安装一次)
  • npm install -g @angular/cli     或者    cnpm install -g @angular/cli

  • 验证是否安装成功 终端输入 ng v出现下面相似的提示表示成功

  •     _                      _                 ____ _     ___    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | | /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
                Angular CLI: 8.3.21

  Node: 10.16.2

  OS: win32 x64

  Angular:

  Package                      Version

  @angular-devkit/architect    0.803.21

  @angular-devkit/core         8.3.21

  @angular-devkit/schematics   8.3.21

  @schematics/angular          8.3.21

  @schematics/update           0.803.21

  rxjs                         6.5.4

2项目创建第一种方式

  • 在需要创建项目的文件夹下打开命令提示行

  • 创建项目

    • 在终端中输入ng new 项目名称
    • 项目名称建议命名为英文

  • 安装会出现的提示

    • Would you like to add Angular routing?表示是否安装路由

    • Which stylesheet format would you like to use?样式文件编译

    • 出现下面提示表示成功

    •     ? Would you like to add Angular routing? Yes
    ? Which stylesheet format would you like to use? Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
    CREATE angular01/angular.json (3705 bytes)
    CREATE angular01/package.json (1295 bytes)
    CREATE angular01/README.md (1027 bytes)
    CREATE angular01/tsconfig.json (543 bytes)
    CREATE angular01/tslint.json (1953 bytes)
    CREATE angular01/.editorconfig (246 bytes)
    CREATE angular01/.gitignore (631 bytes)
    CREATE angular01/browserslist (429 bytes)
    CREATE angular01/karma.conf.js (1021 bytes)
    CREATE angular01/tsconfig.app.json (270 bytes)
    CREATE angular01/tsconfig.spec.json (270 bytes)
    CREATE angular01/src/favicon.ico (948 bytes)
    CREATE angular01/src/index.html (295 bytes)
    CREATE angular01/src/main.ts (372 bytes)
    CREATE angular01/src/polyfills.ts (2838 bytes)
    CREATE angular01/src/styles.sass (80 bytes)
    CREATE angular01/src/test.ts (642 bytes)
    CREATE angular01/src/assets/.gitkeep (0 bytes)
    CREATE angular01/src/environments/environment.prod.ts (51 bytes)
    CREATE angular01/src/environments/environment.ts (662 bytes)CREATE angular01/src/app/app-routing.module.ts (246 bytes)
    CREATE angular01/src/app/app.module.ts (393 bytes)
    CREATE angular01/src/app/app.component.html (25530 bytes)
    CREATE angular01/src/app/app.component.spec.ts (1107 bytes)
    CREATE angular01/src/app/app.component.ts (214 bytes)
    CREATE angular01/src/app/app.component.sass (0 bytes)
    CREATE angular01/e2e/protractor.conf.js (808 bytes)
    CREATE angular01/e2e/tsconfig.json (214 bytes)
    CREATE angular01/e2e/src/app.e2e-spec.ts (642 bytes)
    CREATE angular01/e2e/src/app.po.ts (262 bytes)
    npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.

    > core-js@2.6.11 postinstall F:\htmldaima\angular\angular01\node_modules\babel-runtime\node_modules\core-js
    > node -e "try{require('./postinstall')}catch(e){}"
        > core-js@3.2.1 postinstall F:\htmldaima\angular\angular01\node_modules\core-js
    > node scripts/postinstall || echo "ignore"
        > core-js@2.6.11 postinstall F:\htmldaima\angular\angular01\node_modules\karma\node_modules\core-js
    > node -e "try{require('./postinstall')}catch(e){}"    > @angular/cli@8.3.21 postinstall F:\htmldaima\angular\angular01\node_modules\@angular\cli
    > node ./bin/postinstall/script.js

    npm WARN karma-jasmine-html-reporter@1.5.1 requires a peer of jasmine-core@>=3.5 but none is installed. You must install peer dependencies yourself.
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\webpack-dev-server\node_modules\fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\watchpack\node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\karma\node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\@angular\compiler-cli\node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

    added 1193 packages from 1051 contributors and audited 18835 packages in 181.192s
    found 0 vulnerabilities

    warning: LF will be replaced by CRLF in .editorconfig.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in .gitignore.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in README.md.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in angular.json.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in browserslist.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in e2e/protractor.conf.js.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in e2e/src/app.e2e-spec.ts.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in e2e/src/app.po.ts.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in e2e/tsconfig.json.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in karma.conf.js.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in package-lock.json.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in package.json.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in src/app/app-routing.module.ts.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in src/app/app.component.html.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in src/app/app.component.spec.ts.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in src/app/app.component.ts.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in src/app/app.module.ts.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in src/environments/environment.prod.ts.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in src/environments/environment.ts.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in src/index.html.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in src/main.ts.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in src/polyfills.ts.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in src/styles.sass.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in src/test.ts.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in tsconfig.app.json.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in tsconfig.json.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in tsconfig.spec.json.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in tslint.json.
    The file will have its original line endings in your working directory
        Successfully initialized git.

项目创建第二种方式

  • 在需要创建项目的文件夹下打开命令提示行
  • 创建项目
    • 在终端中输入ng new 项目名称 --skip-install ;这样只会新建项目不会安装依赖
    • 项目名称建议命名为英文
  • 进入新创建的文件夹下使用npm或者cnpm安装
    • cnpm安装比较快

运行项目

  • cd 项目文件夹名称

  • ng serve --open

  • 出现下图表示运行成功
    在这里插入图片描述

qindayong！
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解Angular 开发环境搭建
10-19
在深入探讨Angular开发环境搭建之前，首先理解Angular框架的核心概念是必要的。Angular是一款由Google维护的开源JavaScript框架，主要用于构建单页应用（SPA）。它提供了一整套工具和功能，如数据绑定、依赖注入、...
angular开发环境搭建及新建项目
weixin_34418883的博客
04-08 304
　　最近一个星期准备学习一下angular前端框架，因为之前在学习abp框架的时候，都要求前端要掌握angular,所以不得不回来恶补一下了，学习的过程有时间的话会记录在这里，方便以后复习。 闲言少叙，下面来介绍开发环境搭建的步骤： 开发环境搭建 1.安装node和npm(其实只需要安装node，因为npm会跟随node一起安装) 首先百度node.js ,进入node.js的官网...
如何创建一个Angular项目（超简单）
最新发布
庸人方自扰，自在就好
05-30 427
9、 如果你看到跟下图一样，说明你的Angular项目创建成功，在浏览器打开http://localhost:4200/便可看到创建好的Angular项目，至此，一个Angular项目创建完成！（用npm安装cnpm，将镜像源设置为国内镜像源，国内镜像源由taobao提供，有些软件可能在国外，有的时候可能需要翻墙，你就会下载比较慢，这个时候使用cnpm就比npm快）2、运行node -v和npm -v两条命令（检验是否下载成功Node.js）（查看安装的cnpm版本号，用于检查cnpm安装是否成功）
【Angular】angular环境搭建
余浩的博客
05-04 1001
1.安装前的准备 1.1 安装node.js 注意安装最新的稳定版本 1.2 安装cnpm npm安装较慢 1.3 使用npm/cnpm安装angular/ cli 此安装只需要安装一次就好了npm install -g @angular/cli cmd中输入ng v 可以查看是否安装成功。 2.创建angular项目 2.1找到要创建项目的目录 2.2创建项目 ng new 项目名称 也可以跳过npm i安装：ng new 项目名称 --skip-install , 再使用cnpm install安装依赖
Angular--搭建环境
m0_72694993的博客
10-11 1313
1.第一种，像官网的实例，可以不通过本地环境进行搭建，通过。（1）第一步我们先检查一下是否安装好npm和node.js。2.第二种，通过node.js和npm包管理器进行安装，（4）在项目的集成终端中通过npm start运行项目。通过在命令行输入node -v和npm -v进行检查。（2）通过npm命令进行安装angular-cli。然后点开下边的网页连接就可以打开我们的项目了。（3）创建项目指令，然后对默认值进行选择。一、Angular的开发。
Angular2环境搭建
07-23
一、编译和运行环境搭建 1、node.js和npm安装 a、下载地址：https://nodejs.org/en/download/ b、通过node -v 和　npm　-v检查是否正确安装 c、下载工程： 略 d、进入工程目录 cd resouces Shift + 右键进入...
【JavaScript源代码】Angular环境搭建及简单体验小结.docx
12-27
【Angular环境搭建及简单体验小结】 Angular是一个由Google开发并维护的开源Web前端框架，自2009年由Misko Hevery等人创立以来，它已成为业界广泛采用的JavaScript框架。Angular以其强大的功能和对中大型企业级项目...
angular环境搭建
郑州彭于晏
02-06 211
Node.js Angular 需要 Node.js 版本 10.9.0 或更高版本。 要检查你的版本，请在终端/控制台窗口中运行 node -v 。 要获取 Node.js，请转到 nodejs.org。 npm 包管理器 Angular、Angular CLI 和 Angular 应用都依赖于 npm 包中提供的特性和功能。要想下载并安装 npm 包，你必须拥有一个 npm 包管理器。 本搭建...
angular(MVC)项目搭建
08-08
使用angularjs框架搭建的mvc单页应用项目，整个单页应用的配置， 适合初学者参考,此框架搭建属于个人所有，如有疑问的地方可以发送我邮箱wsl_ys@163.com
【Angular】环境搭建
向阳而生
03-22 218
前言：        简单粗暴，直接开始按步骤去做，先学会用，再去深入研究！正文：      1、下载安装Node.js            ps：Angular2基于node.js，所以要先安装nodejs环境            打开Node.js官网，点击硕大的绿色Download按钮，按GUI提示安装即可           测试是否安装成功                    打开...
Angular环境搭建及简单体验
nidongla的博客
05-28 163
一、安装开发环境 npm install -g typescript npm install -g @angular/cli 二、创建hello-world项目 创建项目 ng new angular2-hello-world 查看新建项目的目录结构 cd angular2-hello-world sudo apt install tree tree -F -L 1 . ├── angular.json ├── karma.conf.js ├── node_modules/ ├── package..
angular项目环境搭建
灵晨的博客
10-18 424
（1）下载node.js（地址：https://nodejs.org/en/）安装包，直接下一步傻瓜式安装，安装好后系统内部就多了一个npm的变量，打开命令行工具可进行测试node.js安装包： 测试： （2）使用npm下载angular/cli,命令：npm install -g angular/cli（3）此时系统中又会多一个ng的变量，可
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值