Cannot get a default project to run "ng serve" properly

Ionic Framework ionic-v3
#1

environment:

ionic info
cli packages: (/usr/local/lib/node_modules)
@ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0

System:
Node : v9.10.1
npm : 5.6.0
OS : macOS High Sierra

Misc:
backend : legacy

npm -v
5.6.0

I was following this tutorial:

steps:
➜ iionic start ionic3-angular5 blank

:heavy_check_mark: Creating directory ./ionic3-angular5 - done!
:heavy_check_mark: Downloading and extracting blank starter - done!

? Would you like to integrate your new app with Cordova to target native iOS and Android? Yes
:heavy_check_mark: Personalizing ionic.config.json and package.json - done!

ionic integrations enable cordova --quiet
:heavy_check_mark: Downloading integration cordova - done!
:heavy_check_mark: Copying integrations files to project - done!
[OK] Added cordova integration!

Installing dependencies may take several minutes.

:sparkles: IONIC DEVAPP :sparkles:

Speed up development with the Ionic DevApp, our fast, on-device testing mobile app

  • :key: Test on iOS and Android without Native SDKs
  • :rocket: LiveReload for instant style and JS updates

️–> Install DevApp: https://bit.ly/ionic-dev-app <–

npm i
:heavy_check_mark: Running command - done!
git init
git add -A
git commit -m “Initial commit” --no-gpg-sign

♬ ♫ ♬ ♫ Your Ionic app is ready to go! ♬ ♫ ♬ ♫

Run your app in the browser (great for initial development):
ionic serve

Install the DevApp to easily test on iOS and Android
https://bit.ly/ionic-dev-app

Run on a device or simulator:
ionic cordova run ios

Test and share your app on a device with the Ionic View app:
https://ionicframework.com/products/view

Next Steps:

After this, I just do this:

➜ ionic cd ionic3-angular5
➜ ionic3-angular5 git:(master) ng serve

and that’s where the 1st buck stopped:

Unable to find “@angular/cli” in devDependencies.

Please take the following steps to avoid issues:
“npm install --save-dev @angular/cli@latest”

Cannot read property ‘config’ of null
TypeError: Cannot read property ‘config’ of null
at Class.run (/usr/local/lib/node_modules/@angular/cli/tasks/serve.js:51:63)
at check_port_1.checkPort.then.port (/usr/local/lib/node_modules/@angular/cli/commands/serve.js:123:26)
at
at process._tickCallback (internal/process/next_tick.js:118:7)

As the instruction suggested, I did this then:

➜ ionic3-angular5 git:(master) npm install --save-dev @angular/cli@latest

uglifyjs-webpack-plugin@0.4.6 postinstall /Users/Haluk/Dropbox/ionic/ionic3-angular5/node_modules/@angular/cli/node_modules/webpack/node_modules/uglifyjs-webpack-plugin
node lib/post_install.js

  • @angular/cli@1.7.4
    added 354 packages in 18.25s
    ➜ ionic3-angular5 git:(master) ✗

➜ ionic3-angular5 git:(master) ✗ ng serve
Cannot read property ‘config’ of null
TypeError: Cannot read property ‘config’ of null
at Class.run (/Users/Haluk/Dropbox/ionic/ionic3-angular5/node_modules/@angular/cli/tasks/serve.js:51:63)
at check_port_1.checkPort.then.port (/Users/Haluk/Dropbox/ionic/ionic3-angular5/node_modules/@angular/cli/commands/serve.js:123:26)
at
at process._tickCallback (internal/process/next_tick.js:118:7)

that’s where the final buck stopped.

FYI: when I do ls -al, I see this:

➜ ionic3-angular5 git:(master) ✗ ls -al
total 736
drwxr-xr-x 14 Haluk staff 448 May 1 13:53 .
drwxr-xr-x@ 20 Haluk staff 640 May 1 13:50 …
-rw-r–r-- 1 Haluk staff 363 May 1 02:53 .editorconfig
drwxr-xr-x 12 Haluk staff 384 May 1 13:53 .git
-rw-r–r-- 1 Haluk staff 438 May 1 02:53 .gitignore
-rw-r–r-- 1 Haluk staff 6183 May 1 13:50 config.xml
-rw-r–r-- 1 Haluk staff 118 May 1 13:50 ionic.config.json
drwxr-xr-x 744 Haluk staff 23808 May 1 13:53 node_modules
-rw-r–r-- 1 Haluk staff 343458 May 1 13:53 package-lock.json
-rw-r–r-- 1 Haluk staff 1170 May 1 13:53 package.json
drwxr-xr-x 7 Haluk staff 224 May 1 13:50 resources
drwxr-xr-x 9 Haluk staff 288 May 1 13:50 src
-rw-r–r-- 1 Haluk staff 519 May 1 02:53 tsconfig.json
-rw-r–r-- 1 Haluk staff 178 May 1 02:53 tslint.json

What am I doing wrong in what seems to be the bare-bone steps?

#2

You can scaffold a new project using ionic start:

ionic start MyPwa --no-cordova blank

The generated package.json:

{
  "name": "MyPwa",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/animations": "5.2.10",
    "@angular/common": "5.2.10",
    "@angular/compiler": "5.2.10",
    "@angular/compiler-cli": "5.2.10",
    "@angular/core": "5.2.10",
    "@angular/forms": "5.2.10",
    "@angular/http": "5.2.10",
    "@angular/platform-browser": "5.2.10",
    "@angular/platform-browser-dynamic": "5.2.10",
    "@ionic-native/core": "4.7.0",
    "@ionic-native/splash-screen": "4.7.0",
    "@ionic-native/status-bar": "4.7.0",
    "@ionic/storage": "2.1.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.10",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.9",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project"
}

To update the global and local (devDependencies) versions of the Angular CLI use the Node Package Manager (npm):

npm install -g @angular/cli
npm install @angular/cli --save-dev

See: https://robferguson.org/blog/2018/04/16/0ptimising-the-performance-of-an-ionic-pwa-part-1/

You can then:

ionic serve

or:

npm run build --prod

npm install -g http-server
http-server ./www
#3