Sharing code between Ionic and Angular application

Question

I have a project where I have multiple Angular Apps, and an ionic application. I have a number of classes (models) and also services that can be shared between all the applications.

My first thought was to place the shared files into their own separate directory/folder and create a symbolic link. I have attempted to launch the ionic application and I'm receiving the following :

Module build failed: Error: /home/norman/Work/vem-shared/shared-services/table/table.service.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

After searching for this error message I came across the following, however, this is for a lower angular version (I'm using Angular 6 and Ionic 4). I also noticed a number of posts about symbolic links not working within the angular cli - which appears to be for the older version.

I wanted to find out whether any knows how to resolve this error, and whether symbolic links work within an angular application/ionic application ?

Thanks

Answer 1

For Angular webapp the solution seems pretty straight forward by adding "preserveSymlinks": true to the angular.json file.

angular.json

{ 
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "my-project": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                       "outputPath": "target",
                       "index": "src/index.html",
                       "main": "src/main.ts",
                       "tsConfig": "src/tsconfig.app.json",
                       "polyfills": "src/showcase/polyfills.ts",
                       "preserveSymlinks": true,
...

Now if you want to create library with preserved symlinks then you have to add the same feature in the tsconfig.lib.json because for library you don't have the angular.json

tsconfig.lib.json

"angularCompilerOptions": {
    "annotateForClosureCompiler": true,
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "enableResourceInlining": true,
    "preserveSymlinks": true   },

For IONIC apps, symlink issue is a long pending one and it seems the solution is still in an open PR. You can track the progress here.

You can read more about the Angular webapp issue here

Answer 2

You can create Angular Module with the shareable Services/Classes and put it onto NPM. Then install the module on all your applications and use it. You can update the module and keep updated on all your Application Code bases.