cd /path/to/project && git pull origin master && /usr/bin/ng build --aot && git add . && git commit -m "build automatically" && git push origin master && rsync -av /path/to/project/ /path/to/html/repo/ && cd /path/to/html/repo/ && git add . && git commit -m "add everything" && git push -u origin --all
*Record Scratch* *Freeze Frame* now i bet you're wondering how i got in this situation...
It all starts with a deep hatred of npm, node js, and all things javascript. Sure, like all hatred it is mostly irrational but that didn't stop us before so why should it stop us now? Anyway, I digress.
If you don't care about how the sausage is made, all you want is to throw your carcass of input typescript code on one end and get your sausages of single page application on the other. You want the framework to handle everything else. I mean you didn't agree to give up your first born for just a library, did you? (You don't remember doing so? Well, you did.)
Our story begins at the github repository for angular/angular-cli. Take a look at https://github.com/angular/angular-cli
On a fresh Ubuntu (xenial) system, you would do the following
apt-get update
apt-get -y upgrade
curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
sudo apt-get install -y nodejs
sudo apt-get install -y build-essential
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn
npm install -g @angular/cli
ng set --global packageManager=yarn
node --version
npm --version
yarn --version
ng --version
Ideally, you want to do this on a machine you will not use on a day to day basis but is on all the time and is connected to the Internet (maybe a $5 virtual private server on one of those places like Linode or Digital Ocean if you're independently wealthy) because who wants to be seen with Node on their primary computer?
In any case, now that we are ready with node, npm, yarn, and ng-cli, we can move on.
The next thing you do is create a new angular project. Go to a nice directory on that machine (ssh or whatever) and ng new:
Because you did things right (that is my way with ng set --global packageManager=yarn), you will see something like the following:
$ ng new blog
installing ng
create .editorconfig
create README.md
create src/app/app.component.css
create src/app/app.component.html
create src/app/app.component.spec.ts
create src/app/app.component.ts
create src/app/app.module.ts
create src/assets/.gitkeep
create src/environments/environment.prod.ts
create src/environments/environment.ts
create src/favicon.ico
create src/index.html
create src/main.ts
create src/polyfills.ts
create src/styles.css
create src/test.ts
create src/tsconfig.app.json
create src/tsconfig.spec.json
create src/typings.d.ts
create .angular-cli.json
create e2e/app.e2e-spec.ts
create e2e/app.po.ts
create e2e/tsconfig.e2e.json
create .gitignore
create karma.conf.js
create package.json
create protractor.conf.js
create tsconfig.json
create tslint.json
Successfully initialized git.
Installing packages for tooling via yarn.
Installed packages for tooling via yarn.
Project 'blog' successfully created.
npm scrubs will see things a little differently but at the end of the day it is about the same thing (barf!)
If you type tree blog, you will see the project directory structure and give up hope of ever understanding angular 2 or 2+ completely
blog
├── e2e
│ ├── app.e2e-spec.ts
│ ├── app.po.ts
│ └── tsconfig.e2e.json
├── karma.conf.js
├── node_modules
...
├── package.json
├── protractor.conf.js
├── README.md
├── src
│ ├── app
│ │ ├── app.component.css
│ │ ├── app.component.html
│ │ ├── app.component.spec.ts
│ │ ├── app.component.ts
│ │ └── app.module.ts
│ ├── assets
│ ├── environments
│ │ ├── environment.prod.ts
│ │ └── environment.ts
│ ├── favicon.ico
│ ├── index.html
│ ├── main.ts
│ ├── polyfills.ts
│ ├── styles.css
│ ├── test.ts
│ ├── tsconfig.app.json
│ ├── tsconfig.spec.json
│ └── typings.d.ts
├── tsconfig.json
├── tslint.json
└── yarn.lock
2751 directories, 19708 files
So here's what we do:
- cd /path/to/project
- git pull origin master
- /usr/bin/ng build --aot
- git add .
- git commit -m "build automatically"
- git push origin master
- rsync -av /path/to/project/ /path/to/html/repo/
- cd /path/to/html/repo/
- git add .
- git commit -m "add everything"
- git push -u origin --all
- cd /path/to/project
- git pull origin master
- /usr/bin/ng build --aot --prod
- rsync -av /path/to/project/ /path/to/html/repo/
- cd /path/to/html/repo/
- git add .
- git commit -m "add everything"
- git push -u origin --all