CODEWITHSUNDEEP
angularionic-frameworkdeployment
S_NoBEl
S_NoBEl

Reputation: 111

Angular/Ionic build not displaying correctly without errors

I developed an Angular/Ionic project. But now on building (npm run or npm run --prod) the build does not actually work. Only half the page is showing in the browser, no errors are provided in the console. For clarity: I'm trying to deploy it on web. The build runs successfully without any errors, but the following warnings;

21 rules skipped due to selector errors

Warning: node_modules\ngx-quill\fesm2022\ngx-quill.mjs depends on 'quill'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: \src\app\pages\events\single\single.page.ts depends on 'moment'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Dependencies are (working standalone)

  "dependencies": {
    "@angular/animations": "^17.0.2",
    "@angular/common": "^17.0.2",
    "@angular/compiler": "^17.0.2",
    "@angular/core": "^17.0.2",
    "@angular/forms": "^17.0.2",
    "@angular/platform-browser": "^17.0.2",
    "@angular/platform-browser-dynamic": "^17.0.2",
    "@angular/router": "^17.0.2",
    "@capacitor/app": "5.0.6",
    "@capacitor/core": "5.5.1",
    "@capacitor/haptics": "5.0.6",
    "@capacitor/keyboard": "5.0.6",
    "@capacitor/status-bar": "5.0.6",
    "@ionic/angular": "^7.5.0",
    "@ngx-translate/core": "^15.0.0",
    "@ngx-translate/http-loader": "^8.0.0",
    "ionicons": "^7.2.1",
    "moment": "^2.29.4",
    "ngx-quill": "^24.0.4",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.2"
  },

The build shows the page as follows: enter image description here

At the same time, locally serving the build (ionic serve) shows this page, as it should be enter image description here

Upvotes: 0

Views: 204

Answers (1)

S_NoBEl
S_NoBEl

Reputation: 111

I finally figured it out after a long research. The trick is importing the Ionic elements.

E.g. rather than doing

import { IonicModule } from '@ionic/angular';

@Component({
  imports: [ExploreContainerComponent, IonicModule],
})

It should become

import { IonInput, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';

@Component({
  imports: [ExploreContainerComponent, IonInput, IonHeader, IonToolbar, IonTitle, IonContent],
})

I do, however, not know why it doesn't show any errors.

Upvotes: 2

Related Questions