Ionic CSS and JS not using jsdelivr

Ionic Framework Ionic Angular
1

I need my application to work 100% off the grid, therefore i cannot use the jsdelivr for ionic core as follows

<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"/>

I added the ionic.bundle.css to the angular.json scripts styles section but when i add the ionic.esm.js and ionic.js the entire app breaks. What is the best way to reference these files for offline use?

2

You seem to be using angular?

If so, then you should not be using CDN to get Ionic in the app.

Ionic Angular out of the box does the integration itself by the angular bundling process.

So imho, you seem to be doing something wrong in an earlier stage.

What happens if you remove the code you included? I reckon you put them in index.html.

3

I am using angular. It was an Angular 12 application that I added Ionic to. When I do not include the CDN lines in the index.html then everything that is Ionic has no styling or functionality.

here is my packages.json

{
  "name": "appName",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^12.2.4",
    "@angular/cdk": "^12.2.4",
    "@angular/common": "^12.2.4",
    "@angular/compiler": "^12.2.4",
    "@angular/core": "^12.2.4",
    "@angular/forms": "^12.2.4",
    "@angular/google-maps": "^12.2.10",
    "@angular/material": "^12.2.4",
    "@angular/platform-browser": "^12.2.4",
    "@angular/platform-browser-dynamic": "^12.2.4",
    "@angular/router": "^12.2.4",
    "@angular/service-worker": "^12.2.4",
    "@capacitor/android": "3.2.3",
    "@capacitor/angular": "^1.0.3",
    "@capacitor/camera": "^1.1.2",
    "@capacitor/core": "^3.2.3",
    "@capacitor/device": "^1.0.4",
    "@capacitor/geolocation": "^1.1.2",
    "@capacitor/ios": "3.2.3",
    "@capacitor/push-notifications": "^1.0.4",
    "@ionic-native/file": "^5.36.0",
    "@ionic-native/file-opener": "^5.36.0",
    "@ionic/angular": "^5.8.1",
    "@ionic/angular-toolkit": "^4.0.0",
    "@ionic/core": "^5.8.5",
    "@ionic/pwa-elements": "^3.0.2",
    "@ngrx/effects": "^12.4.0",
    "@ngrx/store": "^12.4.0",
    "@ngrx/store-devtools": "^12.4.0",
    "@types/signalr": "^2.2.36",
    "bootstrap": "^4.4.1",
    "canvas": "^2.5.0",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-file-opener2": "^3.0.5",
    "core-js": "^2.6.11",
    "devextreme": "^19.2.7",
    "devextreme-angular": "^19.2.7",
    "guid-typescript": "^1.0.9",
    "jetifier": "^2.0.0",
    "jquery": "^3.4.1",
    "material-design-icons": "^3.0.1",
    "material-icons": "^0.3.1",
    "ngx-bootstrap": "^3.2.0",
    "ngx-color": "^5.0.2",
    "popper": "^1.0.1",
    "rxjs": "~6.5.4",
    "signalr": "^2.4.1",
    "swiper": "^7.0.9",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^12.2.3",
    "@angular/cli": "^12.2.3",
    "@angular/compiler-cli": "^12.2.4",
    "@angular/language-service": "^12.2.4",
    "@capacitor/cli": "^3.2.3",
    "@types/adal": "^1.0.29",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/jquery": "^2.0.53",
    "@types/node": "^12.12.34",
    "codelyzer": "^6.0.0",
    "devextreme-cli": "latest",
    "devextreme-themebuilder": "^19.2.7",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.4",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~6.1.0",
    "typescript": "~4.3.5"
  }
}
4

Ok
I don’t have much experience doing it that way

If interested, u could start a new ionic angular project using the ionic cli. And then compare package.json as well as angular.json?

Earlier this month there was a post here on someone doing something similar. Did u use angular schematics to add ionic? Sonething like ng add …

5

this is the steps i followed to upgrade the Angular App

Steps to upgrade to include Ionic

1.  npm install @capacitor/core
2.  npm install @capacitor/cli
3.  npm install @capacitor/angular --force
4.  npm install @ionic/angular
5.  npm install @ionic/angular-toolkit
6.  ionic init appName
7.  npx cap init appName com.company.appName
8.  Change angular.json outputPath from dist/appName to www
9.  Change index.html <base href from / to ./
10.  Update ionic.config.json to the following
	{
  		"defaultProject" : "appName",
  		"projects":{
    			"appName":{
      				"name": "appName",
      				"integrations": {
        				"capacitor": {}
      				},
      				"type": "angular"
    			}
  		}
 
	}
11.  Update angular.json to add the following to the bottom
	"defaultProject": "appName",
  	"cli": {
    		"defaultCollection": "@ionic/angular-toolkit"
  	}, 
  	"schematics": {
    		"@ionic/angular-toolkit:component": {
      		"styleext": "css"
    		},
    		"@ionic/angular-toolkit:page": {
      			"styleext": "css"
    		}
  	}
12.  ng build
13.  ionic build
14.  ionic serve --ssl --port=4300
15.  ionic cap add android
16.  ionic cap add ios
17.  ionic cap sync
18.  ionic cap open android
6

This of any help?

I cant comment on your steps.

image
image640×1136 78.8 KB

7

i went ahead and did the ng add @ionic/angular and was able to remove the cdn references, however, the site is not functioning the same way.

this is what the rendered code looks like with the CDN references

image
image1265×319 34.7 KB

this is what the rendered code looks like after the add @ionic/angular

image
image1211×511 29.3 KB

8

The issue looks to be that the following js scripts are not being included via the ng add @ionic/angular command

<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>

when I add the CDN references back for these 2 js files, the issues go away. However, I need these js files to not be pulled from the CDN and referenced from within framework

9

Just run ng add @ionic/angular

Do not use the CDN when you are using a framework.

10

@mhartington the issue is when i run that, the output of the HTML is totally different then when the CDN is there. The ionic.js and the ionic.esm.js do not look like they are being refereced or working

11

@mhartington i am still having an issue with this. I ran the ng add @ionic/angular and i am having issues with removing the CDN references. The ion-tabs are not functioning as expected (see my above screen shots). The only way it works properly is if i reference the ionic.esm.js and the ionic.js files. What am i missing here?

12

Can you share your project? If you are using a framework, you should not be using the CDN version at all.

13

@mhartington unfortunately i cannot share the project due to privacy contracts, i can do a screen share or show code on specific files. I am using the framework and ran the ng add @ionic/angular and it went ahead and added that was needed. I uncommented the CDN references but the application breaks. When I add

<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>

back in everything works as expected. But obviously the idea is to not have that referenced

14

Then make a replica that has the bare minimum. Scree shares will not tell me anything.

15

@mhartington let me ask this question… what is the ionic.esm.js that is being pulled from the CDN? How is that included with the framework when ionic add is called? How can I check that it is actually being included and the ionic add worked properly?

16

May I suggest to start a new angular project, add ionic via ng add and then add one component? So you know if the basics work?

And maybe from there on also start adding your own code?

I wonder if it is going to be easy to find what happened without rebuilding from what is working

17

Or just start a new project with the Ionic CLI…

npm install @ionic/cli
ionic start myApp --type angular
18

That file is not for ionic/angular projects. You are trying to load Ionic using the wrong approach.

19

@mhartington this project is a very large Angular 12 application that was requested to be ported to an Android and IOS Application. Ionic was the perfect addition to help us do so. So we added Ionic to the Angular 12 application (unfortunately we were using the CDN). We now have a requirement to run offline and in PWA so we are looking for everything to be downloaded upon initial load and not lazy loaded as needed. So we are attempting to get rid of the CDN and run the framework directly.

With the CDN lines removed from index.html we went ahead an ran the Ionic Add as stated on the Ionic Documentation. This, however has broken our Ion-Tabs layout. If we put the reference back, the application is happy. But we obviously want that removed.

The issue with starting a new project with the Ionic CLI is rewriting the entire project we have worked on for 2 years which we cannot do.

How is the ionic.esm.js packaged within the framework when the ionic add is performed? there has to be something i am missing as to why it works when i include the script from the CDN and doesnt work when i remove it.

20

It is bundled by webpack and can be found in the js bundles in the www folder. If u inspect these you can find it as part of the chunks