# Upgrading from v9 to v12

The main feature in `prestations-ng` v12 is the update of the `@angular/*` peer dependencies
to `^9.0.0`.

Some deprecated features from `prestations-ng` have also been removed. See below for more information.

## Updating Angular

`prestations-ng` now supports Angular 9. You can follow the Angular update guide
at this address:

[https://update.angular.io/#8.0:9.0](https://update.angular.io/#8.0:9.0)

```bash
yarn global add @angular/cli@9
ng update @angular/core@8 @angular/cli@8
ng update @angular/cli@9 @angular/core@9
yarn add tslib@^1.10.0
yarn add @angular-devkit/build-angular@~0.901.9 --dev
yarn add @fortawesome/free-regular-svg-icons@^5.0.0
yarn add iban@~0.0.14
ng update @dsivd/prestations-ng@12
ng update ng-http-loader@7
ng update \
    @types/jasmine \
    @types/node \
    ts-node \
    tslint
yarn upgrade
```

Then:

- remove `"aot": true,` from `projects->[YOUR_PROJECT_NAME]->architect->build->configurations->production`
- in meta.service.ts, update the code related to the dictionary's observable:

```ts
...
this.dictionaryService.getDictionary(), // old code
// replace it with
this.dictionaryService.getDictionary().pipe(first()), // new code
...
```

- fix any compilation errors due to CLI apps compiling in `AOT mode` by default due to `Ivy`
    - [Ivy compatibility guide](https://angular.io/guide/ivy-compatibility)
- fix any `tslint` errors such as `TestBed.inject` instead of `TestBed.get`
- fix any tests being broken due to updating `@types/jasmine`

## Deprecated Features Removed

The following components, attributes or methods have been removed.

### foehn-address component

- Removed:

    - Component `foehn-address.component.ts` (selector: **foehn-address**)
    - Model `foehn-address.type.ts` (FoehnAddress)

- Replaced by:

    - Component [foehn-display-address.component.ts](projects/prestations-ng/src/foehn-address/foehn-display-address.component.ts)
    - Model `address.type.ts` (Address)

### foehn-upload component

- Removed:

    - Component `foehn-simple-upload.component.ts` (selector: **foehn-upload**)
    - Service `upload.service.ts` (UploadService)

- Replaced by:

    - Component [foehn-multi-upload.component.ts](projects/prestations-ng/src/foehn-upload/foehn-multi-upload/foehn-multi-upload.component.ts)
    - Service [multi-upload.service.ts](projects/prestations-ng/src/foehn-upload/foehn-multi-upload/multi-upload.service.ts)

**NB: See section [Migrating from foehn-upload to foehn-multi-upload component](https://dsi-vd.github.io/prestations-ng/upload) for more details on replacement process.**

### appInfo() from application-info service

- Removed:

    - getter `appInfo()` returning `ApplicationInfo` in [application-info.service.ts](projects/prestations-ng/src/sdk-appinfo/application-info.service.ts)

- Replaced by:

    - getter `data()` returning an `Observable<ApplicationInfo>` in [application-info.service.ts](projects/prestations-ng/src/sdk-appinfo/application-info.service.ts)

### isProduction() from foehn-header component

- Removed:

    - public function `isProduction()` returning a `boolean` because using deleted getter `appInfo`

- Replaced by:

    - public variable `isProduction` returning an `Observable<boolean>` on which you can either `subscribe` or `pipe async` in your view

### getEnvironment() from foehn-header component

- Removed:

    - public function `getEnvironment()` returning a `string` because using deleted getter `appInfo`

- Replaced by:

    - No replacement

### getEnvironmentLabel() from foehn-header component

- Function `getEnvironmentLabel` has changed signature and now take `ApplicationInfo` as a parameter instead of using deleted getter `appInfo` in its algorithm

## Contributing to prestations-ng

Since `prestations-ng` has moved on to Angular 9, it now compiles using `Ivy`. Your project being as well in Angular 9, `Ivy` is not able to compile a symlink or at least not for now (See [Ivy error](https://github.com/angular/angular/issues/35399#issuecomment-603503473)). To link your application with prestations-ng, you will need to follow a couple of steps listed below :

### Step 1: Create a new tsconfig file

In your `front/src`, create a new file named: `tsconfig.app.symlink.json` and add the following code into it:

```json
{
    "extends": "./tsconfig.app.json",
    "angularCompilerOptions": {
        "enableIvy": false
    }
}
```

### Step 2: Modify angular.json

At the root of your project, you should have a `angular.json` file.

NB: replace `[YOUR_PROJECT_NAME]` with your project name (i.e. `skeleton`).

#### Make sure to:

- have `aot` parameter to `true` in `projects->[YOUR_PROJECT_NAME]->architect->build->options`

```json
{
    "projects": {
        "[YOUR_PROJECT_NAME]": {
            "architect": {
                "build": {
                    "options": {
                        "aot": true
                    }
                }
            }
        }
    }
}
```

- remove `"aot": true,` from `projects->[YOUR_PROJECT_NAME]->architect->build->configurations->production`

#### Add new parameter `symlink`

In `projects->[YOUR_PROJECT_NAME]->architect->build->configurations`, add `symlink` with 2 parameters:

- `aot` parameter to `false`
- `tsConfig` pointing to your new tsConfig file.

```json
{
    "projects": {
        "[YOUR_PROJECT_NAME]": {
            "architect": {
                "build": {
                    "configurations": {
                        "symlink": {
                            "aot": false,
                            "tsConfig": "src/tsconfig.app.symlink.json"
                        }
                    }
                }
            }
        }
    }
}
```

In `projects->[YOUR_PROJECT_NAME]->architect->serve->configurations`, add `symlink` with 1 parameter:

- `browserTarget` parameter to `false`

```json
{
    "projects": {
        "[YOUR_PROJECT_NAME]": {
            "architect": {
                "serve": {
                    "configurations": {
                        "symlink": {
                            "browserTarget": "[YOUR_PROJECT_NAME]:build:symlink"
                        }
                    }
                }
            }
        }
    }
}
```

### Step 3: Modify package.json

In your `package.json` located at the root of your application, add `start:symlink` which will load your new symlink configuration.

```json
{
    "scripts": {
        "start:symlink": "ng serve --configuration=symlink"
    }
}
```
