Getting a blank screen with ionic serve

Ionic Framework ionic-v3
#1

Just installed a new Windows 10. After installing Ionic, I started a new app, but ionic serve gives me a blank, white screen with these two errors -
failed to load resource: the server responded with status of 404 vendor.js
failed to load resource: the server responded with status of 404 main.js

Tried uninstall and reinstall node and ionic. Same.
Please advise.

Ionic info -
cli packages: (c:\Dev\sam5\node_modules)
@ionic/cli-plugin-ionic-angular : 1.4.1
@ionic/cli-utils : 1.7.0
ionic (Ionic CLI) : 3.7.0

local packages:
@ionic/app-scripts : 2.1.3
Ionic Framework : ionic-angular 3.6.0

System:
Node : v6.11.1
OS : Windows 10
npm : 3.10.10

#2

Show us the complete output of ionic serve --verbose please.

2 Likes
#3

Note that the colors are due to the text formatting only. The only red thing is PLUGIN_NOT_INSTALLED which I’m checking right now.

c:\Dev\sam5>ionic serve --verbose
[DEBUG] CLI flags: { interactive: true, confirm: false }
[DEBUG] { cwd: 'c:\\Dev\\sam5', local: true, binPath:
        'C:\\Users\\acer\\AppData\\Roaming\\npm\\node_modules\\ionic\\bin\\ionic', libPath:
        'c:\\Dev\\sam5\\node_modules\\ionic\\dist\\index.js' }
[DEBUG] Loading local plugin @ionic/cli-plugin-proxy
[DEBUG] Throwing PLUGIN_NOT_INSTALLED for local @ionic/cli-plugin-proxy
[DEBUG] Loading local plugin @ionic/cli-plugin-ionic-angular
[DEBUG] Getting plugin info for ionic
[DEBUG] Checking for latest plugin version of ionic@latest.
[DEBUG] Getting plugin info for @ionic/cli-plugin-ionic-angular
[DEBUG] Checking for latest plugin version of @ionic/cli-plugin-ionic-angular@latest.
[DEBUG] New daemon pid: 8820
[INFO] Starting app-scripts server: --log-level debug --port 8100 --p 8100 --livereload-port 35729 --r 35729 --address
       localhost - Ctrl+C to cancel
[18:17:23]  watch started ...
[18:17:23]  build dev started ...
[18:17:23]  clean started ...
[18:17:23]  clean finished in 16 ms
[18:17:23]  copy started ...
[18:17:23]  transpile started ...
[18:17:25]  transpile finished in 1.93 s
[18:17:25]  preprocess started ...
[18:17:25]  deeplinks started ...
[18:17:25]  deeplinks finished in less than 1 ms
[18:17:25]  preprocess finished in less than 1 ms
[18:17:25]  webpack started ...
[18:17:25]  copy finished in 2.10 s
[18:17:25]  webpack finished in 156 ms
[18:17:25]  sass started ...
[18:17:25]  sass finished in 156 ms
[18:17:25]  postprocess started ...
[18:17:25]  postprocess finished in less than 1 ms
[18:17:25]  lint started ...
[18:17:25]  build dev finished in 2.31 s
[18:17:25]  watch ready in 2.36 s
[18:17:25]  dev server running: http://localhost:8100/

[INFO] Development server running
       Local: http://localhost:8100

[18:17:28]  lint finished in 3.21 s

Update: I’ve installed @ionic/cli-plugin-proxy and no longer see the red warning. Still, nothing is being shown except a blank page.

#4

Don’t worry, that is normal. You don’t need that plugin.

#5

That looks totally fine.

Does vendor.js and main.js exist in www/build? What else exists in there?

Can you run ionic start blank blank --verbose again and post the output here?

#6

I don’t have those files in www/build. Only these four files exist -

main.css
main.css.map
polyfills.js
sw-toolbox.js

This is the output of ionic start blank blank --verbose -

c:\Dev>ionic start blank blank --verbose
[DEBUG] CLI flags: { interactive: true, confirm: false }
[DEBUG] { cwd: 'c:\\Dev', local: false, binPath:
        'C:\\Users\\acer\\AppData\\Roaming\\npm\\node_modules\\ionic\\bin\\ionic', libPath:
        'C:\\Users\\acer\\AppData\\Roaming\\npm\\node_modules\\ionic\\dist\\index.js' }
[DEBUG] Loading global plugin @ionic/cli-plugin-proxy
[DEBUG] New daemon pid: 6152
[DEBUG] Getting plugin info for ionic
[DEBUG] Checking for latest plugin version of ionic@latest.
[DEBUG] Getting plugin info for @ionic/cli-plugin-proxy
[DEBUG] Checking for latest plugin version of @ionic/cli-plugin-proxy@latest.
? Would you like to integrate your new app with Cordova to target native iOS and Android? No
[DEBUG] globalDeps=
√ Creating directory .\blank - done!
[INFO] Fetching app base (https://github.com/ionic-team/ionic2-app-base/archive/master.tar.gz)
√ Downloading - done!
[INFO] Fetching starter template blank (https://github.com/ionic-team/ionic2-starter-blank/archive/master.tar.gz)
√ Downloading - done!
√ Updating package.json with app details - done!
√ Creating configuration file ionic.config.json - done!
[INFO] Installing dependencies may take several minutes!
> npm install
√ Running command - done!
[DEBUG] localDeps=ionic,@ionic/cli-plugin-ionic-angular
> npm install --save-dev --save-exact ionic@latest
√ Running command - done!
> npm install --save-dev --save-exact @ionic/cli-plugin-ionic-angular@latest
√ Running command - done!
> npm dedupe
√ Running command - done!
> git init
√ Running command - done!
> git add -A
√ Running command - done!
> git commit -m "Initial commit" --no-gpg-sign
√ Running command - done!

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

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

Run on a device or simulator:
  ionic cordova run ios

Test and share your app on a device with the Ionic View app:
  http://view.ionic.io


Next Steps:
Go to your newly created project: cd .\blank
#7

Ok, project generation seems to work.

Now run ionic build in that project. Do these files exist now?
Delete the www folder, run the command again. What now?
Delete again, now ionic serve. What now about the folder content?

(I try to understand if and if, why these files are not generated in the build process as they should…)

#8

ionic build failed. Seems like it’s looking for some files in the root folder. In any case, the expected files are not generated.

c:\Dev\blank>ionic build
Running app-scripts build:

[19:13:59]  build dev started ...
[19:13:59]  clean started ...
[19:13:59]  clean finished in less than 1 ms
[19:13:59]  copy started ...
[19:13:59]  transpile started ...
[19:14:01]  transpile finished in 1.96 s
[19:14:01]  preprocess started ...
[19:14:01]  deeplinks started ...
[19:14:01]  deeplinks finished in 16 ms
[19:14:01]  preprocess finished in 16 ms
[19:14:01]  webpack started ...
[19:14:01]  copy finished in 2.13 s
Error: Entry module not found: Error: Can't resolve 'c:\' in 'c:\Dev\blank'
resolve 'c:\' in 'c:\Dev\blank'
  Parsed request is a directory
  using description file: c:\Dev\blank\package.json (relative path: .)
  after using description file: c:\Dev\blank\package.json (relative path: .)
    No description file found
    as directory
      existing directory
        using path: c:\index
          No description file found
        after using path: c:\index
          no extension
            c:\index doesn't exist
          .js
            c:\index.js doesn't exist
          .json
            c:\index.json doesn't exist
#9

Aha, that is interesting.

Post the ionic info of that new blank project.
And the content of package.json in that project please.

#10

ionic info -

c:\Dev\blank>ionic info

cli packages: (c:\Dev\blank\node_modules)

    @ionic/cli-plugin-ionic-angular : 1.4.1
    @ionic/cli-utils                : 1.7.0
    ionic (Ionic CLI)               : 3.7.0

local packages:

    @ionic/app-scripts : 2.1.3
    Ionic Framework    : ionic-angular 3.6.0

System:

    Node : v6.11.1
    OS   : Windows 10
    npm  : 3.10.10

And package.json -

{
  "name": "blank",
  "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/common": "4.1.3",
    "@angular/compiler": "4.1.3",
    "@angular/compiler-cli": "4.1.3",
    "@angular/core": "4.1.3",
    "@angular/forms": "4.1.3",
    "@angular/http": "4.1.3",
    "@angular/platform-browser": "4.1.3",
    "@angular/platform-browser-dynamic": "4.1.3",
    "@ionic-native/core": "3.12.1",
    "@ionic-native/splash-screen": "3.12.1",
    "@ionic-native/status-bar": "3.12.1",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.6.0",
    "ionicons": "3.0.0",
    "rxjs": "5.4.0",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.12"
  },
  "devDependencies": {
    "@ionic/app-scripts": "2.1.3",
    "@ionic/cli-plugin-ionic-angular": "1.4.1",
    "ionic": "3.7.0",
    "typescript": "2.3.4"
  },
  "description": "An Ionic project"
}
#11

I followed along, doing the same commands, and ionic build works totally fine for me.
(Only difference I have is a different node/npm setup)

Run npm list --depth=1 in that project please.

My output:

PS C:\Users\Jan\Documents\blank2> npm list --depth=1
blank2@0.0.1 C:\Users\Jan\Documents\blank2
+-- @angular/common@4.1.3
+-- @angular/compiler@4.1.3
+-- @angular/compiler-cli@4.1.3
| +-- @angular/tsc-wrapped@4.1.3
| +-- minimist@1.2.0
| `-- reflect-metadata@0.1.10
+-- @angular/core@4.1.3
+-- @angular/forms@4.1.3
+-- @angular/http@4.1.3
+-- @angular/platform-browser@4.1.3
+-- @angular/platform-browser-dynamic@4.1.3
+-- @ionic-native/core@3.12.1
+-- @ionic-native/splash-screen@3.12.1
+-- @ionic-native/status-bar@3.12.1
+-- @ionic/app-scripts@2.1.3
| +-- autoprefixer@7.1.1
| +-- babili@0.1.2
| +-- chalk@1.1.3
| +-- chokidar@1.7.0
| +-- clean-css@3.4.27
| +-- cross-spawn@5.1.0
| +-- express@4.15.3
| +-- fs-extra@3.0.1
| +-- glob@7.1.1
| +-- json-loader@0.5.4
| +-- magic-string@0.19.1
| +-- node-sass@4.5.3
| +-- os-name@2.0.1
| +-- postcss@5.2.17
| +-- proxy-middleware@0.15.0
| +-- reflect-metadata@0.1.10 deduped
| +-- rollup@0.42.0
| +-- rollup-plugin-commonjs@8.0.2
| +-- rollup-plugin-json@2.3.0
| +-- rollup-plugin-node-builtins@2.1.2
| +-- rollup-plugin-node-globals@1.1.0
| +-- rollup-plugin-node-resolve@3.0.0
| +-- rollup-pluginutils@2.0.1
| +-- tiny-lr@1.0.4
| +-- tslint@5.5.0
| +-- tslint-eslint-rules@4.1.1
| +-- uglify-js@3.0.27
| +-- webpack@3.4.1
| +-- ws@1.1.1
| `-- xml2js@0.4.17
+-- @ionic/cli-plugin-ionic-angular@1.4.1
| +-- @ionic/cli-utils@1.7.0
| +-- chalk@2.0.1
| `-- tslib@1.7.1
+-- @ionic/storage@2.0.1
| +-- @types/localforage@0.0.30
| +-- localforage@1.4.3
| `-- localforage-cordovasqlitedriver@1.5.0
+-- ionic@3.7.0
| +-- @ionic/cli-utils@1.7.0 deduped
| +-- chalk@2.0.1
| +-- diff@3.3.0
| +-- minimist@1.2.0 deduped
| +-- opn@5.1.0
| +-- os-name@2.0.1 deduped
| +-- rimraf@2.6.1
| +-- semver@5.4.1
| +-- ssh-config@1.0.1
| +-- tar@2.2.1
| `-- tslib@1.7.1 deduped
+-- ionic-angular@3.6.0
+-- ionicons@3.0.0
+-- rxjs@5.4.0
| `-- symbol-observable@1.0.4
+-- sw-toolbox@3.6.0
| +-- path-to-regexp@1.7.0
| `-- serviceworker-cache-polyfill@4.0.0
+-- typescript@2.3.4
`-- zone.js@0.8.12

And then npm list -g --depth=0 as well.

That is rally stange…

#12

Hi. I had a similar issue, and I solved it. The bug came from having a “!” character in my project path. When I created a new project in a different directory, which didn’t have strange characters in it, everythink started working. I hope it helps some people who will come over the same problem in future

#13

Hello. I was about to go mad with this error eventually I sorted it it because I had the CDN of Ionic in the app.component.html file

I had a blank screen and I could also deploy the app with Android Studio but it was blank.

I had put there the CDN long ago and I had forgotten in there and it started to cause this error after a while. It was super weird as it happened from one day to the other. I just commented the line about the CDN

superBADerror
superBADerror1366×768 107 KB

<!-- CDN Ionic -->

  <!-- <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>

  <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>  -->

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>
#14