rafael-pl07C3/1. Angular.md

See how to install a specific version of the nodeJS.

Installing

Globally

$ npm i -g @angular/cli

Manually

Create ~/package.json file.

$ npm init

$ npm i --no-optional @angular/cli

Obs.: Sometimes you’ll have to install individually a specific version requested by the each package after you try to install the Angular, and sometimes you will have test what version is the more appropriate; the packages is installed in ~/node_modules, but you can set prefix in ~/.npmrc and put node_modules folder in another path, but nvm doesn’t is compatible with prefix, so don’t use both.

Edit ~/package.json file remove dependencies key (cause' this package doesn’t refer to an Angular project), and add "bin": {"ng": "..."} with ng path (.../node_modules/@angular/cli/bin/ng) to this key. So, run:

$ npm link

Ejecting to use Node Project (with webpack) based instead Angular Project

$ ng eject

Obs.: a webpack.config.js file will be created in root of project, so use $ npm start to start project.

To use ng s or npm start in the same project, remove @ngtools/webpack from node_modules/@angular/cli/node_modules/ and keep installed in node_modules; in .angular-cli.json keep up project.ejected as false.

Starting application

Inside the folder of projet (when Angular is installed), run

$ ng s

Obs.:

sometimes this command will complain about @ngtools/webpack installed in more than one place. So remove it from .../node_modules/@angular/cli/node_modules/@ngtools/webpack manually;

If you want to choose dinamically a port, pass --port=0 and --open to ng command. To pass manually a port, just pass --port=<port>;

to not reload the page after build, use --liveReload false flag.

Testing in browser

Put at URL bar localhost:<port>. The default port is 4200.

Creating a new front-end application

$ ng new <app>

Generating a component

$ ng g c <path>

Obs.: restart server on create a new component.

Generating a module

$ ng g m <path>

Generating a service

$ ng g s <path>

Setting a default style preprocessor

$ ng set defaults.styleExt <extension>

The file will be created at src/app/<path>.

Angular Libraries

Generating

$ ng g library <library-name>

Configuration files to make build with Organization name

The library path can contain @<organization-name>/ to indicate that package are encapsulated to an organization, because the package belongs to it. The files below must be adapted its keys that reference paths. They must contain the @<organization-name>/.

<project-name>/angular.json

{
  "projects": {
    "<project-name>": {
      "architect": {
        "build": {
          "options": {
            ...
          }
        }
      }
    },
    "<library-name>": {
      "sourceRoot": "projects/<library-name>"
      "architect": {
        "test": {
          "options": {
            ...
          }
        },
        "lint": {
          "options": {
            "tsconfig": [
              ...
            ]
          }
        }
      }
    }
  }
}

<project-name>/projects/<library-name>/ng-package.json

{
  ...
  "dest": "../../dist/@<organization-name>/<library-name>"
  ...
}

The dest property sets the path to call the library file index implicitly (the compiler will create a index.d.ts file), this file is referenced in lib.entryFile property with public-api.ts value, or, if you are working with namespace, with the file name where the namespace was defined.

Note.: all source code must be nested to directory or subdirectory from the ng-package.json file.

<project-name>/projects/<library-name>/package.json

{
  "name": "@<organization-name>/<library-name>"
  ...
}

To support accessing nested libraries in subpaths.

<project-name>/tsconfig.json

{
  "compileOptions": {
    "paths": {
      "<library-name>/*": [
        "dist/@<organization-name>/<library-name>/*"
      ]
    }
  }
}

Building

Inside the project path, run:

$ ng build <library-name> --prod

For just test purpose don't use the flag --prod.

Note.: the library-name must not contain @<organization-name>/.

Publishing

Inside the folder dist/@<organization-name>/<library-name>, run that.

Working with subfolders

All library nested in source root library should contain ng-package.json file at least, so it'll be compiled when you run $ ng build.

rafael-pl07C3/1. Angular.md

Select an option

No results found

Select an option

No results found

Installing

Globally

Manually

Ejecting to use Node Project (with webpack) based instead Angular Project

Starting application

Testing in browser

Creating a new front-end application

Generating a component

Generating a module

Generating a service

Setting a default style preprocessor

Angular Libraries

Generating

Configuration files to make build with Organization name

Building

Publishing

Working with subfolders