Starter template: my-first-app not working on PC

[peterennis]

Description:

Tests fail on vanilla install using Starter template: my-first-app App does not work.

Steps to Reproduce:

C:\ae\adaept.com>ionic start

Every great app needs a name!

Please enter the full name of your app. You can change this at any time. To bypass this prompt next time, supply name,
the first argument to ionic start.

? Project name: ae-te5t

Pick a framework!

Please select the JavaScript framework to use for your new app. To bypass this prompt next time, supply a value for the
--type option.

? Framework: Angular

Let's pick the perfect starter template!

Starter templates are ready-to-go Ionic apps that come packed with everything you need to build your app. To bypass this
prompt next time, supply template, the second argument to ionic start.

? Starter template: my-first-app
√ Preparing directory .\ae-te5t - done!
> git.exe clone https://github.com/ionic-team/photo-gallery-tutorial-ionic4 C:\ae\adaept.com\ae-te5t --progress
Cloning into 'C:\ae\adaept.com\ae-te5t'...
remote: Enumerating objects: 16, done.

added 1242 packages from 1135 contributors and audited 16894 packages in 89.201s
found 15 vulnerabilities (4 moderate, 11 high)
  run `npm audit fix` to fix them, or `npm audit` for details

[INFO] Next Steps:

       - Go to your cloned project: cd .\ae-te5t
       - Run ionic serve within the app directory to see your app
       - Build features and components: https://ion.link/scaffolding-docs
       - Run your app on a hardware or virtual device: https://ion.link/running-docs

ionic serve

npm test

Output:

C:\ae\adaept.com\ae-te5t>npm test

> photo-rc1@0.0.1 test C:\ae\adaept.com\ae-te5t
> ng test

Browserslist: caniuse-lite is outdated. Please run next command `npm update`
10% building 2/2 modules 0 active18 01 2020 11:44:21.590:WARN [karma]: No captured browser, open http://localhost:9876/
18 01 2020 11:44:21.603:INFO [karma-server]: Karma v4.4.1 server started at http://0.0.0.0:9876/
18 01 2020 11:44:21.605:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
18 01 2020 11:44:21.612:INFO [launcher]: Starting browser Chrome
18 01 2020 11:44:38.077:WARN [karma]: No captured browser, open http://localhost:9876/
18 01 2020 11:44:38.570:INFO [Chrome 79.0.3945 (Windows 10.0.0)]: Connected on socket 1L1MMu1lZ6YvXpc3AAAA with id 21639798
Chrome 79.0.3945 (Windows 10.0.0) Tab2Page should create FAILED
        NullInjectorError: StaticInjectorError(DynamicTestModule)[Camera]:
          StaticInjectorError(Platform: core)[Camera]:
            NullInjectorError: No provider for Camera!
        error properties: Object({ ngTempTokenPath: null, ngTokenPath: [ Function ], ngDebugContext: DebugContext_({ view: Object({ def: Object({ factory: Function, nodeFlags: 33669121, rootNodeFlags: 33554433, nodeMatchedQueries: 0, flags: 0, nodes: [ Object({ nodeIndex: 0, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, checkIndex: 0, flags: 33554433, childFlags: 114688, directChildFlags: 114688, childMatchedQueries: 0, matchedQueries: Object({  }), matchedQueryIds: 0, references: Object({  }), ngContentIndex: null, childCount: 1, bindings: [  ], bindingFlags: 0, outputs: [  ], element: Object({ ns: '', name: 'app-tab2', attrs: [  ], template: null, componentProvider: Object({ nodeIndex: 1, parent: <circular reference: Object>, renderParent: <circular reference: Object>, bindingIndex: 0, outputIndex: 0, checkIndex: 1, flags: 114688, childFlags: 0, directChildFlags: 0, childMatchedQueries: 0, matchedQueries: Object, matchedQueryIds: 0, references: Object, ngContentIndex: -1, childCount: 0,  ...
            at <Jasmine>
            at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:725:1)
            at resolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:11917:1)
            at tryResolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:11861:1)
            at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:11763:1)
            at resolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:11917:1)
            at tryResolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:11861:1)
            at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:11763:1)
            at resolveNgModuleDep (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:20233:1)
            at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:20904:1)
            at injectInjectorOnly (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:628:1)
        Error: Expected undefined to be truthy.
            at <Jasmine>
            at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/src/app/tab2/tab2.page.spec.ts:24:23)
            at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone.js:396:1)
            at ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:305:1)
Chrome 79.0.3945 (Windows 10.0.0): Executed 3 of 7 (1 FAILED) (0 secs / 0.196 secs)
Chrome 79.0.3945 (Windows 10.0.0) Tab2Page should create FAILED
        NullInjectorError: StaticInjectorError(DynamicTestModule)[Camera]:
          StaticInjectorError(Platform: core)[Camera]:
            NullInjectorError: No provider for Camera!
        error properties: Object({ ngTempTokenPath: null, ngTokenPath: [ Function ], ngDebugContext: DebugContext_({ view: Object({ def: Object({ factory: Function, nodeFlags: 33669121, rootNodeFlags: 33554433, nodeMatchedQueries: 0, flags: 0, nodes: [ Object({ nodeIndex: 0, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, checkIndex: 0, flags: 33554433, childFlags: 114688, directChildFlags: 114688, childMatchedQueries: 0, matchedQueries: Object({  }), matchedQueryIds: 0, references: Object({  }), ngContentIndex: null, childCount: 1, bindings: [  ], bindingFlags: 0, outputs: [  ], element: Object({ ns: '', name: 'app-tab2', attrs: [  ], template: null, componentProvider: Object({ nodeIndex: 1, parent: <circular reference: Object>, renderParent: <circular reference: Object>, bindingIndex: 0, outputIndex: 0, checkIndex: 1, flags: 114688, childFlags: 0, directChildFlags: 0, childMatchedQueries: 0, matchedQueries: Object, matchedQueryIds: 0, references: Object, ngContentIndex: -1, childCount: 0,  ...
            at <Jasmine>
            at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:725:1)
            at resolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:11917:1)
            at tryResolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:11861:1)
            at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:11763:1)
            at resolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:11917:1)
            at tryResolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:11861:1)
            at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:11763:1)
            at resolveNgModuleDep (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:20233:1)
            at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:20904:1)
            at injectInjectorOnly (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:628:1)
        Error: Expected undefined to be truthy.
            at <Jasmine>
            at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/src/app/tab2/tab2.page.spec.ts:24:23)
            at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone.js:396:1)
            at ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:3Chrome 79.0.3945 (Windows 10.0.0) PhotoService should be created FAILED
        NullInjectorError: StaticInjectorError(DynamicTestModule)[Camera]:
          StaticInjectorError(Platform: core)[Camera]:
            NullInjectorError: No provider for Camera!
...

The camera does not work.

I am using W10 with a laptop camera and this app used to work for capturing a photo.

My ionic info:

C:\ae\adaept.com\ae-te5t>ionic info

Ionic:

   Ionic CLI                     : 5.4.15 (C:\Users\peter\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.11.1
   @angular-devkit/build-angular : 0.803.12
   @angular-devkit/schematics    : 8.3.12
   @angular/cli                  : 8.3.12
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : not available
   Cordova Plugins   : not available

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.13.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.13.4
   OS     : Windows 10

C:\ae\adaept.com\ae-te5t>

Other Information:

I expect the app to work as a PWA initially.

[NikolaPeevski]

Hey @peterennis I've made a PR that addresses your issues regarding testing!

As per your issue regarding the camera not working, if you open the console you'll see that cordova is not injected. Described here, https://github.com/ionic-team/ionic-native/issues/403 you should install native-run globally (npm i -g native-run) and then run the app not with ionic serve but with ionic cordova run browser

[peterennis]

@NikolaPeevski 👍 What is the link to the PR?

[NikolaPeevski]

@peterennis https://github.com/ionic-team/photo-gallery-tutorial-ionic4/pull/7 it covers only missing imports in the test specs.

[dotNetkow]

hi there, sorry about this - We need the CLI to pull the latest version of this app. This original version does not work on the Web, since it's Cordova/Ionic Native. Good news - We recently released a newer version that uses Capacitor over Cordova, and works on the web, ios, and android. Please find the code and guide here.