错误错误：未捕获（在承诺中）：无效链接：LoginPage

Question

I已经开始使用离子3（"@ionic/app-scripts": "3.1.6"）并得到此错误。我检查了这个link和许多其他人，但在我的情况下没有一个是有用的。

错误错误：未捕获（在承诺中）：无效链接：LoginPage

app.component.ts：

const unsubscribe = firebase.auth().onAuthStateChanged( user => {
  if (!user) {
    this.rootPage = 'LoginPage';
    unsubscribe();
  } else { 
    this.rootPage = HomePage;
    unsubscribe();
  }
});

login.ts：

@IonicPage({
  name: 'login'
})
@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class LoginPage {
    // ......
}

它最初工作，但现在它不工作，并显示相同的错误。如果我遗漏了任何其他配置，请告诉我。

编辑：package.json：

{
  "name": "my-places",
  "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": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/pro": "1.0.16",
    "@ionic/storage": "2.1.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.2",
    "firebase": "4.8.0",
    "angularfire2": "^5.0.0-rc.4",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.6",
    "typescript": "2.4.2"
  },
  "description": "An Ionic project",
  "config": { 
    "ionic_source_map": "source-map" 
  }
}

Answer 1

你正在使用延迟加载，但你也在改变页面的名称：

@IonicPage({
  name: 'login' // <---- here!
})
@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class LoginPage {
    // ......
}

正如你在the IonicPage docs中看到的：

如前所述，如果未提供name属性，则将其设置为类名。更改链接的名称非常简单。要更改用于链接到组件的名称，只需在装饰器中传递它，如下所示：

@IonicPage({
  name: 'my-page'
})

这将使用名称“my-page”创建指向MyPage组件的链接。与前面的示例类似，可以使用以下名称导航到页面：

goToMyPage() {
  // go to the MyPage component
  this.navCtrl.push('my-page');
}

因此，如果您在name装饰器中选择@IonicPage'login'，请在尝试使用该页面时使用相同的名称：this.rootPage = 'login';

Answer 2

看来你正在使用Angularfire2。所以你可以很容易地这样做，

app.component.ts

import { AngularFireAuth } from 'angularfire2/auth';

constructor(private afAuth: AngularFireAuth) {
     this.afAuth.authState.subscribe(user => {
      if (user) {
          this.rootPage = 'HomePage';
      } else {
          this.rootPage = 'LoginPage';
      }
    });
 }