ng

导读 最近项目进入了即将验收阶段，项目部署是必不可少的。由于某些原因，我们把前端项目(Angular4)和后端项目(JavaWeb)，由于要部署了四个项目：Angular4(微信端)，微信端数据服务，JavaWeb(PC端)*2，并且是放在同一个服务器下。Java项目比较好部署，Tomcat/Jetty都可以轻松部署好。但是Angular部署起来不是那么的容易(当然是对于我这种菜鸟而言)，我先说下为什么我说不容易的原因。 最初时，我用ng build –prod –aot编译打包的时候。这里注意一下，由于现在官方已经内置了，所以打包的时候只需要输入ng build –prod即可了。这里可以以我的项目体积相比较一下： ng build : 8,348,761字节 ng build –aot : 9,232,405字节 ng build –prod : 1,839,811字节 ng build –prod –aot : 1,839,811字节 最后可以看出，ng build –prod即可完成产品化最小打包。这里我有一点不懂，预编译构建反而比常规构建的体积还要大，希望大神可以帮忙解答。 这里就不再讲如何让项目更小了。 当我把dist里面的文件拷到Tomcat的ROOT文件夹下，打开http://127.0.0.1的时候，熟悉的项目页面展示了出来。习惯性按了F5刷新

Install Angular CLI npm install -g @angular/cli New Project ng new my-project-name Build project ng build --prod Add firebase schematics ng add @angular/fire Firebase login/init firebase login firebase init Firebase deploy firebase deploy 来源： https://www.cnblogs.com/flowerbear/p/12460141.html

storybook for angular 初试 文档 官方文档 angular示例 安装 依赖 @storybook/cli zengwe$ npm i -g @storybook/cli 在angular项目下运行 zengwe$ getstorybook 初始化成功后会在项目下增加连个文件夹 ./.storybook ./src/stories 在stories下会有storybook的demo示例 import { action } from '@storybook/addon-actions'; import { linkTo } from '@storybook/addon-links'; import { ShowComponent } from '../app/viewer/show/show.component'; import { Button } from '@storybook/angular/demo'; import { ViewerModule } from '../app/viewer/viewer.module'; export default { title: 'Button', component: Button, }; export const Text = () => ({ component: Button, props: { text:

因为目前项目中服务多是用nginx进行均衡负载的，所以这里记录下，为以后备查。 如下： nginx安装目录：/root/softwate/nginx nginx可执行文件目录：/root/softwate/nginx/sbin/nginx nginx配置文件目录：/root/softwate/nginx/conf/nginx.conf nginx的配置文件如下： #用户，一般不用配置，我测试用的root 需要指定下root user root; #user nobody; #启动进程数量，一般和主机内核数量一致 worker_processes 1; #错误日志打印 #error_log logs/error.log; #error_log logs/error.log notice; error_log logs/error.log info; pid logs/nginx.pid; events { #单个后台worker process进程的最大并发链接数 worker_connections 1024; } http { #设定mime类型,类型由mime.type文件定义 include mime.types; default_type application/octet-stream; #设置日志格式 log_format main '$remote_addr -

环境搭建 参考文档： https://angular.cn/guide/setup-local 第 1 步：安装 Angular CLI 你可以使用 Angular CLI 来创建项目、生成应用和库代码，以及执行各种持续开发任务，比如测试、打包和部署。 全局安装 Angular CLI。 要使用 npm 命令安装 CLI，请打开终端/控制台窗口，输入如下命令： npm install -g @angular/cli //版本号：9.0.2 第 2 步：创建工作空间和初始应用 你要在 Angular 工作区的上下文中开发应用。 要创建一个新的工作空间和初始入门应用： 运行 CLI 命令 ng new 并提供 my-app 名称作为参数，如下所示： ng new my-app ng new 命令会提示你提供要把哪些特性包含在初始应用中。按 Enter 或 Return 键可以接受默认值。 Angular CLI 会安装必要的 Angular npm 包和其他依赖包。这可能要花几分钟的时间。 CLI 会创建一个新的工作区和一个简单的欢迎应用，随时可以运行它。 测试了好几次都是安装失败，网上查了一下怀疑是node版本低了。当前node:10.14.2，去官网下载了最新的安装12.16 0之后继续，安装成功。 第 3 步：运行应用 Angular CLI 中包含一个服务器

安装 依赖 Node 6.9.0 or higher NPM 3 or higher Python C++ 编译工具 安装 npm install -g @angular/cli 使用帮助 ng help 初始化项目 ng new <项目名称> 启动开发服务 ng serve ng serve 默认占用 4200 端口号，可以通过下面选项配置： ng serve --port 4201 来源： https://www.cnblogs.com/ygjzs/p/12215288.html

开始项目前，你需要先安装node和npm，然后执行npm install -g @angular/cli安装Angular CLI。 如何安装node.js和npm npm使用介绍 1.安装angular-cli Angular提供了一个命令行工具angular-cli,它能让用户通过命令行创建和管理项目。 安装命令： npm install -g angular-cli@1.0.0-beta.28.3 安装后可输入指令ng version查看版本。 2.创建项目 ng new newApp //建立一个新的项目 创建项目时会自动安装node包，如果安装太慢，可以先跳过安装，然后使用cnpm命令安装： ng new newApp --skip-install cd newApp cnpm install cnpm命令是npm在淘宝镜像的命令。 3.启动项目 进入项目目录内，输入命令： ng sever 默认端口号是4200，如需修改端口使用命令： ng serve -p 端口号 4.项目打包 打包命令： ng build 由于 用angular-cli创建的项目，有很多依赖之类的文件，但是实际上好多用不着这就需要再次压缩，要么会因为打包文件过大而影响加载速度，这里使用命令： ng build --prod --aot //在终端使用此命令会使你的项目压缩到原来的30%左右 5

Angular v6 新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。 Angular v6 是统一整体框架、Material 和 CLI 三大 Angular 组件的第一个版本，此次更新更多地关注于工具链上，以使其具有更好的可移植性。 此次更新信息如下： 更新依赖关系： @angular/core 现在依赖于： TypeScript 2.7 RxJS 6.0.0 tslib 1.9.0 @angular/platform-server 现在依赖于 Domino 2.0 特性的小改动： animations: 只能使用 WA-polyfill 和 AnimationBuilder animations: 在转换匹配器中暴露元素和参数 common: 在 NgIf 中使用非模板元素时更好的错误消息 common: 导出函数来格式化数字，百分数，货币和日期 compiler: 实现“enableIvy”编译选项 core: 添加绑定名称到内容更改错误 bug 修复： 即使在 noOp 动画期间也要报告正确的 totalTime 值 避免在路由器返回/刷新期间插入动画 修复增加/减少别名示例 修正 Observable 方法的映射 更新功能信息: 1. ng update ng update <package> 是一个新的 CLI 命令，用于分析 package

1、安装CLI: cnpm install -g @angular/cli //卸载: npm uninstall -g @angular/cli npm cache clean 2、检测是否成功: ng –version or ng v 3、新建项目 ng new ng-app //ng-app可以自己命名项目名称 cd ng-app //进入ng-app ng serve //启服务 http://localhost:4200/ 访问angular项目 4、项目结构说明 文件 说明 E2e 应用的端对端(e2e)测试，用 Jasmine 写成并用 protractor 端对端测试运行器测试。 Node_modules 依赖包 Src App Angular应用文件 App.module.ts App.component.ts assets 资源文件 Environments 环境配置：开发、部署 Index.html 应用的宿主页面。 它以特定的顺序加载一些基本脚本。 然后它启动应用，将根AppComponent放置到自定义<my-app>标签里。 Main.ts Polyfills.ts 处理浏览器兼容问题 Tsconfig.app.json Typescript编译配置 Tsconfig.spec.json Typescript测试编译配置 Typings.d.ts

一，安装angular6 D:\cmf\angular6> npm install -g @angular/cli C:\Users\Administrator\AppData\Roaming\npm\ng -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\@angular\cli\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","a rch":"x64"}) + @angular/cli@6.1.3 added 243 packages in 91.487s 二.创建项目 ng new 项目名称 D:\cmf\angular6> ng new project1 cd project1 进入项目目录 ng serve --open