Bis Sirakov
Bis Sirakov

Reputation: 61

NativeScript - Migrating Project Structure

I want to migrate an Angular app to a {N} code-sharing structure. I used this article to get started. Would you help me solve the below issue? It seems like a mis-configuration.

When I execute:

ng add @nativescript/schematics

I get the following error:

success Saved 1 new dependency.
info Direct dependencies
└─ @nativescript/[email protected]
info All dependencies
└─ @nativescript/[email protected]
✨  Done in 3.25s.
Installed packages for tooling via yarn.
Two or more projects are using identical roots. Unable to determine project using current working directory. Using default workspace project instead.
    Reading Project Settings
    Project settings:
    {
      "root": "",
      "sourceRoot": "src",
      "mainName": "main",
      "mainPath": "src/main.ts",
      "tsConfig": "src/tsconfig.json",
      "entryModuleClassName": "RootModule",
      "entryModuleImportPath": "./root.module",
      "entryModuleName": "Root",
      "entryModulePath": "/src/root.module.ts",
      "entryComponentClassName": "RootComponent",
      "entryComponentImportPath": "./root.component",
      "entryComponentName": "Root",
      "entryComponentPath": "/src/root.component.ts",
      "indexAppRootTag": "app-root"
    }
    Adding @nativescript/schematics to angular.json
    Adding {N} files
    Adding App_Resources
    Adding NativeScript specific exclusions to .gitignore
    Adding NativeScript run scripts to package.json
    Adding NativeScript Project ID to package.json
    Excluding NativeScript files from web tsconfig
    Adding Sample Shared Component
Two or more projects are using identical roots. Unable to determine project using current working directory. Using default workspace project instead.
Two or more projects are using identical roots. Unable to determine project using current working directory. Using default workspace project instead.
Specified module does not exist

My @angular packages are 7.1.1

I use yarn as a package manager.

This is my angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "my-ns-project": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              // assets
            ],
            "styles": [
              // styles
            ],
            "scripts": [
              // scripts
            ]
          },
          "configurations": {
            "hmr": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.hmr.ts"
                }
              ]
            },
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "my-ns-project:build"
          },
          "configurations": {
            "hmr": {
              "browserTarget": "my-ns-project:build:hmr"
            },
            "production": {
              "browserTarget": "my-ns-project:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "my-ns-project:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "tsConfig": "src/tsconfig.json",
            "main": "src/test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "src/polyfills.ts",
            "styles": [
              // styles
            ],
            "scripts": [
              // scripts
            ],
            "assets": [
              // assets
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.json"
            ],
            "exclude": []
          }
        }
      }
    },
    "my-ns-project-e2e": {
      "root": "",
      "sourceRoot": "",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "./protractor.conf.js",
            "devServerTarget": "my-ns-project:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "e2e/tsconfig.json"
            ],
            "exclude": []
          }
        }
      }
    }
  },
  "defaultProject": "my-ns-project",
  "cli": { "defaultCollection": "@nativescript/schematics" },
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "app",
      "styleext": "css"
    },
    "@schematics/angular:directive": {
      "prefix": "app"
    }
  }
}

Any help is highly appreciated!

Upvotes: 1

Views: 455

Answers (1)

Baskar Rao
Baskar Rao

Reputation: 470

Need to follow the following steps

  1. Create a new angular app using - ng new my-app
  2. Navigate to my-app folder
  3. Execute command - ng add @nativescript/schematics
  4. Finally execute tns run android --bundle - this will generate an auto generated page in emulator.

I see some differences in the project settings.

enter image description here

Upvotes: 1

Related Questions