Hi I’m using Angular12 with monaca(onsenUI)/Cordova10 project.
When I open the project without using firebase I can open in iOS without error but, if I access to firebase it returns 「script error」…

I can access from Web, Android but can’t access from iOS if I access to firebase… please help me.

I contact to Monaca but, answer was there’s maybe a problem from “WKWebView”. WKWebView will have “CORS” so I tried to remove with plugins but doesn’t change…

■ My dependency

{
    "name": "my-app",
    "version": "0.0.0",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "watch": "ng build --watch --configuration development",
        "test": "ng test",
        "monaca:preview": "ng serve --base-href='.' & ng build --base-href='.' --output-path='www' --watch",
        "monaca:transpile": "ng build --base-href='.' --output-path='www'",
        "monaca:debug": "ng build --base-href='.' --output-path='www' --watch"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "~12.2.0",
        "@angular/cdk": "^12.2.9",
        "@angular/common": "~12.2.0",
        "@angular/compiler": "~12.2.0",
        "@angular/core": "~12.2.0",
        "@angular/fire": "^7.1.0-rc.5",
        "@angular/forms": "~12.2.0",
        "@angular/material": "^12.2.9",
        "@angular/platform-browser": "~12.2.0",
        "@angular/platform-browser-dynamic": "~12.2.0",
        "@angular/router": "~12.2.0",
        "compressorjs": "^1.1.1",
        "cordova-plugin-camera": "5.0.1",
        "cordova-plugin-device": "2.0.3",
        "cordova-plugin-geolocation": "4.0.2",
        "cordova-plugin-inappbrowser": "5.0.0",
        "cordova-plugin-splashscreen": "6.0.0",
        "cordova-plugin-statusbar": "2.4.3",
        "cordova-plugin-whitelist": "1.3.4",
        "firebase": "^9.1.2",
        "moment": "^2.29.1",
        "monaca-plugin-monaca-core": "3.3.1",
        "ngx-onsenui": "^7.0.0",
        "onsenui": "^2.10.10",
        "rxfire": "^6.0.0",
        "rxjs": "~6.6.0",
        "tslib": "^2.3.0",
        "zone.js": "~0.11.4"
    },
    "devDependencies": {
        "@angular-devkit/architect": "^0.1202.9",
        "@angular-devkit/build-angular": "~12.2.1",
        "@angular/cli": "~12.2.1",
        "@angular/compiler-cli": "~12.2.0",
        "@types/jasmine": "~3.8.0",
        "@types/jquery": "^3.5.6",
        "@types/node": "^12.20.28",
        "codelyzer": "^6.0.2",
        "cordova": "^10.0.0",
        "firebase-tools": "^9.20.0",
        "fuzzy": "^0.1.3",
        "inquirer": "^8.2.0",
        "inquirer-autocomplete-prompt": "^1.4.0",
        "jasmine-core": "~3.8.0",
        "jasmine-spec-reporter": "^7.0.0",
        "karma": "~6.3.0",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage": "~2.0.3",
        "karma-jasmine": "~4.0.0",
        "karma-jasmine-html-reporter": "~1.7.0",
        "open": "^8.3.0",
        "protractor": "^7.0.0",
        "ts-node": "^10.2.1",
        "tslint": "^6.1.3",
        "typescript": "~4.3.5"
    },
    "cordova": {
        "plugins": {
            "cordova-plugin-camera": {},
            "cordova-plugin-device": {},
            "cordova-plugin-geolocation": {},
            "cordova-plugin-inappbrowser": {},
            "monaca-plugin-monaca-core": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {}
        }
    }
}

Sorry, I found it in the playground.

I will share if anyone needs the same information.
https://onsen.io/playground/?framework=angular2&category=common patterns&module=navigator_tabbar

Hi, I’m using Angular2.
Could anyone help about this topic?
Please kindly share me simple code.

• Want to do
  I want to use OnsNavigator to move to the page not in the ons-tab.

• problem
  If I set the ons-navigator like below code in app.html, I can’t use tabbar.
  I get TypeError: JSON.stringify cannnot serialize cyclic structures.

• code(app.html)

<ons-navigator swipeable id="navi" var="navi" [page]="dashboard">
<ons-page>
  <div class="content">
    <ons-tabbar [attr.animation]="animation" position="auto">
      <div class="tabbar__content"></div>
      <div class="tabbar">
        <ons-tab icon="columns" [page]="dashboard" active></ons-tab>
        <ons-tab icon="search" [page]="search"></ons-tab>
        <ons-tab icon="group" [page]="post"></ons-tab>
      </div>
    </ons-tabbar>
  </div>
</ons-page>
</ons-navigator>

Kindly confirm.