Angular CLI special cases

to start using angular it’s simple with just 4 steps.

npm i -g @angular/cli
npm new project_name
cd project_name
ng serve

1. ng update

note: Removing the ng init & ng update commands because their current implementation causes more problems than it solves. Once RC is released, we won't need to use those to update anymore as the step will be as simple as installing the latest version of the CLI.

if you are using old CLI versions update your current angular cli project by typing this command

ng update

2. option for using another package manager instead of npm

ng set --global packageManager=yarn
ng set --global packageManager=cnpm

3. using angular 4

ng new project_name --ng4

4. using css preprocessor

angular cli supported the three major css preorocessor ( less , sass and stylus ) , by defult style extention used when create new project is css you can change that by typing this command

ng new project_name --style={scss , sass , less or styl }
ng init project_name --style={scss , sass , less or styl }

5. sourcemaps for css or any preprocessor files

when you type ng serve by default angular cli doesn't include sourcemaps files for css files but you can include it by typing this command

ng serve -sm -ec
ng serve --sourcemap --extractCss

6. proxy option

If your server side lives under different host with Angular CLI you can easily define proxy configuration

Create a json file (proxy.config.json for example) with that configuration.

{
    "/api/*": {
        "target": "http://test.dev",
        "changeOrigin": true,
        "secure": false,
        "logLevel": "debug"
    }
}

then run this command

ng serve --proxy-config proxy.config.json
ng serve -pc proxy.config.json

7. Add CSS/JavaScript third party libraries

note: starting from beta 32 configuration file angular-cli.json has been renamed to .angular-cli.json.

open angular-cli.jsonadd location of your third party library inside styles array for css or scripts for JavaScript libraries

      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "styles.css"
      ],
      "scripts": [
        "../node_modules/moment/src/moment.js"
      ],

If you enjoyed this article, please click that little green heart below. That would be incredible.