Resource - Angular First Demo
1 - Angular
Angular是一个JavaScript UI框架，在 Angular 2 之后，Angular 的主要开发语言换成了 Typescript，而不是 Javascript。
但目前的浏览器大都不支持直接执行 Typescript 语言，而是需要 tsc 编译器的帮助，把 Typescript 转成浏览器可编译的 Javascript 语言。
2 - Install Angular - Ubuntu
2.1 安装Node和NPM
https://github.com/nodesource/distributions/blob/master/README.md#debinstall
# 在 Ubuntu上安装Node.js v12.x:
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install -y nodejs
# 安装NPM新版本
sudo apt install npm
# 升级
npm i -g npm
2.2 安装angular并设置registry
root@anliven:~# node -v
v12.16.3
root@anliven:~# npm -v
6.14.4
root@anliven:~/tempfiles/angular-first-project# npm config set registry https://registry.npm.taobao.org
root@anliven:~/tempfiles/angular-first-project# npm install -g @angular/cli
/usr/bin/ng -> /usr/lib/node_modules/@angular/cli/bin/ng
> @angular/cli@9.1.6 postinstall /usr/lib/node_modules/@angular/cli
> node ./bin/postinstall/script.js
? Would you like to share anonymous usage data with the Angular Team at Google under
Google’s Privacy Policy at https://policies.google.com/privacy? For more details and
how to change this setting, see http://angular.io/analytics. No
+ @angular/cli@9.1.6
added 271 packages from 206 contributors in 67.872s
root@anliven:~/tempfiles/angular-first-project#
root@anliven:~/tempfiles/angular-first-project# ng version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 9.1.6
Node: 12.16.3
OS: linux x64
Angular:
...
Ivy Workspace:
Package Version
------------------------------------------------------
@angular-devkit/architect 0.901.6
@angular-devkit/core 9.1.6
@angular-devkit/schematics 9.1.6
@schematics/angular 9.1.6
@schematics/update 0.901.6
rxjs 6.5.4
root@anliven:~/tempfiles/angular-first-project#
2.3 Build your first Angular project
通过命令行创建一个新的angular工程
root@anliven:~/tempfiles# mkdir angular-first-project
root@anliven:~/tempfiles# cd angular-first-project/
root@anliven:~/tempfiles/angular-first-project# ll
total 8
drwxr-xr-x 2 root root 4096 5月 18 16:21 ./
drwxr-xr-x 4 root root 4096 5月 18 16:21 ../
root@anliven:~/tempfiles/angular-first-project# npm config set registry https://artifactory.platform.manulife.io/artifactory/api/npm/npm/
root@anliven:~/tempfiles/angular-first-project#
root@anliven:~/tempfiles/angular-first-project# npm config list
; cli configs
metrics-registry = "https://artifactory.platform.manulife.io/artifactory/api/npm/npm/"
scope = ""
user-agent = "npm/6.14.5 node/v12.16.3 linux x64"
; userconfig /root/.npmrc
registry = "https://artifactory.platform.manulife.io/artifactory/api/npm/npm/"
; builtin config undefined
globalconfig = "/etc/npmrc"
globalignorefile = "/etc/npmignore"
prefix = "/usr/local"
; node bin location = /usr/bin/node
; cwd = /root/tempfiles/angular-first-project
; HOME = /root
; "npm config ls -l" to show all defaults.
root@anliven:~/tempfiles/angular-first-project#
root@anliven:~/tempfiles/angular-first-project# ng new my-app
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
CREATE my-app/README.md (1022 bytes)
CREATE my-app/.editorconfig (274 bytes)
CREATE my-app/.gitignore (631 bytes)
CREATE my-app/angular.json (3566 bytes)
CREATE my-app/package.json (1239 bytes)
CREATE my-app/tsconfig.json (489 bytes)
CREATE my-app/tslint.json (3125 bytes)
CREATE my-app/browserslist (429 bytes)
CREATE my-app/karma.conf.js (1018 bytes)
CREATE my-app/tsconfig.app.json (210 bytes)
CREATE my-app/tsconfig.spec.json (270 bytes)
CREATE my-app/src/favicon.ico (948 bytes)
CREATE my-app/src/index.html (291 bytes)
CREATE my-app/src/main.ts (372 bytes)
CREATE my-app/src/polyfills.ts (2835 bytes)
CREATE my-app/src/styles.css (80 bytes)
CREATE my-app/src/test.ts (753 bytes)
CREATE my-app/src/assets/.gitkeep (0 bytes)
CREATE my-app/src/environments/environment.prod.ts (51 bytes)
CREATE my-app/src/environments/environment.ts (662 bytes)
CREATE my-app/src/app/app.module.ts (314 bytes)
CREATE my-app/src/app/app.component.css (0 bytes)
CREATE my-app/src/app/app.component.html (25725 bytes)
CREATE my-app/src/app/app.component.spec.ts (942 bytes)
CREATE my-app/src/app/app.component.ts (210 bytes)
CREATE my-app/e2e/protractor.conf.js (808 bytes)
CREATE my-app/e2e/tsconfig.json (214 bytes)
CREATE my-app/e2e/src/app.e2e-spec.ts (639 bytes)
CREATE my-app/e2e/src/app.po.ts (301 bytes)
✔ Packages installed successfully.
*** Please tell me who you are.
Run
git config --global user.email "you@example.com"
git config --global user.name "Your Name"
to set your account's default identity.
Omit --global to set the identity only in this repository.
fatal: unable to auto-detect email address (got 'root@anliven.(none)')
root@anliven:~/tempfiles/angular-first-project#
在项目文件夹下通过“ng serve --open”命令启动，ctrl+c终止
root@anliven:~/tempfiles/angular-first-project# ll
total 12
drwxr-xr-x 3 root root 4096 5月 25 14:48 ./
drwxr-xr-x 4 root root 4096 5月 18 16:21 ../
drwxr-xr-x 6 root root 4096 5月 25 14:51 my-app/
root@anliven:~/tempfiles/angular-first-project#
root@anliven:~/tempfiles/angular-first-project# cd my-app/
root@anliven:~/tempfiles/angular-first-project/my-app#
root@anliven:~/tempfiles/angular-first-project/my-app# ll
total 588
drwxr-xr-x 6 root root 4096 5月 25 14:51 ./
drwxr-xr-x 3 root root 4096 5月 25 14:48 ../
-rw-r--r-- 1 root root 3566 5月 25 14:48 angular.json # Angular工程配置文件
-rw-r--r-- 1 root root 429 5月 25 14:48 browserslist
drwxr-xr-x 3 root root 4096 5月 25 14:48 e2e/ # 端到端测试文件，web自动化集成测试
-rw-r--r-- 1 root root 274 5月 25 14:48 .editorconfig # EditorConfig的配置文件
drwxr-xr-x 7 root root 4096 5月 25 14:51 .git/
-rw-r--r-- 1 root root 631 5月 25 14:48 .gitignore
-rw-r--r-- 1 root root 1018 5月 25 14:48 karma.conf.js # 自动化单元测试配置文件
drwxr-xr-x 870 root root 36864 5月 25 14:51 node_modules/
-rw-r--r-- 1 root root 1239 5月 25 14:48 package.json # 项目依赖文件
-rw-r--r-- 1 root root 499232 5月 25 14:51 package-lock.json
-rw-r--r-- 1 root root 1022 5月 25 14:48 README.md # Markdown格式的项目文件说明文档
drwxr-xr-x 5 root root 4096 5月 25 14:48 src/ # 源文件目录
-rw-r--r-- 1 root root 210 5月 25 14:48 tsconfig.app.json
-rw-r--r-- 1 root root 489 5月 25 14:48 tsconfig.json # TypeScript的配置文件
-rw-r--r-- 1 root root 270 5月 25 14:48 tsconfig.spec.json
-rw-r--r-- 1 root root 3125 5月 25 14:48 tslint.json # TypeScript的lint配置
root@anliven:~/tempfiles/angular-first-project/my-app#
root@anliven:~/tempfiles/angular-first-project/my-app# ng serve --open
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/core : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/animations/browser/testing : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/common/http/testing : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015
chunk {main} main.js, main.js.map (main) 57.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.4 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.71 MB [initial] [rendered]
Date: 2020-05-25T06:54:21.273Z - Hash: aeb6add91036f07e456b - Time: 19007ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.
^C
root@anliven:~/tempfiles/angular-first-project/my-app#
目录及文件简介
# src 源文件目录
- app 目录，存放具体应用的源代码，包含应用的组件和模块
- assets 目录，存储静态资源文件
- environments 目录，存放环境配置，支持多环境
- favicon.ico 站点图标
- index.html 整个应用的根html，程序的启动页面
- main.ts 应用入口文件，Angular通过这个文件来启动项目
- polyfills.ts 浏览器兼容性适配文件
- styles.css 全局样式文件
- theme.scss 主题样式文件
- tsconfig.app.json 开发时TypeScript编译器的配置,添加第三方依赖会修改这个文件
- tsconfig.spec.json 测试时的TypeScript配置
- test.ts 测试入口文件
# src/app 目录
一个Angular程序至少需要一个模块和一个组件。
- app.component.ts 组件，组件是Angular应用的基本构建模块，可以理解为一段带有逻辑和数据的Html
- app.module.ts 模块文件
根据结果提示，在浏览器打开页面
root@anliven:~/tempfiles/angular-first-project/my-app# ll
total 588
drwxr-xr-x 6 root root 4096 5月 25 14:51 ./
drwxr-xr-x 3 root root 4096 5月 25 14:48 ../
-rw-r--r-- 1 root root 3566 5月 25 14:48 angular.json
-rw-r--r-- 1 root root 429 5月 25 14:48 browserslist
drwxr-xr-x 3 root root 4096 5月 25 14:48 e2e/
-rw-r--r-- 1 root root 274 5月 25 14:48 .editorconfig
drwxr-xr-x 7 root root 4096 5月 25 14:51 .git/
-rw-r--r-- 1 root root 631 5月 25 14:48 .gitignore
-rw-r--r-- 1 root root 1018 5月 25 14:48 karma.conf.js
drwxr-xr-x 870 root root 36864 5月 25 14:53 node_modules/
-rw-r--r-- 1 root root 1239 5月 25 14:48 package.json
-rw-r--r-- 1 root root 499232 5月 25 14:51 package-lock.json
-rw-r--r-- 1 root root 1022 5月 25 14:48 README.md
drwxr-xr-x 5 root root 4096 5月 25 14:48 src/
-rw-r--r-- 1 root root 210 5月 25 14:48 tsconfig.app.json
-rw-r--r-- 1 root root 489 5月 25 14:48 tsconfig.json
-rw-r--r-- 1 root root 270 5月 25 14:48 tsconfig.spec.json
-rw-r--r-- 1 root root 3125 5月 25 14:48 tslint.json
root@anliven:~/tempfiles/angular-first-project/my-app#
2.4 Do your first change
root@anliven:~/tempfiles/angular-first-project/my-app# pwd
/root/tempfiles/angular-first-project/my-app
root@anliven:~/tempfiles/angular-first-project/my-app#
root@anliven:~/tempfiles/angular-first-project/my-app# > src/app/app.component.html
root@anliven:~/tempfiles/angular-first-project/my-app#
root@anliven:~/tempfiles/angular-first-project/my-app# vim src/app/app.component.html
root@anliven:~/tempfiles/angular-first-project/my-app#
root@anliven:~/tempfiles/angular-first-project/my-app# cat src/app/app.component.html
<h1>Hello {{ title }}!</h1>
root@anliven:~/tempfiles/angular-first-project/my-app#
root@anliven:~/tempfiles/angular-first-project/my-app# cat src/app/app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'my-app';
}
root@anliven:~/tempfiles/angular-first-project/my-app#
root@anliven:~/tempfiles/angular-first-project/my-app# vim src/app/app.component.ts
root@anliven:~/tempfiles/angular-first-project/my-app# cat src/app/app.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'my-app';
ngOnInit() {
this.title = 'Angular';
}
}
root@anliven:~/tempfiles/angular-first-project/my-app#
启动项目，查看改动
root@anliven:~/tempfiles/angular-first-project/my-app# ng serve --open
chunk {main} main.js, main.js.map (main) 9.49 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.4 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.71 MB [initial] [rendered]
Date: 2020-05-25T07:25:28.098Z - Hash: fa77f4f8a5fe207072c6 - Time: 17337ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.
3 - Build
Angular 提供了 AoT(Ahead-of-Time) 和 JiT(Just-in-Time) 两种编译方式。
- AoT 的编译方式时，编译器仅仅使用一组库，在构建期间运行一次，浏览器加载的是已经预编译好的代码
- JiT 的编译方式时，编译器在每个用户的每次运行期间都要在浏览器中执行编译过程，用不同的库运行一次
AoT(Ahead-of-time) 编译
AoT 编译能加快应用的启动时间，因为在客户端不需要再导入 angular 编译器，安装的脚本库就会相应变小。
同时，由于编译过程是在服务器端构建时完成的，在编译过程中就会提前发现错误，避免了浏览器运行时编译让用户发现异常。
通常，在生产环境中都会采用 AoT 的编译方式，因为源代码会一起混合编译，防止代码泄露。
利用 Angular CLI 提供的 AoT 编译 + Webpack 摇树方式打包（官方推荐方式）
ng build --prod
因为 Angular CLI 是基于 webpack 开发的，所以提供了 Webpack 自带的摇树操作。当设置目标版本为生产环境版本时，会自动设置成 AoT 编译方式并加入 Webpack 摇树去掉多余文件。
在项目目录下，运行一个命令“ng build --prod”指示Angular CLI创建可部署文件的生产版本。
cd my-app/
ng build --prod
确认生成路径和文件
root@anliven:~/tempfiles/angular-first-project/my-app# cat angular.json |grep dist
"outputPath": "dist/my-app",
root@anliven:~/tempfiles/angular-first-project/my-app#
root@anliven:~/tempfiles/angular-first-project/my-app# ll
total 588
drwxr-xr-x 6 root root 4096 5月 25 14:51 ./
drwxr-xr-x 3 root root 4096 5月 25 14:48 ../
-rw-r--r-- 1 root root 3566 5月 25 14:48 angular.json
-rw-r--r-- 1 root root 429 5月 25 14:48 browserslist
drwxr-xr-x 3 root root 4096 5月 25 14:48 e2e/
-rw-r--r-- 1 root root 274 5月 25 14:48 .editorconfig
drwxr-xr-x 7 root root 4096 5月 25 14:51 .git/
-rw-r--r-- 1 root root 631 5月 25 14:48 .gitignore
-rw-r--r-- 1 root root 1018 5月 25 14:48 karma.conf.js
drwxr-xr-x 870 root root 36864 5月 25 14:53 node_modules/
-rw-r--r-- 1 root root 1239 5月 25 14:48 package.json
-rw-r--r-- 1 root root 499232 5月 25 14:51 package-lock.json
-rw-r--r-- 1 root root 1022 5月 25 14:48 README.md
drwxr-xr-x 5 root root 4096 5月 25 14:48 src/
-rw-r--r-- 1 root root 210 5月 25 14:48 tsconfig.app.json
-rw-r--r-- 1 root root 489 5月 25 14:48 tsconfig.json
-rw-r--r-- 1 root root 270 5月 25 14:48 tsconfig.spec.json
-rw-r--r-- 1 root root 3125 5月 25 14:48 tslint.json
root@anliven:~/tempfiles/angular-first-project/my-app#
编译，命令“ng build --prod”指示Angular CLI创建可部署文件的生产版本。
root@anliven:~/tempfiles/angular-first-project/my-app# ng build --prod
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.
chunk {0} runtime-es2015.1eba213af0b233498d9d.js (runtime) 1.45 kB [entry] [rendered]
chunk {0} runtime-es5.1eba213af0b233498d9d.js (runtime) 1.45 kB [entry] [rendered]
chunk {1} main-es2015.8cffd84673dc9f7dee27.js (main) 104 kB [initial] [rendered]
chunk {1} main-es5.8cffd84673dc9f7dee27.js (main) 125 kB [initial] [rendered]
chunk {2} polyfills-es2015.690002c25ea8557bb4b0.js (polyfills) 36.1 kB [initial] [rendered]
chunk {3} polyfills-es5.9e286f6d9247438cbb02.js (polyfills-es5) 129 kB [initial] [rendered]
chunk {4} styles.3ff695c00d717f2d2a11.css (styles) 0 bytes [initial] [rendered]
Date: 2020-05-25T07:29:13.307Z - Hash: 3fd2a82c970e630020b8 - Time: 67976ms
root@anliven:~/tempfiles/angular-first-project/my-app# ll
total 592
drwxr-xr-x 7 root root 4096 5月 25 15:28 ./
drwxr-xr-x 3 root root 4096 5月 25 14:48 ../
-rw-r--r-- 1 root root 3566 5月 25 14:48 angular.json
-rw-r--r-- 1 root root 429 5月 25 14:48 browserslist
drwxr-xr-x 3 root root 4096 5月 25 15:28 dist/
drwxr-xr-x 3 root root 4096 5月 25 14:48 e2e/
-rw-r--r-- 1 root root 274 5月 25 14:48 .editorconfig
drwxr-xr-x 7 root root 4096 5月 25 14:51 .git/
-rw-r--r-- 1 root root 631 5月 25 14:48 .gitignore
-rw-r--r-- 1 root root 1018 5月 25 14:48 karma.conf.js
drwxr-xr-x 871 root root 36864 5月 25 15:28 node_modules/
-rw-r--r-- 1 root root 1239 5月 25 14:48 package.json
-rw-r--r-- 1 root root 499232 5月 25 14:51 package-lock.json
-rw-r--r-- 1 root root 1022 5月 25 14:48 README.md
drwxr-xr-x 5 root root 4096 5月 25 14:48 src/
-rw-r--r-- 1 root root 210 5月 25 14:48 tsconfig.app.json
-rw-r--r-- 1 root root 489 5月 25 14:48 tsconfig.json
-rw-r--r-- 1 root root 270 5月 25 14:48 tsconfig.spec.json
-rw-r--r-- 1 root root 3125 5月 25 14:48 tslint.json
root@anliven:~/tempfiles/angular-first-project/my-app#
root@anliven:~/tempfiles/angular-first-project/my-app# tree dist/
dist/
└── my-app
├── 3rdpartylicenses.txt
├── favicon.ico
├── index.html
├── main-es2015.8cffd84673dc9f7dee27.js
├── main-es5.8cffd84673dc9f7dee27.js
├── polyfills-es2015.690002c25ea8557bb4b0.js
├── polyfills-es5.9e286f6d9247438cbb02.js
├── runtime-es2015.1eba213af0b233498d9d.js
├── runtime-es5.1eba213af0b233498d9d.js
└── styles.3ff695c00d717f2d2a11.css
1 directory, 10 files
root@anliven:~/tempfiles/angular-first-project/my-app#
说明：
- 在项目文件夹中创建一个'dist'文件夹，包含所有可部署的文件
- 将所有TypeScript代码转换为JavaScript文件，仅包含HTML，JavaScript和CSS文件。
- HTML，JavaScript和CSS文件是静态文件（UI文件，不需要任何后端代码），因此可以在部署到云时使用'staticfile_buildpack'。
4 - Push
Cloud Foundry是一个开源平台即服务（PaaS），提供云，开发人员框架和应用程序服务的选择，旨在在任何云IaaS提供商上进行配置，部署，管理，扩展和升级。
Cloud Foundry使用Cloud Foundry命令行界面（CF CLI）将应用程序部署到云，只需要在manifest.yml文件中提及应用程序部署参数。
Cloud Foundry中的构建包是将要部署的应用程序框架和运行时支持。
4.1 编写manifest文件
λ ll
total 5
-rw-r--r-- 1 GuowangLi 1049089 266 May 25 15:48 manifest-sanbox.yml
drwxr-xr-x 1 GuowangLi 1049089 0 May 25 15:38 my-app/
GuowangLi@CHN-L-GuowangLi /c/TempFiles/dist
λ
λ cat manifest-sandbox.yml
---
applications:
- name: 'pcf-anliven-test'
buildpack: staticfile_buildpack
stack: cflinuxfs3
command: "$HOME/boot.sh"
memery: 256M
dist_quota: 1G
instances: 1
routes:
- route: pcf-anliven-test.apps.sea.preview.pcf.manulife.com
λ
4.2 PCF
登录PCF上对应的space
λ cf login -a https://api.sys.sea.preview.pcf.manulife.com
API endpoint: https://api.sys.sea.preview.pcf.manulife.com
LAN ID: guowangli
Password:
Authenticating...
OK
Select an org:
1. ASIAREGIONAL-SEA-DEV
2. ASIAREGIONAL-SEA-SIT
3. SANDBOX
Org (enter to skip): 3
Targeted org SANDBOX
Targeted space GuowangLi
API endpoint: https://api.sys.sea.preview.pcf.manulife.com (API version: 3.74.0)
User: guowangli
Org: SANDBOX
Space: GuowangLi
λ
λ cf target
api endpoint: https://api.sys.sea.preview.pcf.manulife.com
api version: 2.139.0
user: guowangli
org: SANDBOX
space: GuowangLi
λ
部署Angular应用程序部署到Cloud Foundry
λ ll
total 5
-rw-r--r-- 1 GuowangLi 1049089 266 May 25 16:04 manifest-sandbox.yml
drwxr-xr-x 1 GuowangLi 1049089 0 May 25 15:38 my-app/
λ cd my-app/
λ cf push -f ../manifest-sandbox.yml
Pushing from manifest to org SANDBOX / space GuowangLi as guowangli...
Using manifest file C:\TempFiles\dist\manifest-sandbox.yml
Deprecation warning: Use of 'buildpack' attribute in manifest is deprecated in favor of 'buildpacks'. Please see https://docs.cloudfoundry.org/devguide/deploy-apps/manifest-attributes.html#deprecated for alternatives and other app manifest deprecations. This feature will be removed in the future.
Getting app info...
Creating app with these attributes...
+ name: pcf-anliven-test
path: C:\TempFiles\dist\my-app
buildpacks:
+ staticfile_buildpack
+ command: $HOME/boot.sh
+ instances: 1
+ stack: cflinuxfs3
routes:
+ pcf-anliven-test.apps.sea.preview.pcf.manulife.com
Creating app pcf-anliven-test...
Mapping routes...
Comparing local files to remote cache...
Packaging files to upload...
Uploading files...
90.26 KiB / 90.26 KiB [==============================================================================================================================================================================] 100.00% 1s
Waiting for API to complete processing files...
Staging app and tracing logs...
Downloading staticfile_buildpack...
Downloaded staticfile_buildpack
Cell d6cf5115-3004-4b39-9fc2-74240632a4fe creating container for instance 1fd44705-8280-4a83-a389-dc40b6c5ee77
Cell d6cf5115-3004-4b39-9fc2-74240632a4fe successfully created container for instance 1fd44705-8280-4a83-a389-dc40b6c5ee77
Downloading app package...
Downloaded app package (134.4K)
-----> Staticfile Buildpack version 1.5.3
-----> Installing nginx
Using nginx version 1.17.7
-----> Installing nginx 1.17.7
Copy [/tmp/buildpacks/97cfca992a4e376f88429cb596e30523/dependencies/bf75ee5ff33a7fb3f3e747caf653b7c3/nginx-1.17.7-linux-x64-cflinuxfs3-2197ee1f.tgz]
**WARNING** nginx 1.17.x will no longer be available in new buildpacks released after 2020-05-01.
See: https://nginx.org/
-----> Root folder /tmp/app
-----> Copying project files into public
-----> Configuring nginx
Exit status 0
Uploading droplet, build artifacts cache...
Uploading build artifacts cache...
Uploading droplet...
Uploaded build artifacts cache (218B)
Uploaded droplet (2.2M)
Uploading complete
Cell d6cf5115-3004-4b39-9fc2-74240632a4fe stopping instance 1fd44705-8280-4a83-a389-dc40b6c5ee77
Cell d6cf5115-3004-4b39-9fc2-74240632a4fe destroying container for instance 1fd44705-8280-4a83-a389-dc40b6c5ee77
Cell d6cf5115-3004-4b39-9fc2-74240632a4fe successfully destroyed container for instance 1fd44705-8280-4a83-a389-dc40b6c5ee77
Waiting for app to start...
name: pcf-anliven-test
requested state: started
isolation segment: SEA-MOV
routes: pcf-anliven-test.apps.sea.preview.pcf.manulife.com
last uploaded: Mon 25 May 16:05:46 CST 2020
stack: cflinuxfs3
buildpacks: staticfile
type: web
instances: 1/1
memory usage: 1024M
start command: $HOME/boot.sh
state since cpu memory disk details
#0 running 2020-05-25T08:05:56Z 0.0% 0 of 1G 0 of 1G
λ
λ cf apps
Getting apps in org SANDBOX / space GuowangLi as guowangli...
OK
name requested state instances memory disk urls
pcf-anliven-test started 1/1 1G 1G pcf-anliven-test.apps.sea.preview.pcf.manulife.com
λ
4.3 查看状态
5 - 问题处理
问题描述：
安装完angular后，无法运行ng命令
C:\Users\guowangli>npm install -g @angular/cli
C:\Users\guowangli\AppData\Roaming\npm\ng -> C:\Users\guowangli\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng
> @angular/cli@9.1.6 postinstall C:\Users\guowangli\AppData\Roaming\npm\node_modules\@angular\cli
> node ./bin/postinstall/script.js
+ @angular/cli@9.1.6
updated 1 package in 25.494s
C:\Users\guowangli>ng -v
'ng' is not recognized as an internal or external command,
operable program or batch file.
C:\Users\guowangli>
问题处理：
angular安装在C:\Users\guowangli\AppData\Roaming\npm\，需要将路径添加到系统环境变量path中。
如果ng --version正确显示版本信息，则表示已成功安装angular。
C:\Users\guowangli\AppData\Roaming\npm>ng -v
Available Commands:
add Adds support for an external library to your project.
analytics Configures the gathering of Angular CLI usage metrics. See https://angular.io/cli/usage-analytics-gathering.
build (b) Compiles an Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory.
deploy Invokes the deploy builder for a specified project or for the default project in the workspace.
config Retrieves or sets Angular configuration values in the angular.json file for the workspace.
doc (d) Opens the official Angular documentation (angular.io) in a browser, and searches for a given keyword.
e2e (e) Builds and serves an Angular app, then runs end-to-end tests using Protractor.
generate (g) Generates and/or modifies files based on a schematic.
help Lists available commands and their short descriptions.
lint (l) Runs linting tools on Angular app code in a given project folder.
new (n) Creates a new workspace and an initial Angular app.
run Runs an Architect target with an optional custom builder configuration defined in your project.
serve (s) Builds and serves your app, rebuilding on file changes.
test (t) Runs unit tests in a project.
update Updates your application and its dependencies. See https://update.angular.io/
version (v) Outputs Angular CLI version.
xi18n (i18n-extract) Extracts i18n messages from source code.
For more detailed help run "ng [command name] --help"
C:\Users\guowangli\AppData\Roaming\npm> ng --help
Lists available commands and their short descriptions.
usage: ng help [options]
options:
--help
Shows a help message for this command in the console.
C:\Users\guowangli\AppData\Roaming\npm> ng version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 9.1.6
Node: 12.16.0
OS: win32 x64
Angular:
...
Ivy Workspace:
Package Version
------------------------------------------------------
@angular-devkit/architect 0.901.6
@angular-devkit/core 9.1.6
@angular-devkit/schematics 9.1.6
@schematics/angular 9.1.6
@schematics/update 0.901.6
rxjs 6.5.4
C:\Users\guowangli\AppData\Roaming\npm>
行动是绝望的解药！
欢迎转载和引用，但请在明显处保留原文链接和原作者信息!
本博客内容多为个人工作与学习的记录，少数内容来自于网络并略有修改，已尽力标明原文链接和转载说明。如有冒犯，即刻删除！
以所舍，求所得，有所获，方所成。
