use the build command to build files and copy the files in dist folder to destination server

Angular CLi Build Command

ng build --prod then copy all file in dist folder

for build in other folder, ng build --prod --base-href /{foldername}/

environment variable

export const environment = {
  production: false,
  navBarBackgroundColor: 'blue'
};
1
2
3
4

in the relative component which use the varible

//make sure it is always environment not environment.prod (angular will auto determine by flag --prod in ng build)
import { environment } from './../environments/environment'

//...
export class appComponent {
    backgroundColor = environment.navBarBackgroundColor

}
1
2
3
4
5
6
7
8

in html

<nav
[style.backgroundColor]='backgroundColor'
>

</nav>
1
2
3
4
5

Custom Environment

new file in environments folder

environment.test.ts

export const environment = {
  production: false,
  navBarBackgroundColor: 'purple'
};
1
2
3
4

In angular-cli.json

"environments": {
"dev": "environments/environment.ts",
"test": "environments/environment.test.ts",
"prod": "environments/environment.prod.ts"
}
1
2
3
4
5

run ng serve --environment=test or ng build --environment=test

tslint

run ng lint --fix or

  1. install tslint extension in vscode to fix
  2. Shift + Ctrl + P
  3. tslint: Fix all auto-fixable problems

firebase config

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites":[
        {
            "source": "**",
            "destination": "/index.html"
        }
    ]

  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Custom script for deployment

go to package.json

"scripts": {
    "ng": "ng",
    //...
    "e2e": "ng e2e",
    "deploy:firebase": "ng build --prod && firebase deploy"
},
1
2
3
4
5
6

in any cmd, run npm run deploy:firebase

Last Updated: 1/14/2019, 12:15:15 AM