Primeng and Ionic 4

[ukie]

Hi, I recently purchased the Serentiy template as I really likes the stying that was done. I am trying to use that layout with ionic 4 as a wrapper so I can make it into a mobile app. I have got the template migrated over into my app, but the scrolling does not work when I load the route with the layout. The scrolling does work if I load a component outside of app.main.component. I have tried wrapping several different areas with <ion-content> but no luck. Any thoughts on how I can make this work?

Thanks

[ukie]

To reduce any unknowns, I tried taking a blank ionic project and merging it over to the purchased Serenity Project. I did the following:

• Copied the ionic.config.json
  I updated the imports in app.module,
  Merged the angular.json file to include ionic requirements
  Copied over the required fires, global.scscc, theme folder, etc
  Updated the app.main.component to use the ionic

I can get the app to run, but I am still unable to scroll. I am not sure what is blocking the scrolling, but if someone can help figure this out, that would be awesome. I think it is something with the angular.json file. I am using the command ionic serve to deploy the app. Thanks

angular.json
{
"$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
"version": 1,
"defaultProject": "app",
"newProjectRoot": "projects",
"projects": {
"app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "www",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
},
{
"glob": "**/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
},
"src/assets",
"src/upload.php",
"src/favicon.ico"
],
"styles": [
{
"input": "src/theme/variables.scss"
},
{
"input": "src/global.scss"
},
"node_modules/primeng/resources/primeng.min.css",
"node_modules/@fullcalendar/core/main.min.css",
"node_modules/@fullcalendar/daygrid/main.min.css",
"node_modules/@fullcalendar/timegrid/main.min.css",
"node_modules/quill/dist/quill.snow.css",
"src/styles.scss"
],
"scripts": [
"node_modules/chart.js/dist/Chart.js",
"node_modules/@fullcalendar/core/main.js",
"node_modules/@fullcalendar/daygrid/main.js",
"node_modules/@fullcalendar/timegrid/main.js",
"node_modules/@fullcalendar/interaction/main.js",
"node_modules/quill/dist/quill.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
},
"ci": {
"progress": false
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "app:build"
},
"configurations": {
"production": {
"browserTarget": "app:build:production"
},
"ci": {
"progress": false
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [],
"scripts": [],
"assets": [
{
"glob": "favicon.ico",
"input": "src/",
"output": "/"
},
{
"glob": "**/*",
"input": "src/assets",
"output": "/assets"
}
]
},
"configurations": {
"ci": {
"progress": false,
"watch": false
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
"exclude": ["**/node_modules/**"]
}
},
"ionic-cordova-build": {
"builder": "@ionic/angular-toolkit:cordova-build",
"options": {
"browserTarget": "app:build"
},
"configurations": {
"production": {
"browserTarget": "app:build:production"
}
}
},
"ionic-cordova-serve": {
"builder": "@ionic/angular-toolkit:cordova-serve",
"options": {
"cordovaBuildTarget": "app:ionic-cordova-build",
"devServerTarget": "app:serve"
},
"configurations": {
"production": {
"cordovaBuildTarget": "app:ionic-cordova-build:production",
"devServerTarget": "app:serve:production"
}
}
}
}
},
"app-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "app:serve"
},
"configurations": {
"ci": {
"devServerTarget": "app:serve:ci"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": ["**/node_modules/**"]
}
}
}
}
},
"cli": {
"defaultCollection": "@ionic/angular-toolkit"
},
"schematics": {
"@ionic/angular-toolkit:component": {
"styleext": "scss"
},
"@ionic/angular-toolkit:page": {
"styleext": "scss"
}
}
}

[ukie]

So playing more with this, if I remove the styles related to Ionic, it does work, but I can't use any ionic components, which is disappointing. The goal would be to mix both together, but I am thinking this is more wishful thinking than a reality. Has anyone else used purchased templates and tried to work with Ionic?