nativescript-schematics
nativescript-schematics copied to clipboard
NativeScript
ng add command throwing error when adding to a bare-bones project
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:
npm i && ng add @nativescript/schematics
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.
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
@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
I actually did try that with scss and with css and had the same issue both times
Yes this works when I change my default styles file to css instead of scss. I think this needs to be fixed.
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
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?
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.
@vegaskev,
You can try it using the next version of @nativescript/schematics - ng add @nativescript/schematics@next.
@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/[email protected] 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?
Hey @ShahnavazKazi,
We're not able to reproduce your issue. Can you give us exact steps and the following information:
- The content of your
package.jsonfile - The content of your
angular.jsonfile
@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"
}
I'm getting this as well, has anyone been able to fix it? or Have a pointer on where to start.?
@ShahnavazKazi @dudipsh @blankstar85 Did any of you guys ever figure this out?
@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?
Any update on this issue? I am still facing in Angular 13 and Nativescript 8 combo
