我正在将Ionic应用升级到Angular 5.0.3。不幸的是，应用程序崩溃时开始给出错误
TypeError: Cannot read property 'children' of null
at Content._readDimensions (http://localhost:8100/build/vendor.js:36522:34)
at dispatch (http://localhost:8100/build/vendor.js:24444:9)
at DomController._flush (http://localhost:8100/build/vendor.js:24417:13)
at rafCallback (http://localhost:8100/build/vendor.js:24410:22)
我已经能够发现错误与_readDimensions（）函数无法在app.html中的ion-content元素上找到父元素有关。我的app.html文件如下所示：
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p?.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
我的package.json文件如下所示：
{
"name": "ionic-hello-world",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"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/storage": "2.1.3",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"rxjs": "5.5.2",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.18",
"chart.js": "^2.5.0",
"cordova-android": "^6.2.3",
"cordova-plugin-console": "^1.0.5",
"cordova-plugin-device": "^1.1.4",
"cordova-plugin-splashscreen": "^4.0.3",
"cordova-plugin-statusbar": "^2.2.1",
"cordova-plugin-whitelist": "^1.3.1",
"ionic-plugin-keyboard": "^2.2.1",
"ng2-charts": "^1.5.0",
"cordova-ios": "~4.5.4"
},
"devDependencies": {
"@ionic/app-scripts": "3.1.8",
"rollup-plugin-replace": "^1.1.1",
"typescript": "2.4.2"
},
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-console",
"cordova-plugin-statusbar",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": [],
"description": "myApp: An Ionic project",
"config": {
"ionic_rollup": "./src/config/rollup.config.js"
},
"cordova": {
"plugins": {
"cordova-plugin-console": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-whitelist": {},
"ionic-plugin-keyboard": {},
"phonegap-plugin-push": {
"SENDER_ID": "xxxxxxxxxx"
}
},
"platforms": [
"android",
"ios"
]
}
}
如果有人能够帮我解决这个问题，我会很高兴。
修改 该应用程序最初使用这些依赖项：
{
"name": "ionic-hello-world",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"@angular/common": "2.4.8",
"@angular/compiler": "2.4.8",
"@angular/compiler-cli": "2.4.8",
"@angular/core": "2.4.8",
"@angular/forms": "2.4.8",
"@angular/http": "2.4.8",
"@angular/platform-browser": "2.4.8",
"@angular/platform-browser-dynamic": "2.4.8",
"@angular/platform-server": "2.4.8",
"@ionic/cloud-angular": "^0.11.0",
"@ionic/storage": "2.0.0",
"chart.js": "^2.5.0",
"cordova-android": "^6.2.3",
"cordova-plugin-console": "^1.0.5",
"cordova-plugin-device": "^1.1.4",
"cordova-plugin-splashscreen": "^4.0.3",
"cordova-plugin-statusbar": "^2.2.1",
"cordova-plugin-whitelist": "^1.3.1",
"ionic-angular": "2.2.0",
"ionic-native": "2.4.1",
"ionic-plugin-keyboard": "^2.2.1",
"ionicons": "3.0.0",
"ng2-charts": "^1.5.0",
"phonegap-plugin-push": "^1.8.4",
"rxjs": "5.0.1",
"sw-toolbox": "3.4.0",
"zone.js": "0.7.2",
"cordova-ios": "~4.5.4"
},
"devDependencies": {
"@ionic/app-scripts": "1.1.4",
"rollup-plugin-replace": "^1.1.1",
"typescript": "2.0.9"
},
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-console",
"cordova-plugin-statusbar",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": [],
"description": "myApp: An Ionic project",
"config": {
"ionic_rollup": "./src/config/rollup.config.js"
},
"cordova": {
"plugins": {
"cordova-plugin-console": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-whitelist": {},
"ionic-plugin-keyboard": {},
"phonegap-plugin-push": {
"SENDER_ID": "xxxx"
}
},
"platforms": [
"android",
"ios"
]
}
}
修改 该错误似乎与Nav元素有关，似乎位于我的app.component.ts中，看起来像这样
import {Component, ViewChild} from "@angular/core";
import {AlertController, IonicApp, Nav, Platform, ToastController, App, NavController} from "ionic-angular";
import {SplashScreen} from "@ionic-native/splash-screen";
import {StatusBar} from "@ionic-native/status-bar";
import {SecondPage} from "../pages/secondpage/secondpage";
import {FirstPage} from "../pages/firstpage/firstpage";
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav: NavController;
public rootPage: any = SettingsPage;
private backButtonPressedOnceToExit: boolean = false;
pages: Array<{ title: string, component: any }>;
constructor(private toastCtrl: ToastController, platform: Platform, private alertCtrl: AlertController, private ionicApp: IonicApp, private splashScreen: SplashScreen, private statusBar: StatusBar) {
if (window.localStorage.getItem('key')) {
this.rootPage = EarningsPage;
}
platform.ready().then(() => {
console.log("platform ready");
if (platform.is('cordova')) {
/** not if testing browser */
statusBar.styleDefault();
splashScreen.hide();
}
this.pages = [
{title: 'Page 1', component: FirstPage},
{title: 'Page 2', component: SecondPage},
];
});
platform.registerBackButtonAction(() => {
[...]
});
}
showToast() {
[...]
}
openPage(page) {
this.nav.setRoot(page.component);
}
}
在我进入平台就绪事件之前，应用程序崩溃了。当我尝试在构造函数中将其记录出来时，nav变量是未定义的。然后我在控制台中收到以下错误：
ERROR TypeError: parent.registerChildNav is not a function
at new Nav (nav.js:67)
at createClass (core.js:12449)
at createDirectiveInstance (core.js:12284)
at createViewNodes (core.js:13742)
at callViewAction (core.js:14176)
at execComponentViewsAction (core.js:14085)
at createViewNodes (core.js:13770)
at createRootView (core.js:13631)
at callWithDebugContext (core.js:15056)
at Object.debugCreateRootView [as createRootView] (core.js:14339)
View_MyApp_0 @ MyApp.html:19
其次是错误背景和＆＃34;无法阅读财产＆＃39;儿童＆＃39; of null＆＃34;错误。
答案 0 :(得分：0)
即使是最新的离子版也只使用Angular 5.0.0。将依赖项更改为以下内容：
"dependencies" : {
...
"@angular/common": "5.0.0",
"@angular/compiler": "5.0.0",
"@angular/compiler-cli": "5.0.0",
"@angular/core": "5.0.0",
"@angular/forms": "5.0.0",
"@angular/http": "5.0.0",
"@angular/platform-browser": "5.0.0",
"@angular/platform-browser-dynamic": "5.0.0",
"@ionic/storage": "2.1.3",
"ionic-angular": "3.9.0",
"rxjs": "5.5.2",
"zone.js": "0.8.18"
...
},
"devDependencies: {
"@ionic/app-scripts": "3.1.0"
"typescript" : "2.4.2"
}
更重要的一点是：确保使用最新的 LTS 节点版本：目前它是8.9.4。