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

I think it is next to impossible considering the structure both of them use. Can you please share some code or @merlin what kind of modules you want to share. — Black Mamba
– Black Mamba, Commented Apr 13, 2019 at 14:07
Not sure if this would be an acceptable solution for you, but have you considered using Nrwl Nx monorepo? — Lazar Vuckovic
– Lazar Vuckovic, Commented Apr 15, 2019 at 23:21
Also, you can read this article for Sharing (Ngrx-based) logic between Angular7 web app and Ionic4 mobile app medium.com/agorapulse-stories/… — shamim khan
– shamim khan, Commented Apr 16, 2019 at 5:29

Arghya Saha · Accepted Answer · 2019-04-13 13:53:47Z

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

Abdun Nahid · Accepted Answer · 2019-04-16 05:20:30Z

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.

answered Apr 16, 2019 at 5:20

Abdun Nahid

3114 silver badges10 bronze badges

3 Comments

shamim khan Over a year ago

also you can read this article medium.com/agorapulse-stories/…

Nico Timmerman Over a year ago

Publishing on NPM is not needed. you can also use local file references in you package.json: "@yourapp/yourmodule": "file:dist/yourapp/yourmodule", Please bare in mind that you need to run npm i after you add this to you package.json.

Abdun Nahid Over a year ago

Using NPM can be very helpful for versioning and updating. And yes that is of course possible @NicoTimmerman

Collectives™ on Stack Overflow

Sharing code between Ionic and Angular application

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related