ionic-team / tutorial-photo-gallery-angular

Photo Gallery Tutorial: Ionic Angular and Capacitor
https://ionicframework.com/docs/angular/your-first-app
Other
141 stars 186 forks source link

bug: #75

Closed Yermo closed 1 year ago

Yermo commented 1 year ago

Prerequisites

Ionic Framework Version

v5.x, v6.x, v7.x

Current Behavior

The my-first-app angular sample app unit tests fail.

ionic start ionic-my-first-app my-first-app --type=angular

cd ionic-my-first-app

npm run test

yields:

$ npm run test

> photo-gallery-ng-capacitor@2.0.0 test
> ng test

⠋ Generating browser application bundles (phase: setup)...Compiling @angular/core : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @ionic/angular : es2015 as esm2015
⠙ Generating browser application bundles (phase: building)...10 10 2023 16:36:36.811:WARN [karma]: No captured browser, open http://localhost:9876/
10 10 2023 16:36:36.822:INFO [karma-server]: Karma v6.3.20 server started at http://localhost:9876/
10 10 2023 16:36:36.823:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
10 10 2023 16:36:36.825:INFO [launcher]: Starting browser Chrome
✔ Browser application bundle generation complete.

./src/app/app.component.spec.ts:5:0-63 - Error: Module not found: Error: Can't resolve '@ionic-native/splash-screen/ngx' in '/usr/local/YML/WWW/miles-by-motorcycle.com/ionic-my-first-app/src/app'

./src/app/app.component.spec.ts:6:0-57 - Error: Module not found: Error: Can't resolve '@ionic-native/status-bar/ngx' in '/usr/local/YML/WWW/miles-by-motorcycle.com/ionic-my-first-app/src/app'

Error: src/app/app.component.spec.ts:5:30 - error TS2307: Cannot find module '@ionic-native/splash-screen/ngx' or its corresponding type declarations.

5 import { SplashScreen } from '@ionic-native/splash-screen/ngx';
                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: src/app/app.component.spec.ts:6:27 - error TS2307: Cannot find module '@ionic-native/status-bar/ngx' or its corresponding type declarations.

6 import { StatusBar } from '@ionic-native/status-bar/ngx';
                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✔ Browser application bundle generation complete.

./src/app/app.component.spec.ts:5:0-63 - Error: Module not found: Error: Can't resolve '@ionic-native/splash-screen/ngx' in '/usr/local/YML/WWW/miles-by-motorcycle.com/ionic-my-first-app/src/app'

./src/app/app.component.spec.ts:6:0-57 - Error: Module not found: Error: Can't resolve '@ionic-native/status-bar/ngx' in '/usr/local/YML/WWW/miles-by-motorcycle.com/ionic-my-first-app/src/app'

Error: src/app/app.component.spec.ts:5:30 - error TS2307: Cannot find module '@ionic-native/splash-screen/ngx' or its corresponding type declarations.

5 import { SplashScreen } from '@ionic-native/splash-screen/ngx';
                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: src/app/app.component.spec.ts:6:27 - error TS2307: Cannot find module '@ionic-native/status-bar/ngx' or its corresponding type declarations.

6 import { StatusBar } from '@ionic-native/status-bar/ngx';
                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Expected Behavior

It should pass the unit tests.

Steps to Reproduce

$ ionic start ionic-my-first-app my-first-app --type=angular

$ cd ionic-my-first-app

$ npm run test

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 7.1.1 (/home/yml/.config/nvm/versions/node/v16.14.2/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 5.9.4 @angular-devkit/build-angular : 12.2.18 @angular-devkit/schematics : 12.2.18 @angular/cli : 12.2.18 @ionic/angular-toolkit : 4.0.0

Capacitor:

Capacitor CLI : 4.4.0 @capacitor/android : 4.4.0 @capacitor/core : 4.4.0 @capacitor/ios : 4.4.0

Utility:

cordova-res : not installed globally native-run (update available: 1.7.3) : 1.7.1

System:

NodeJS : v16.14.2 (/home/yml/.config/nvm/versions/node/v16.14.2/bin/node) npm : 8.5.0 OS : Linux 5.3

Additional Information

The spec references ionic-native and not capacitor.

liamdebeasi commented 1 year ago

Thanks for the report. It looks like https://github.com/ionic-team/tutorial-photo-gallery-angular still references Ionic Native. We should probably remove those in favor of the Capacitor plugins.

(Apologies for the multiple issue transfers, it took me a few tries to find the correct repo for this 😄)

Yermo commented 1 year ago

No worries. My apologies that I didn't post it to the right project from the start. (Didn't know.) Thank you for looking at this.

liamdebeasi commented 1 year ago

Thanks for the report. This was fixed in https://github.com/ionic-team/tutorial-photo-gallery-angular/pull/76.