0

I can't believe this isn't mentioned anywhere on the internet nor in the official NativeScript docs.

How do you share imports between a web app and a native app?

The following works when running the app in a native environment with npm run android:

import {App} from '~/app/shared/constants/app.constant';

But then if I run it with ng serve to run my app in the browser it says

Cannot find module '~/app/shared/constants/app.constant'.

If I try to define custom paths in my tsconfig.json:

"paths": {
    "~/*": [
        "src/*"
    ],
    "*": [
        "./node_modules/tns-core-modules/*",
        "./node_modules/*"
    ],
    "@components/*": ["src/app/shared/components/*"],
    "@constants/*": ["src/app/shared/constants/*"]
}

And then doing:

import {App} from '@constants/app.constant';

Running this with ng serve works but GUESS WHAT, it doesn't work when running the app with npm run android.

You can't check which platform you're running in either and decide how the imports look because then you get "duplicate imports" error due to the same thing being imported twice in the same file.

Can someone please help me before I go insane?

EDIT:

I ran this command to generate the project:

ng new -c=@nativescript/schematics foo-project --shared --style=scss

As described here.

This is the tsconfig.json:

{
    "compileOnSave": false,
    "compilerOptions": {
        "outDir": "./dist/out-tsc",
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es5",
        "typeRoots": [
            "node_modules/@types"
        ],
        "lib": [
            "es2017",
            "dom",
            "es6",
            "es2015.iterable"
        ],
        "baseUrl": ".",
        "paths": {
            "~/*": [
                "src/*"
            ],
            "*": [
                "./node_modules/tns-core-modules/*",
                "./node_modules/*"
            ],
            "@components/*": ["src/app/shared/components/*"],
            "@constants/*": ["src/app/shared/constants/*"]
        }
    },
    "exclude": [
        "**/*.tns.ts",
        "**/*.android.ts",
        "**/*.ios.ts",
        "**/*.spec.ts"
    ]
}
Chrillewoodz
  • 27,055
  • 21
  • 92
  • 175
  • Can you try something other than `~`? Tilde can be reserved for home directory in some systems. – sabithpocker Oct 26 '18 at 10:16
  • @sabithpocker Only thing I can come up with that should work is relative imports.. but when I tried to relatively import `environment` that failed on mobile as well... Or did you mean change the actual character? – Chrillewoodz Oct 26 '18 at 10:23
  • Yes, I meant to change the actual character `~` to `@hey` just to check, if others like `@components` is working fine. – sabithpocker Oct 26 '18 at 10:26
  • @sabithpocker Nah I get the same issue. – Chrillewoodz Oct 26 '18 at 10:29
  • Can you show the complete `tsconfig.json`? Hope you have a baseUrl defined. – sabithpocker Oct 26 '18 at 10:41
  • @sabithpocker Added it to question, there's also a guide on how to try this yourself. – Chrillewoodz Oct 26 '18 at 10:46
  • Will check this later today. Do check the [module resolution guide](https://www.typescriptlang.org/docs/handbook/module-resolution.html). There is a debug option using `tsc --traceResolution` – sabithpocker Oct 26 '18 at 10:51
  • If you are using "paths" to create aliases you also need to make a change to webpack.config.js to keep the paths in sync: https://stackoverflow.com/questions/40443806/webpack-resolve-alias-does-not-work-with-typescript/52967649#52967649 – Michael Kang Oct 28 '18 at 19:51

0 Answers0