Ionic CSS and JS not using jsdelivr

@Tommertom here is apartial screen shot of my www folder. Are these the JS folders you are referring to?

Js files yes

Use a webpack bundle analyser to be able to link it to packages

And maybe compare with a clean project as earlier suggestion

@tommertom here is what the source of the webpage looks like that is not functioning correctly without the cdn reference

@Tommertom this is not helpful, as files are bundled differently in angular.

@jdiapice I will go back to my original ask…please try to replicate this in a minimal example and share that through GitHub. We cannot know for sure what your issue is if you do not share any code.

@mhartington i understand, its just a huge task to duplicate and strip. When i say its a huge application, its a huge application. it would take me days to strip down the application to a safe place to share. I dont know if you have a live support option where i can physically talk and show the the code. That might be the fastest approach

I’m simply asking you to create a blank angular app, and try to add Ionic to the project, or share the steps you’ve taken to add Ionic.

@mhartington in an above post i put all steps i performed to add Ionic to the angular application. Should be the 3rd or 4th post in this thread.

Revert the Change index.html <base href from / to ./

That is not needed.

@mhartington ok so looking more specifically into the issue, it looks like this is isolated to the ion-tabs and ion-tab-bar components. The Modals, popover and ion-nav look to be working correctly as well as the ion-select

  1. Please make sure you have removed the script references in the index.html
  2. Be sure that you have the IonicModule included in the module you have tabs setup in.

If you can’t replicate this in a short self-contained demo, I cant know for sure. Pleaes TRY to make something here. I’m not looking for a 1:1 example of your app, but just a small demo that trys to setup tabs.

@mharington the scripts are removed from index.html here is the code

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AppName</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <meta name="theme-color" content="#1976d2">
  <link rel="manifest" href="manifest.json">

  <link rel="dx-theme" data-theme="generic.light" href="assets/dx.light.css" data-active="true">
  <link rel="dx-theme" data-theme="generic.dark" href="assets/dx.dark.css" data-active="false">

  <!-- <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
  <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>  -->

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=no">

  <!--iOS-specific tags-->
  <meta name="apple-mobile-web-app-capable" content="no">
  <meta name="apple-mobile-web-app-title" content="AppName">
  <meta name="apple-touch-fullscreen" content="no"/>
  <meta name="apple-mobile-web-app-status-bar-style" content="default">

  <link rel="apple-touch-icon" sizes="152x152" href="assets/icons/apple-touch-icon.png" type="image/png">
  <link rel="apple-touch-icon" sizes="152x152" href="assets/icons/apple-touch-icon-precomposed.png" type="image/png">
  <link rel="apple-touch-icon" sizes="152x152" href="assets/icons/apple-touch-icon-ipad.png" type="image/png">
  <link rel="apple-touch-icon" sizes="167x167" href="assets/icons/apple-touch-icon-ipad-retina.png" type="image/png">
  <link rel="apple-touch-icon" sizes="180x180" href="assets/icons/apple-touch-icon-iphone-retina.png" type="image/png">

  <link href="assets/splash/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"/>
  <link href="assets/splash/iphone6_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"/>
  <link href="assets/splash/iphoneplus_splash.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image"/>
  <link href="assets/splash/iphonex_splash.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image"/>
  <link href="assets/splash/iphonexr_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"/>
  <link href="assets/splash/iphonexsmax_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image"/>
  <link href="assets/splash/ipad_splash.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"/>
  <link href="assets/splash/ipadpro1_splash.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"/>
  <link href="assets/splash/ipadpro3_splash.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"/>
  <link href="assets/splash/ipadpro2_splash.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"/>

  <link rel="manifest" href="manifest.webmanifest">
  <meta name="theme-color" content="#1976d2">
</head>
<body>
  <app-root></app-root>
  <noscript>Please enable JavaScript to continue using this application.</noscript>
</body>
</html>

IonicModule is included in the app.module.ts as the tabs are used within the app.component.ts

import { AndroidPushNotificationService } from './services/android-push-notification.service';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule, Pipe } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';

import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatDialogModule } from '@angular/material/dialog';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ScrollingModule } from '@angular/cdk/scrolling';

/* NGRX Store */
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { EffectsModule } from '@ngrx/effects';
import { MatSortModule } from '@angular/material/sort';

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { LoginComponent } from './user/components/login/login.component';
import { ChatRoomSelectionComponent } from './chat/components/chat-room-selection/chat-room-selection.component';
import { CustomHttpInterceptor } from './http-interceptor';
import { DragDirective } from './directives/drag-drop-file.directive';
import { BlockScrollStrategy } from '@angular/cdk/overlay';

***Excluded***

/*Ionic*/
import { IonicModule } from '@ionic/angular';
import { SwiperModule } from 'swiper/angular';

@NgModule({
  declarations: [
    ***Excluded***
  ],
  imports: [
    IonicModule.forRoot(),
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    SwiperModule,
   ***Excluded***
  ],
  providers: [// Http Interceptor(s) -  adds with Client Credentials
    [
      NotificationService,
      ThemeService,
      CheckForUpdateService,
      AndroidPushNotificationService,
      { provide: HTTP_INTERCEPTORS, useClass: CustomHttpInterceptor, multi: true }
    ],
  ],
  bootstrap: [AppComponent],
  entryComponents: [
    ***Excluded***
  ]
})
export class AppModule { }

That doesn’t tell me anything. Again, minimal demo that tries to use tabs. That is all i need.

ill see what i can get you