Merge pull request #428 from captaincaius/ionic4-update-rc1-and-tabs-…

…fixes

ionic: update to rc1 and fix tabs router and selected tab

generators/app/prompts.js

@@ -130,8 +130,7 @@ module.exports = [
     type: 'confirm',
     name: 'lazy',
     message: 'Do you want lazy loading?',
-    default: false,
-    when: props => props.ui !== 'ionic'
+    default: false
   },
   {
     type: 'confirm',

generators/app/templates/_angular.json

@@ -33,9 +33,9 @@
 <% } -%>
 <% if (props.ui === 'ionic') { -%>
               {
-                "glob": "**/*",
-                "input": "node_modules/@ionic/angular/dist/ionic/svg",
-                "output": "svg"
+                "glob": "**/*.svg",
+                "input": "node_modules/ionicons/dist/ionicons/svg",
+                "output": "./svg"
               },
 <% } -%>
               "src/assets"
@@ -104,6 +104,13 @@
 <% } -%>
 <% if (props.pwa) { -%>
               "src/manifest.json",
+<% } -%>
+<% if (props.ui === 'ionic') { -%>
+              {
+                "glob": "**/*.svg",
+                "input": "node_modules/ionicons/dist/ionicons/svg",
+                "output": "./svg"
+              },
 <% } -%>
               "src/assets"
             ]

generators/app/templates/_package.json

@@ -53,15 +53,15 @@
     "generate": "ng generate"
   },
   "dependencies": {
-    "@angular/animations": "^7.0.0",
-    "@angular/common": "^7.0.0",
-    "@angular/compiler": "^7.0.0",
-    "@angular/core": "^7.0.0",
-    "@angular/forms": "^7.0.0",
-    "@angular/http": "^7.0.0",
-    "@angular/platform-browser": "^7.0.0",
-    "@angular/platform-browser-dynamic": "^7.0.0",
-    "@angular/router": "^7.0.0",
+    "@angular/animations": "^7.1.4",
+    "@angular/common": "^7.1.4",
+    "@angular/compiler": "^7.1.4",
+    "@angular/core": "^7.1.4",
+    "@angular/forms": "^7.1.4",
+    "@angular/http": "^7.1.4",
+    "@angular/platform-browser": "^7.1.4",
+    "@angular/platform-browser-dynamic": "^7.1.4",
+    "@angular/router": "^7.1.4",
     "@ngx-translate/core": "^10.0.1",
 <% if (props.target.includes('cordova')) { -%>
     "@ionic-native/core": "5.0.0-beta.21",
@@ -78,10 +78,10 @@
     "cordova-plugin-whitelist": "^1.3.3",
 <% } -%>
 <% if (props.pwa) { -%>
-    "@angular/service-worker": "^7.0.0",
+    "@angular/service-worker": "^7.1.4",
 <% } -%>
 <% if (props.ui === 'ionic') { -%>
-    "@ionic/angular": "4.0.0-beta.16",
+    "@ionic/angular": "4.0.0-rc.1",
 <% } else if (props.ui === 'bootstrap') { -%>
     "@ng-bootstrap/ng-bootstrap": "^3.3.0",
     "bootstrap": "^4.1.1",
@@ -111,7 +111,7 @@
     "@angular/cli": "~7.0.2",
     "@angular/compiler-cli": "^7.0.0",
     "@angular/language-service": "^7.0.0",
-    "@angular-devkit/build-angular": "^0.10.2",
+    "@angular-devkit/build-angular": "^0.12.1",
     "@biesbjerg/ngx-translate-extract": "^2.3.4",
     "@ngx-rocket/scripts": "^3.0.0",
     "@types/jasmine": "^2.8.7",

generators/app/templates/src/app/_app.component.spec.ts

@@ -23,20 +23,13 @@ import { AppComponent } from './app.component';
 describe('AppComponent', () => {
 <% if (props.target.includes('cordova')) { -%>
 
-  let statusBarSpy: any, splashScreenSpy: any, platformReadySpy: any;
-<%   if (props.ui === 'ionic') { -%>
-  let platformSpy: any;
-<%   } -%>
+  let statusBarSpy: any, splashScreenSpy: any;
 
 <% } -%>
   beforeEach(async(() => {
 <% if (props.target.includes('cordova')) { -%>
     statusBarSpy = jasmine.createSpyObj('StatusBar', ['styleDefault']);
     splashScreenSpy = jasmine.createSpyObj('SplashScreen', ['hide']);
-    platformReadySpy = Promise.resolve();
-<%   if (props.ui === 'ionic') { -%>
-    platformSpy = jasmine.createSpyObj('Platform', { ready: platformReadySpy });
-<%   } -%>
 
 <% } -%>
     TestBed.configureTestingModule({
@@ -59,9 +52,6 @@ describe('AppComponent', () => {
       providers: [
         { provide: StatusBar, useValue: statusBarSpy },
         { provide: SplashScreen, useValue: splashScreenSpy },
-<%   if (props.ui === 'ionic') { -%>
-        { provide: Platform, useValue: platformSpy },
-<%   } -%>
       ]
 <% } else { -%>
       providers: []

generators/app/templates/src/app/shell/__ionic-tabs.shell.component.html

@@ -1,9 +1,7 @@
-<ion-tabs #navTabs useRouter="true">
-  <ion-router-outlet></ion-router-outlet>
-  <ion-tab-bar slot="bottom" [selectedTab]="selectedTabName$ | async">
-    <ion-tab-button *ngFor="let t of tabs; index as tabIndex" [tab]="t.name" show="true" [href]="t.route">
-      <ion-icon [name]="t.icon"></ion-icon>
-      <ion-label>{{ t.title | translate }}</ion-label>
-    </ion-tab-button>
-  </ion-tab-bar>
-</ion-tabs>
+<ion-router-outlet></ion-router-outlet>
+<ion-tab-bar slot="bottom" [selectedTab]="selectedTabName$ | async">
+  <ion-tab-button *ngFor="let t of tabs; index as tabIndex" show="true" [tab]="t.name" routerDirection="top" [routerLink]="'/'+t.route">
+    <ion-icon [name]="t.icon"></ion-icon>
+    <ion-label>{{ t.title | translate }}</ion-label>
+  </ion-tab-button>
+</ion-tab-bar>

generators/app/templates/src/app/shell/__ionic-tabs.shell.component.ts

@@ -5,20 +5,16 @@ import { filter, map } from 'rxjs/operators';
 import { of } from 'rxjs/observable/of';
 import { merge } from 'rxjs/observable/merge';
 
-import { SettingsComponent } from '@app/settings/settings.component';
-import { AboutComponent } from '@app/about/about.component';
-import { HomeComponent } from '@app/home/home.component';
-
 @Component({
   selector: 'app-shell',
   templateUrl: './shell.component.html',
   styleUrls: ['./shell.component.scss']
 })
 export class ShellComponent {
   tabs = [
-    { component: HomeComponent, name: 'home', route: 'home', title: 'Home', icon: 'home' },
-    { component: AboutComponent, name: 'about', route: 'about', title: 'About', icon: 'logo-angular' },
-    { component: SettingsComponent, name: 'settings', route: 'settings', title: 'Settings', icon: 'cog' }
+    { name: 'home', route: 'home', title: 'Home', icon: 'home' },
+    { name: 'about', route: 'about', title: 'About', icon: 'logo-angular' },
+    { name: 'settings', route: 'settings', title: 'Settings', icon: 'cog' }
   ];
   selectedTabName$: Observable<string>;
   constructor(private router: Router, private activatedRoute: ActivatedRoute) {
@@ -35,12 +31,6 @@ export class ShellComponent {
     }
     if (route && route.component === ShellComponent && route.firstChild) {
       route = route.firstChild;
-      // Fixed the bug#19420 : route.component is undefined if module is lazy
-      // See: https://github.com/angular/angular/issues/19420
-      while (route.firstChild) {
-        route = route.firstChild;
-      }
-      // Fixed #19420 end
       return this.tabs.find(tabElement => tabElement.route === route.routeConfig.path).name;
     }
   }