RadSideDrawer causing error `More than one layout child inside a ContentView`


#1

I’ve been trying to webpack my app for a few days and keep getting the same error More than one layout child inside a ContentView. My package.json is below.

"description": "NativeScript Application",
"license": "SEE LICENSE IN <your-license-filename>",
"readme": "NativeScript Application",
"repository": "<fill-your-repository-here>",
"nativescript": { 
    "id": "org.nativescript.SMPO",
    "tns-android": { "version": "3.1.0" },
    "tns-ios": { "version": "3.1.0" }
}, 
"dependencies": {
    "@angular/animations": "4.1.3",
    "@angular/common": "4.1.3",
    "@angular/compiler": "4.1.3",
    "@angular/core": "4.1.3",
    "@angular/forms": "4.1.3",
    "@angular/http": "4.1.3",
    "@angular/platform-browser": "4.1.3",
    "@angular/router": "4.1.3",
    "nativescript-angular": "^3.1.3",
    "nativescript-telerik-ui": "2.0.1",
    "nativescript-theme-core": "^1.0.4",
    "reflect-metadata": "^0.1.10",
    "rxjs": "5.4.1",
    "tns-core-modules": "^3.1.0",
    "zone.js": "^0.8.16"
},
"devDependencies": { 
    "@angular/compiler-cli": "4.1.3", 
    "@ngtools/webpack": "^1.5.5", 
    "babel-traverse": "6.25.0", 
    "babel-types": "6.25.0", 
    "babylon": "6.17.4", 
    "copy-webpack-plugin": "^4.0.1",
    "extract-text-webpack-plugin": "^3.0.0", 
    "lazy": "^1.0.11", 
    "nativescript-css-loader": "^0.26.1", 
    "nativescript-dev-typescript": "^0.5.0", 
    "nativescript-dev-webpack": "^0.7.3", 
    "raw-loader": "^0.5.1", 
    "resolve-url-loader": "^2.1.0", 
    "typescript": "2.2.2", 
    "webpack": "^3.4.1", 
    "webpack-bundle-analyzer": "^2.8.3",
    "webpack-sources": "^1.0.1"
},
"scripts": {
    "ns-bundle": "ns-bundle",
    "publish-ios-bundle": "npm run ns-bundle --ios --publish-app",
    "generate-android-snapshot": "generate-android-snapshot --targetArchs arm,arm64,ia32 --install",
    "start-android-bundle": "npm run ns-bundle --android --run-app",
    "start-ios-bundle": "npm run ns-bundle --ios --run-app",
    "build-android-bundle": "npm run ns-bundle --android --build-app",
    "build-ios-bundle": "npm run ns-bundle --ios --build-app"
}

For the nativescript-telerik-ui, i have tried versions 2.0.0, 2.0.1, 3.0.0, 3.0.1, 3.0.2, 3.0.3, 3.0,4 and 3.1.0-2017-8-4-1. All yield the same error.

–EDIT–
Just tried with typescript version 2.3.2, same error.


#2

Can you share your repo? It seems like you have a custom component that, well, has more than one direct child. Do you have seperate view for ios and android in that component perhaps?


#3

I cant share the entire app but i can share the html code? I dont have a custom component on that page and its the same view for both platforms.


#4

So it turns out, theres a new import you need to use. import { NativeScriptUISideDrawerModule } from "nativescript-telerik-ui/sidedrawer/angular"; which you then add to your ngmodule imports