Getting multiple errors when previewing new project

[MarcoNPZ]

So I'm new to angular and NativeScript programming, but I already have experience in programming. I wanted to dive into webprogramming, but keep running into errors. I tried to create a new Angular NativeScript project with:
ng new --collection=@nativescript/schematics helloworld2 --shared
The dependencies are a bit wrong atm (you can also see it in #279 and #280 so I removed @angular/http and changed @nativescript/schematics from 2.0.0 to 9.0.0 in the package.json file. And while ng serve works, as soon as I try tns run ios or tns preview my build fails with this massive error log, which I have no idea about what it means.

Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.

• options[0] misses the property 'patterns'. Should be:
  [non-empty string | object { from, to?, context?, globOptions?, toType?, force?, flatten?, transform?, cacheTransform?, transformPath?, noErrorOnMissing? }, ...] (should not have fewer than 1 item)
• options[1] misses the property 'patterns'. Should be:
  [non-empty string | object { from, to?, context?, globOptions?, toType?, force?, flatten?, transform?, cacheTransform?, transformPath?, noErrorOnMissing? }, ...] (should not have fewer than 1 item)
• options[2] misses the property 'patterns'. Should be:
  [non-empty string | object { from, to?, context?, globOptions?, toType?, force?, flatten?, transform?, cacheTransform?, transformPath?, noErrorOnMissing? }, ...] (should not have fewer than 1 item)
  ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
  at validate (/Users/marco/Documents/Programmieren/02_Angular/helloworld2/node_modules/schema-utils/dist/validate.js:96:11)
  at new CopyPlugin (/Users/marco/Documents/Programmieren/02_Angular/helloworld2/node_modules/copy-webpack-plugin/dist/index.js:24:30)
  at module.exports (/Users/marco/Documents/Programmieren/02_Angular/helloworld2/webpack.config.js:304:13)
  at handleFunction (/Users/marco/Documents/Programmieren/02_Angular/helloworld2/node_modules/webpack-cli/bin/prepareOptions.js:23:13)
  at prepareOptions (/Users/marco/Documents/Programmieren/02_Angular/helloworld2/node_modules/webpack-cli/bin/prepareOptions.js:9:5)
  at requireConfig (/Users/marco/Documents/Programmieren/02_Angular/helloworld2/node_modules/webpack-cli/bin/convert-argv.js:136:14)
  at /Users/marco/Documents/Programmieren/02_Angular/helloworld2/node_modules/webpack-cli/bin/convert-argv.js:142:17
  at Array.forEach ()
  at module.exports (/Users/marco/Documents/Programmieren/02_Angular/helloworld2/node_modules/webpack-cli/bin/convert-argv.js:140:15)
  at /Users/marco/Documents/Programmieren/02_Angular/helloworld2/node_modules/webpack-cli/bin/cli.js:241:39
  at Object.parse (/Users/marco/Documents/Programmieren/02_Angular/helloworld2/node_modules/webpack-cli/node_modules/yargs/yargs.js:567:18)
  at /Users/marco/Documents/Programmieren/02_Angular/helloworld2/node_modules/webpack-cli/bin/cli.js:219:8
  at Object. (/Users/marco/Documents/Programmieren/02_Angular/helloworld2/node_modules/webpack-cli/bin/cli.js:538:3)
  at Module._compile (internal/modules/cjs/loader.js:1256:30)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:1277:10)
  at Module.load (internal/modules/cjs/loader.js:1105:32)
  at Function.Module._load (internal/modules/cjs/loader.js:967:14)
  at Module.require (internal/modules/cjs/loader.js:1145:19)
  at require (internal/modules/cjs/helpers.js:75:18)
  at Object. (/Users/marco/Documents/Programmieren/02_Angular/helloworld2/node_modules/webpack/bin/webpack.js:156:2)
  at Module._compile (internal/modules/cjs/loader.js:1256:30)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:1277:10)
  at Module.load (internal/modules/cjs/loader.js:1105:32)
  at Function.Module._load (internal/modules/cjs/loader.js:967:14)
  at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)
  at internal/main/run_main_module.js:17:47

System is a MacBook Pro Late 2013. I hope anyone can help me.

[NathanWalker]

Hi @MarcoNPZ looks like you may be using old versions. Make sure you're using node v12.13.0 or higher and npm 6.9.0 or higher. Then install the following globally:

npm i -g @angular/cli
npm i -g nativescript
npm i -g @nativescript/schematics

Then here's a couple examples if starting fresh (which are already documented) but here for quick reference:

A. Starting a new Angular web project and adding {N} to it afterwards:

ng new workspace
cd workspace
ng add @nativescript/schematics --skipAutoGeneratedComponent

// start apps:
npm run ios
npm run android 

B. Starting a new Angular NativeScript shared codebase from the start:

ng new -c=@nativescript/schematics workspace --shared --style=scss
cd workspace

// start apps:
npm run ios
npm run android 

If updating existing @nativescript/schematics projects:

1. Delete webpack.config.js (the updated @nativesript/webpack dependency will regenerate a new correct one using latest webpack plugins). If you had customizations, use git change sets to compare the diff.
2. Update package.json as follows (at least in part - can use as a guide):

"scripts": {
  "clean": "npx rimraf hooks node_modules package-lock.json platforms",
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e",
  "android": "tns run android --no-hmr",
  "ios": "tns run ios --no-hmr",
  "mobile": "tns run",
  "preview": "tns preview",
  "ngcc": "ngcc --properties es2015 module main --first-only",
  "postinstall": "npm run ngcc"
},
"dependencies": {
  "@angular/animations": "~10.0.0",
  "@angular/common": "~10.0.0",
  "@angular/compiler": "~10.0.0",
  "@angular/core": "~10.0.0",
  "@angular/forms": "~10.0.0",
  "@angular/platform-browser": "~10.0.0",
  "@angular/platform-browser-dynamic": "~10.0.0",
  "@angular/router": "~10.0.0",
  "core-js": "^2.6.9",
  "@nativescript/angular": "~10.0.0",
  "@nativescript/core": "rc",
  "@nativescript/theme": "~2.2.1",
  "reflect-metadata": "~0.1.12",
  "rxjs": "~6.5.5",
  "tslib": "1.10.0",
  "zone.js": "~0.10.2"
},
"devDependencies": {
  "@angular/cli": "~10.0.0",
  "@angular/compiler-cli": "~10.0.0",
  "@angular-devkit/build-angular": "~0.1000.2",
  "@nativescript/tslint-rules": "~0.0.5",
  "@types/jasmine": "~3.5.0",
  "@types/jasminewd2": "~2.0.3",
  "@types/node": "^12.11.1",
  "codelyzer": "^5.1.2",
  "jasmine-core": "~3.5.0",
  "jasmine-spec-reporter": "~4.2.1",
  "karma": "~4.4.1",
  "karma-chrome-launcher": "~3.1.0",
  "karma-coverage-istanbul-reporter": "~2.1.0",
  "karma-jasmine": "~3.0.1",
  "karma-jasmine-html-reporter": "^1.4.2",
  "@nativescript/webpack": "~2.0.0",
  "protractor": "~5.4.3",
  "ts-node": "~8.3.0",
  "tslint": "~6.1.0",
  "typescript": "~3.9.0",
  "node-sass": "^4.7.1"
}

3. Clean your projects with npm run clean if using the clean scripts from the example scripts above.

[zaccanoy]

@NathanWalker Unless it's been updated in the last few days, there is no 9.x release on NPM that doesn't include the "@angular/[email protected]" and the "@angular/http" dependencies. I tested with a clean dev environment. However, if I pull from the master branch in this repo, everything works fine (possibly sans the Webpack Copy plug-in issue, but I haven't tested that).

[NathanWalker]

It was updated just yesterday and now supports Angular 10.