Getting started

Prerequisite

NgOP depends on Angular framework and OpenAPI, therefore it is important that you know how they work and how to use them.

Installation

info

NgOP is not publicly available right now

To install it you need to run following command:

npm install --save-dev ngop-cli ngop-dev@ngop-dev ngop-prod

This command will install NgOP's:

• CLI package
• production version
• development version of NgOP under alias name ngop-dev this is very important because without it it would be installed under the same name as production package and we do not want that.

After installing ngop-cli you will be able to access NgOP CLI with npx ngop command. In the next steps you will learn how to use it. If you want to learn more about CLI check out it's documentation.

For local development check out Development Mode.

Dev app initialisation

Before you can use NgOP stubs you have to initialise it within your application. To do that you should use CLI init command:

npx ngop init [OPTIONS]

Options:

• --root=<<path>> - relative path to your angular project (where angular.json can be found). Use it in case you run command outside of the repository.
• --verbose - use it to see debuging logs
• --force - use it override existing NgOP development project
• --project=<<angular_project>> - name of the angular project you want initialise. If not given, project set as the default one will be used.

Running init script will create an NgOP development project which you can start as any other angular project. At the end of the script execution you will see information about the name of the new angular project which will represent the NgOP development application you can use and the command to start it:

npx ng server ngop-dev-app-for-<<your_project_name>>

Starting the dev app

To start working with NgOP you have to do 2 things:

1. Start NgOP's dev app

Run ngop run [OPTIONS] which will start server that delivers stubs to your application's REST calls.

Options:

• --port=<<number>> REQUIRED - port on which dev app should run by localhost.
• --root=<<path>> - relative path to your angular project (where angular.json can be found). Use it in case you run command outside of the repository.
• --verbose - use it to see debuging logs

2. Start initialised Angular project

At the end of init script you will ger the name of your NgOP development app.

Project's name follows this pattern ngop-dev-app-for-<<your_project_name>> where your_project_name is the name of the project you provided by initialisation or the default project's name.

Development mode

Standard version of NgOP is production ready. It contains all minified code and little debugging information to make it as slim as possible.

For development it is recommended to use ngop-dev package. It contains same functionalities and comes with additional development tools and full debugging information (like error/wanring/info messages).

It has been designed to be seamlessly exchangeable with production version of NgOP, to prevent unnecessary changes and potentital bugs or time loss.

note

We will be creating new configuration file to make it easier to maintain and use.

Next step is to create a mapping within typescript configuration to tell application to use development version of NgOP.

To do this we will create new ts config file tsconfig.dev.json with following entries:

{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "paths": {
      "ngop/*": [ "node_modules/ngop-dev/*" ]
    }
  }
}

We extend ./tsconfig.app.json file because it is the default one set during application generation.

What we did here is we added "path" to map original NgOP package to the development package.

Now we need to extend application's angular configuration and make it use our newly created config file. To do it open angular.json and change your project's config data as follows:

"architect": {
  ...
  "build": {
    ...
    "configurations": {
      ...
      "development": {
        ...
        "tsConfig": "tsconfig.dev.json"
      }
    }
  }
}

Now you can start your application by running ng serve --configuration development. We recommed adding it to your package.json as a script.