@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
- Please make sure you have removed the script references in the index.html
- 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