search

NativeScript / nativescript-schematics

nativescript, mobile, schematics, angular
Apache License 2.0
185 stars 26 forks source link

ng add command throwing error when adding to a bare-bones project #238

Open quincarter opened 5 years ago

quincarter commented 5 years ago

TLDR this happens when you run the command: Failed to find generated component file /auto-generated.component.css. Please contact the @nativescript/schematics author.

Environment package.json

  "name": "sample-project-for-code-sharing",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.0",
    "@angular/common": "~8.2.0",
    "@angular/compiler": "~8.2.0",
    "@angular/core": "~8.2.0",
    "@angular/forms": "~8.2.0",
    "@angular/platform-browser": "~8.2.0",
    "@angular/platform-browser-dynamic": "~8.2.0",
    "@angular/router": "~8.2.0",
    "rxjs": "~6.5.2",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.802.1",
    "@angular/cli": "~8.2.1",
    "@angular/compiler-cli": "~8.2.0",
    "@angular/language-service": "~8.2.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

Describe the bug

 ng add @nativescript/schematics
Skipping installation: Package already installed
    Reading Project Settings
    Project settings:
    {
      "root": "",
      "sourceRoot": "src",
      "mainName": "main",
      "mainPath": "src/main.ts",
      "prefix": "one-space",
      "tsConfig": "tsconfig.app.json",
      "entryModuleClassName": "AppModule",
      "entryModuleImportPath": "./app/app.module",
      "entryModuleName": "App",
      "entryModulePath": "src/app/app.module.ts",
      "entryComponentClassName": "AppComponent",
      "entryComponentImportPath": "./app.component",
      "entryComponentName": "App",
      "entryComponentPath": "src/app/app.component.ts",
      "indexAppRootTag": "one-space-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
    Modifying web tsconfig
    Modifying tslint.json
    Adding Sample Shared Component
Failed to find generated component file /auto-generated.component.css. Please contact the @nativescript/schematics author.

To Reproduce fork the project listed below then run:

Expected behavior Schematic would add what is needed and not throw an error.

Sample project This is a base project spun up with ng new and it still does not work -- this is prior to running the ng add command. Feel free to fork it. https://github.com/quincarter/code-sharing-sample

Additional context Trying to spin up an initial code sharing project and getting that error above with the ng add @nativescript/schematics command.

a-syde commented 5 years ago

The problem in existing projects is scss styles. In your exisitng project change your styles from scss to css. First in angular.json and then in your components.

Eventually add schematics normally with: ng add @nativescript/schematics

Though if you decide to use scss, you can create new project using; ng new --collection=@nativescript/schematics your-app --shared --style=scss

NgxDev commented 5 years ago

@a-syde that's how I always create my projects, with --style=scss, but I still get the same error. Just tried again, creating a new project, on the latest versions of Schematics, Angular CLI and NativeScript. @angular/cli: 8.3.0 nativescript: 6.0.3 @nativescript/schematics: 0.7.1

quincarter commented 5 years ago

I actually did try that with scss and with css and had the same issue both times

rajesh5sep-code commented 5 years ago

Yes this works when I change my default styles file to css instead of scss. I think this needs to be fixed.

quincarter commented 5 years ago

I actually did just spin up a project with css and it worked. But i feel like this does not solve the issue if i want to use scss instead of css

ShahnavazKazi commented 5 years ago

I am trying to migrate an existing project (Issue #246) which is quite big so it's not practical to convert all the scss to css in order to add nativescript support. Any other way to get around this issue?

offroadkev commented 5 years ago

I see there is a fix in Ready for Test. Thanks @Fatme

Curious when we can start using this for our existing scss projects. I'm excited. I've spent the last week generating, modifying and trashing ng + nativescript apps and I'm super stoked to start in on an existing project that I have in an Angular workspace built with scss stylesheets.

Fatme commented 5 years ago

@vegaskev,

You can try it using the next version of @nativescript/schematics - ng add @nativescript/schematics@next.

ShahnavazKazi commented 5 years ago

@Fatme

I tried with what you suggested above but ran into another issue (failing with error Invalid rule result: Instance of class Promise), please see below:

+ @nativescript/schematics@0.7.2-2019-10-14-112615-01 updated 1 package in 20.235s Installed packages for tooling via npm. Reading Project Settings Project settings: { "root": "", "sourceRoot": ".", "mainName": "main", "mainPath": "src/main.ts", "prefix": "app", "tsConfig": "src/tsconfig.app.json", "entryModuleClassName": "AppModule", "entryModuleImportPath": "./app/app.module", "entryModuleName": "App", "entryModulePath": "src/app/app.module.ts", "entryComponentClassName": "AppComponent", "entryComponentImportPath": "./app.component", "entryComponentName": "App", "entryComponentPath": "src/app/app.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 Modifying web tsconfig Modifying tslint.json Adding Sample Shared Component Invalid rule result: Instance of class Promise.

Any idea what could be the reason?

Fatme commented 5 years ago

Hey @ShahnavazKazi,

We're not able to reproduce your issue. Can you give us exact steps and the following information:

ShahnavazKazi commented 5 years ago

@Fatme - Kindly see below package.json and angluar.json:

package.json

{
    "name": "MyApp",
    "description": "My App",
    "version": "1.0.0",
    "private": true,
    "scripts": {
        "ng": "ng",
        "minjs": "gulp minify:appjs",
        "mincss": "gulp minify:appcss",
        "prestartg": "gulp default",
        "startg": "ng serve",
        "prestartgl": "gulp default:with:lib",
        "startgl": "ng serve",
        "start": "ng serve",
        "prebuildg": "gulp default",
        "buildg": "ng build",
        "prebuildgl": "gulp default:with:lib",
        "buildgl": "ng build",
        "build": "ng build",
        "build-aot": "ng build --aot",
        "build-release": "ng build --prod",
        "build-dev": "node --max-old-space-size=8192 ./node_modules/@angular/cli/bin/ng build --prod -c=dev",
        "build-uat": "node --max-old-space-size=8192 ./node_modules/@angular/cli/bin/ng build --prod -c=uat",
        "build-demosanity": "node --max-old-space-size=8192 ./node_modules/@angular/cli/bin/ng build --prod -c=demo-sanity",
        "build-demo": "node --max-old-space-size=8192 ./node_modules/@angular/cli/bin/ng build --prod -c=demo",
        "build-preprod": "node --max-old-space-size=8192 ./node_modules/@angular/cli/bin/ng build --prod -c=preprod",
        "build-prodsanity": "node --max-old-space-size=8192 ./node_modules/@angular/cli/bin/ng build --prod -c=prod-sanity",
        "build-prod": "node --max-old-space-size=8192 ./node_modules/@angular/cli/bin/ng build --prod -c=prod",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e",
        "gen-stats": "ng build --prod --stats-json",
        "bundle-report": "webpack-bundle-analyzer pkg/mint-app/stats.json"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "^0.803.3",
        "@angular/cli": "^8.3.3",
        "@angular/compiler-cli": "^8.2.5",
        "@angular/language-service": "^8.2.5",
        "@types/jasmine": "^3.4.0",
        "@types/jasminewd2": "^2.0.6",
        "@types/node": "^12.7.4",
        "browser-sync": "^2.26.7",
        "class-transformer": "^0.2.0",
        "codelyzer": "^4.5.0",
        "del": "^1.2.0",
        "gulp": "^3.9.1",
        "gulp-asset-versioning": "^0.1.2",
        "gulp-bower": "0.0.14",
        "gulp-cache-bust": "^1.4.1",
        "gulp-concat": "^2.5.2",
        "gulp-cssmin": "^0.2.0",
        "gulp-debug": "^2.0.1",
        "gulp-filter": "^2.0.2",
        "gulp-plumber": "^1.0.1",
        "gulp-print": "^2.0.1",
        "gulp-replace": "^0.6.1",
        "gulp-sass": "^4.0.2",
        "gulp-sequence": "^1.0.0",
        "gulp-sourcemaps": "^2.6.4",
        "gulp-uglify": "^3.0.1",
        "jasmine": "^2.4.1",
        "jasmine-core": "^3.2.1",
        "jasmine-spec-reporter": "^4.2.1",
        "karma": "^3.1.0",
        "karma-chrome-launcher": "^2.2.0",
        "karma-coverage-istanbul-reporter": "^2.0.5",
        "karma-jasmine": "^1.1.2",
        "karma-jasmine-html-reporter": "^1.3.1",
        "main-bower-files": "^2.13.1",
        "merge-stream": "^1.0.1",
        "natives": "^1.1.6",
        "path": "^0.12.7",
        "prettier": "^1.15.3",
        "protractor": "^5.4.1",
        "ts-node": "^7.0.1",
        "tslint": "^5.11.0",
        "typescript": "3.5.3",
        "uglify-es": "^3.3.9",
        "webpack-bundle-analyzer": "^3.4.1",
        "yargs": "^11.0.0"
    },
    "dependencies": {
        "@angular/animations": "^8.2.5",
        "@angular/cdk": "^8.1.4",
        "@angular/common": "^8.2.5",
        "@angular/compiler": "^8.2.5",
        "@angular/core": "^8.2.5",
        "@angular/forms": "^8.2.5",
        "@angular/http": "^7.2.15",
        "@angular/material": "^8.1.4",
        "@angular/platform-browser": "^8.2.5",
        "@angular/platform-browser-dynamic": "8.2.5",
        "@angular/router": "^8.2.5",
        "@angular/upgrade": "^8.2.5",
        "nativescript-angular": "^8.2.1",
        "nativescript-theme-core": "^2.0.17",
        "@nativescript/schematics": "^0.7.1",
        "@netbasal/ngx-content-loader": "^2.1.3",
        "@ng-bootstrap/ng-bootstrap": "^4.2.1",
        "@ngx-progressbar/core": "^5.3.1",
        "@ngx-progressbar/http": "^5.3.1",
        "adal-angular4": "^3.0.16",
        "ag-grid-angular": "^21.1.0",
        "ag-grid-community": "^21.1.0",
        "angular": "1.6.2",
        "angular-in-memory-web-api": "^0.6.1",
        "bootstrap": "^4.3.1",
        "core-js": "^2.6.9",
        "d3": "^5.7.0",
        "dayjs": "^1.8.15",
        "font-awesome": "^4.7.0",
        "gulp-angular-templatecache": "^2.2.6",
        "ng-multiselect-dropdown": "^0.2.3",
        "ngx-avatar": "^3.2.0",
        "ngx-device-detector": "^1.3.5",
        "ngx-slick-carousel": "^0.4.4",
        "rxjs": "^6.3.3",
        "slick-carousel": "^1.8.1",
        "smoothscroll-polyfill": "^0.4.3",
        "underscore": "^1.9.1",
        "zone.js": "^0.8.26"
    }
}

Angular.json: 

    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "my-app": {
            "root": "",
            "sourceRoot": ".",
            "projectType": "application",
            "prefix": "mint",
            "schematics": {
                "@schematics/angular:component": {
                    "styleext": "scss"
                }
            },
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "pkg/my-app",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.app.json",
                        "assets": ["dist",
                        "assets",
                        "favicon.ico",
                        "src/favicon.ico",
                        "src/assets",
                        "frameRedirect.html",
                        "gulpfile.js",
                        "gulpconfig.json",
                        "package.json",
                        "Web.config"],
                        "styles": ["node_modules/slick-carousel/slick/slick.scss",
                        "node_modules/slick-carousel/slick/slick-theme.scss",
                        "src/styles.scss"],
                        "scripts": ["node_modules/slick-carousel/slick/slick.min.js"]
                    },
                    "configurations": {
                        "dev": {
                            "fileReplacements": [{
                                "replace": "src/environments/environment.ts",
                                "with": "src/environments/environment.dev.ts"
                            }],
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": true,
                            "extractCss": true,
                            "namedChunks": false,
                            "aot": true,
                            "extractLicenses": true,
                            "vendorChunk": true,
                            "buildOptimizer": true
                        },
                        "uat": {
                            "fileReplacements": [{
                                "replace": "src/environments/environment.ts",
                                "with": "src/environments/environment.uat.ts"
                            }],
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": true,
                            "extractCss": true,
                            "namedChunks": false,
                            "aot": true,
                            "extractLicenses": true,
                            "vendorChunk": true,
                            "buildOptimizer": true
                        },
                        "demo": {
                            "fileReplacements": [{
                                "replace": "src/environments/environment.ts",
                                "with": "src/environments/environment.demo.ts"
                            }],
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": true,
                            "extractCss": true,
                            "namedChunks": false,
                            "aot": true,
                            "extractLicenses": true,
                            "vendorChunk": true,
                            "buildOptimizer": true
                        },
                        "demo-sanity": {
                            "fileReplacements": [{
                                "replace": "src/environments/environment.ts",
                                "with": "src/environments/environment.demo-sanity.ts"
                            }],
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": true,
                            "extractCss": true,
                            "namedChunks": false,
                            "aot": true,
                            "extractLicenses": true,
                            "vendorChunk": true,
                            "buildOptimizer": true
                        },
                        "preprod": {
                            "fileReplacements": [{
                                "replace": "src/environments/environment.ts",
                                "with": "src/environments/environment.preprod.ts"
                            }],
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": true,
                            "extractCss": true,
                            "namedChunks": false,
                            "aot": true,
                            "extractLicenses": true,
                            "vendorChunk": true,
                            "buildOptimizer": true
                        },
                        "prod-sanity": {
                            "fileReplacements": [{
                                "replace": "src/environments/environment.ts",
                                "with": "src/environments/environment.prod-sanity.ts"
                            }],
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": true,
                            "extractCss": true,
                            "namedChunks": false,
                            "aot": true,
                            "extractLicenses": true,
                            "vendorChunk": true,
                            "buildOptimizer": true
                        },
                        "production": {
                            "fileReplacements": [{
                                "replace": "src/environments/environment.ts",
                                "with": "src/environments/environment.prod.ts"
                            }],
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": true,
                            "extractCss": true,
                            "namedChunks": false,
                            "aot": true,
                            "extractLicenses": true,
                            "vendorChunk": true,
                            "buildOptimizer": true
                        }
                    }
                },
                "serve": {
                    "builder": "@angular-devkit/build-angular:dev-server",
                    "options": {
                        "browserTarget": "mint-app:build",
                        "port": 25000
                    },
                    "configurations": {
                        "dev": {
                            "browserTarget": "mint-app:build:dev"
                        },
                        "uat": {
                            "browserTarget": "mint-app:build:uat"
                        },
                        "preprod": {
                            "browserTarget": "mint-app:build:preprod"
                        },
                        "prod-sanity": {
                            "browserTarget": "mint-app:build:prod-sanity"
                        },
                        "production": {
                            "browserTarget": "mint-app:build:production"
                        }
                    }
                },
                "extract-i18n": {
                    "builder": "@angular-devkit/build-angular:extract-i18n",
                    "options": {
                        "browserTarget": "mint-app:build"
                    }
                },
                "test": {
                    "builder": "@angular-devkit/build-angular:karma",
                    "options": {
                        "main": "src/test.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.spec.json",
                        "karmaConfig": "src/karma.conf.js",
                        "styles": ["src/styles.scss"],
                        "scripts": [],
                        "assets": ["src/favicon.ico",
                        "src/assets"]
                    }
                },
                "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                        "tsConfig": ["src/tsconfig.app.json",
                        "src/tsconfig.spec.json"],
                        "exclude": ["**/node_modules/**"]
                    }
                }
            }
        },
        "my-app-e2e": {
            "root": "e2e/",
            "projectType": "application",
            "schematics": {
                "@schematics/angular:component": {
                    "styleext": "scss"
                }
            },
            "architect": {
                "e2e": {
                    "builder": "@angular-devkit/build-angular:protractor",
                    "options": {
                        "protractorConfig": "e2e/protractor.conf.js",
                        "devServerTarget": "my-app:serve"
                    },
                    "configurations": {
                        "production": {
                            "devServerTarget": "my-app:serve:production"
                        }
                    }
                },
                "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                        "tsConfig": "e2e/tsconfig.e2e.json",
                        "exclude": ["**/node_modules/**"]
                    }
                }
            }
        }
    },
    "defaultProject": "my-app"
}
ShahnavazKazi commented 4 years ago

@Fatme - Were you able to check above issue by any chance?

dudipsh commented 4 years ago

@ShahnavazKazi
I am faced with the same problem, Have you fix it?

blankstar85 commented 4 years ago

I'm getting this as well, has anyone been able to fix it? or Have a pointer on where to start.?

Ant-Pinto commented 4 years ago

@ShahnavazKazi @dudipsh @blankstar85 Did any of you guys ever figure this out?

ShahnavazKazi commented 4 years ago

@Ant-Pinto @dudipsh - No, we didn't pursue what we were looking with nativescript as we chose react-native and one of the main reasons was that Microsoft App Center supports react-native based apps. @Fatme - By any chance did you get any breakthrough on this?

blankstar85 commented 4 years ago

@Ant-Pinto I haven't had the time to pursue this anymore yet.

rutpshah commented 2 years ago

Any update on this issue? I am still facing in Angular 13 and Nativescript 8 combo