Use @ionic/core without unpkg cdn in non-Ionic (Angular 6) app

Question

I am attempting to use components in the @ionic/core package in an Angular 6 app. (it's not a CLI app, and I cannot use @ionic/angular).

I cannot get the components to work without importing directly from the cdn, i.e.

<link href="https://unpkg.com/@ionic/[email protected]/css/ionic.bundle.css" rel="stylesheet">

<script src="https://unpkg.com/@ionic/[email protected]/dist/ionic.js"></script>

I've added @ionic/core as an npm dependency, and tried to import it every which way, but can't get the components to render.

Here is a Stackblitz editor: https://stackblitz.com/edit/angular-34cilj

The ion-list's in the app.component.html should work per the docs when imported correctly. There are some commented import attempts in the app.module.ts

Answer 1

Thanks for the illumination, that's exactly what I wanted. This is what I did to make it work:

• Solution 1: as it worked for me by importing these libraries in index.html file of your Stackblitz project (I saved the file in Stackblitz so you can check), I did the same in my angular src/index.html file and also worked. The problem is I don't want to have the project with external CDN dependences, so I created the second solution.

• Solution 2: use it locally:

  1. Install ionic core with:

     npm install @ionic/core --save
     

  2. Add these lines to vendor.ts file (I have this file imported from main.ts for the sake of cleanliness, but it's also valid if these lines are imported directly in main.ts):

     import "../node_modules/@ionic/core/css/ionic.bundle.css";
     import "../node_modules/@ionic/core/dist/ionic.js";
     

     or, if you have these files located in another path, e.g. in /src/

     import "./ionic.bundle.css";
     import "./ionic.js";
     

  3. Copy the folder node_modules/@ionic/core/dist/ionic in /src, at the same level of "assets"

  4. Tell Angular Cli to consider this folder as an exportable folder when serve and/or building, by adding this line to the angular-cli.json file:

     "assets": [ 
         "ionic",
         ...
     ],
     

I'm thinking in create a new script in package.json for copying the "ionic" folder to /src once the package @ionic/core is upgraded by npm, but I don't think it is neccesary and I always remove the ~ char to every package to be sure npm can't breakg my project.

I hope it helps!