angular-cli建立项目

最新推荐文章于 2021-08-16 11:39:42 发布
原创 最新推荐文章于 2021-08-16 11:39:42 发布 · 184 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#angular2

本文探讨了使用Angular CLI创建项目的全过程，包括解决安装中遇到的问题，通过ng new命令生成项目，分析项目目录结构及package.json文件，调整app.component.ts根路径，以及如何利用--prefix参数定制项目前缀。

angular-cli的核心是webpack，以及npm做为依赖包。但往往在安装过程中会遇到很多奇怪问题，我把这一切都追根于网络问题。

建立新项目

ng new my-app

在这里插入图片描述``

ng new my-app --skip-install

在这里插入图片描述建立没有node_module的目录

项目目录分析

在这里插入图片描述

项目pageage.json分析

在这里插入图片描述这是page.json的内容

更改app.component.ts根路径

使用ng new的另一个参数 --prefix:

ng new sales-app --prefix sales

在这里插入图片描述在这里插入图片描述在这里插入图片描述 --routing

更详细查看

使用Angular CLI生成 Angular项目

精选资源
angular-cli：Angular的CLI工具
01-31
Angular CLI创建，管理，构建和测试Angular项目。 它建立在Angular DevKit之上。 DevKit的目标 DevKit的目标是提供大量可用于管理，开发，部署和分析代码的库。 入门-本地开发 安装 要在本地开始使用，请按照以下...
angular-user-search-github：:pencil_selector:简单的Angular-CLi应用程序搜索github用户
02-04
Github用户搜索是基于Angular 2的单页应用程序，它使用Github Web API通过用户名在github上查找任何用户，并有助于显示项目的自述文件。 开发服务器 运行npm install安装依赖项。 运行npm run start | ng serve ...
一、angular6-基于 Angular CLI 新建项目
b422761838的专栏
03-24 481
1.下载最新版nodejs并安装，配置环境变量 下载地址：https://nodejs.org/en/ 安装成功后，在终端工具输入 node -v 显示版本号，说明安装成功 2.安装Angular CLI 终端输入 npm install -g @angular/cli，输入ng version检查是否成功，注意ng 命令都没有'-' 3.新建项目 ng new my-app...
创建Angular项目及常用命令
guizi0809的博客
08-16 5627
1.首先需要安装node.js，查看node.js和npm版本，若能显示版本号说明安装成功（附：nodejs安装教程） 2.安装angular脚手架 // 全局安装 npm install -g @angular/cli 安装完成后使用ng --version查看版本号，显示版本号则证明安装成功（当前版本：12.2.1） ...
AngularJS实际项目应用——命名规范概览
Challenge Next Challenge
01-22 3934
有一条好的软件设计原则叫CoC（Convention over Configuration），即惯例优于配置原则，详见：wiki 项目需要一个好的命名规范，这样可以大大降低学习成本以及查找成本，通过对文件名以适当的形式命名，可以非常快速的知道这个文件的类型，作用以及用来实现的功能。在本项目开发的过程中，主要参考了两个命名规范：一个是github上关于angularjs的规范，一个是google自
更改项目project名称，与项目名称；
热门推荐
苏凯的博客
10-08 3万+
更改项目名称 当我们复制项目后需要更改项目名称，第一是改工程包名，第二是改启动时用的项目名称；这样包名与启动的工程名就会一致； 改启动时用的项目名称： 一.第一步 二.第二步 ...
ionic 根据自己开发的项目更改项目名，图标 、包名及如何安装、删除、修改插件
cxkong1392661293的专栏
05-05 1044
根据自己开发的项目更改项目名，图标 、包名及如何安装、删除、修改插件1.更改项目名 (1).如下图：修改ionic工程下的config.xml文件，修改里面的name节点属性值： (2).重新build[code lang="psd"] $ ionic build android [/code]2.更改图标和启动图 (1). 替换如下图标和启动图： (2).替换图片之后，终端输入：[code la...
ng-cli-electron:建立一个@angularcli支架的电子项目
05-02
建立一个@angular/cli支架的电子项目 这是一个扩展/插件，允许@angular/cli用户创建电子应用程序。 旨在解决此问题： 安装 $ npm install ng-cli-electron electron awesome-typescript-loader --save 用法 这些命令...
angular-advanced-course:Angular高级图书馆实验室课程-建立自己的图书馆
05-14
安装Angular CLI 使用以下命令，angular-cli将被全局安装在您的计算机以及Yarn中： npm install -g @angular/cli yarn 如何安装此存储库 我们可以使用以下命令安装master分支： git clone ...
精选资源
SB-Admin-BS4-Angular-8：使用Angular 8和Bootstrap 4构建的简单仪表板管理应用程序
01-31
该项目是著名的Free Admin Bootstrap Theme 到Angular9 Theme的移植。 由和提供支持 该项目是使用版本9.0.2生成的。 介绍 为Angular项目的开发提供快速，可靠和可扩展的启动器。 sb-admin-bs4-angular9提供以下...
Angular2-使用Angular CLI快速搭建工程（一）
拓宇
05-31 1万+
前言： 本文适合Angular2的初学者阅读； 时下web前端发展迅猛，新框架层出不穷，大家都知道三驾马车VueJS，Angular2，React。国内VueJS非常热门，百度热点趋势以1000%的涨幅在增加。Angular2在国外非常受欢迎，在国内的粉丝还非常少，文章不多，究其原因有这么几点主要是学习曲线陡峭，上手困难，（1）angular本身概念难懂，（2）使用typescript
3、使用angular cli初始化一个新项目
学海无涯苦作舟
01-10 9031
新项目搭建 ng new命令新建项目 首先到工作目录底下，然后使用ng new命令初始化一个新项目： ng new newProject // 后面跟的是项目名称 命令执行结果如下： 这个命令会自动帮我们生成所需要的一些基本文件，注意上图，在create完成一些命令之后，它还会自动调用npm install命令，使用npm把对应的依赖包下载下来。这个时候请使用ctrl+C，进
《Angular之脚手架angular-cli重命名引发的问题》
杨晓风 迷迭香的记忆
09-30 1084
前言：                                                                   千锤万凿出深山，烈火焚烧若等闲。 正文：    一。问题描述       二。问题定位           脚手架 1.0.0-beta.28 或者更低版本的名称为angular-cli，随着Angular技术的发展，脚手架也随着发展，改...
Angular6笔记--动态设置页面标题title
好吗好的~的技术博客
01-22 4459
众所周知，Angular6非常适合创建单页面应用的框架，所以Angular6创建出来的项目是放在一个页面中的，这也导致了所有页面的标题都是一样的，那么问题来了，怎么修改某一个页面的标题呢？  这里需要介绍一个知识点：Title Service Title Service 用于获取和设置当前 HTML 文档的标题 Title Service 提供了以下方法： setTitle() ge...
Angular-Cli创建项目的全部过程
WebDestiny的博客
12-24 1346
使用 CLI 创建一个项目并配置默认路由： ng new helloAngular –routing 如果要跳过npm install 安装,则使用以下命令： ng new my-app --skip-install 项目结构目录分析 |--E2e 应用的端对端(e2e)测试，用 Jasmine 写成并用 protractor 端对端测试运行器测试。 |--Node_modules 依赖包 |--Src |--App Angular应用文件 |--App.module.ts |..
使用Angular CLI进行单元测试和E2E测试
weixin_34370347的博客
03-21 275
第一篇文章是: "使用angular cli生成angular5项目" : http://www.cnblogs.com/cgzl/p/8594571.html 第二篇文章是: "使用angular cli从蓝本生成代码" : http://www.cnblogs.com/cgzl/p/8605464.html 第三篇文章是: "使用Angular CLI生成路由" : http://www....
Angular CLI：自定义webpack配置
08-12 2478
The Angular CLI gives us all sorts of power. One of these powers is the ability to forget about the webpack configuration process. This is great for most applications, but what if you want to add cust...
用crosstool-ng建立自己的ARM交叉编译工具链 (适用于S3C6410以及其它处理器)
HumorRat的专栏
05-21 1万+
一、下载crosstool-ng   crosstool-ng的下载地址是：http://ymorin.is-a-geek.org/download/crosstool-ng/    值得注意的是，下载里最新的crosstool-ng以后，记得在到http://ymorin.is-a-geek.org/download/crosstool-ng/01-fixes/ 看看有没有相应的补丁，有得话一起
github提交代码时报husky错误
zyzhan
02-20 3773
如果做H5项目，一般都有一些好用的模板，提交代码到github的时候，可能会报这个错误 husky > pre-commit hook failed (add --no-verify to bypass) > git config --get-all user.name > git config --get-all user.email 由于现在git可视化工具比较多，这个错误...
使用ng-cli-electron构建Angular与Electron集成项目
从标题“ng-cli-electron: 建立一个@angular/cli支架的电子项目”可以看出，该项目的核心功能是围绕 Angular CLI 构建流程进行增强，使其能够生成符合 Electron 运行环境要求的应用结构。Angular CLI 本身是一个高度...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值