Description
The new code-shared structure is based on remapped imports and we strongly recommended to use them in code-shared applications. This way, typescript compiler will take the correct file (with .tns
or .web
extension) depending on the platform you're building for - web or mobile. Here are the steps that you need to follow in order to migrate existing code-shared application with legacy structure to the new structure:
Setup correctly paths
property inside tsconfig
files
tsconfig.json
{
"compilerOptions": {
"paths": {
"@src/*": [
"src/*.android.ts",
"src/*.ios.ts",
"src/*.tns.ts",
"src/*.web.ts",
"src/*.ts"
]
}
}
}
tsconfig.tns.json
{
"compilerOptions": {
"paths": {
"@src/*": [
"src/*.tns.ts",
"src/*.ts"
]
}
}
}
tsconfig.app.json
{
"compilerOptions": {
"paths": {
"@src/*": [
"src/*.web",
"src/*"
]
}
}
}
Fix all relative imports inside project
The relative imports should be migrated to starts with @src
as only non-relative imports can be resolved through path mapping and TypeScript compiler is already configured to understand @src
symbol. This can be achieved automatically using the @nativescript/tslint-rules package.
Setup @nativescript/tslint-rules
Install it into project
npm i @nativescript/tslint-rules --save-dev
Configure tslint.json
{
"rulesDirectory": [
"node_modules/codelyzer",
"@nativescript/tslint-rules"
],
"rules": {
"prefer-mapped-imports": [
true,
{
"prefix": "@src/",
"prefix-mapped-to": "src/",
"base-url": "."
}
]
}
}
Execute the rules
./node_modules/.bin/tslint --project ./tsconfig.tns.json --fix
After that all relative imports should be changed and should start with @src
symbol.