Ionic umd module ids

[vilanz]

Type of Issue

[X] Bug Report
[ ] Feature Request

Description

Whenever I try to include something that uses anything from ionic-angular in my package, the building proccess breaks.
No matter what specific components/service/module I'm using, 99% of the time the file mentioned in the error is something in the utils folder,.

Building Angular library
Generating bundle for ion-with-packagr
Cleaning bundle build directory
Processing assets
Running ngc
Compiling to FESM15

BUILD ERROR
ENOENT: no such file or directory, open 'C:\...\...\...\...\ion-with-packagr\node_modules\ionic-angular\components\app\app-constants.ts'
Error: ENOENT: no such file or directory, open 'C:\...\...\....\...\ion-with-packagr\node_modules\ionic-angular\components\app\app-constants.ts'

I've read #129 and found a few issues related to this, which all can be solved by including the faulty package's UMD module ID in "externals" - I tried to use "ionicBundle" (shown below) for "ionic-angular", but no effect.

The new RCs seem to change something related to this, but I can't install them. (npm ERR! enoent ENOENT: no such file or directory, chmod 'C:............\ion-with-packagr\node_modules\ng-packagr\cli\main.js')

I've noticed Ionic seems to handle module IDs in a different way than other packages. I don't know if it could be related to this issue.

/ionic-angular/bundles/ionic.umd.js

(function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
   typeof define === 'function' && define.amd ? define(['exports'], factory) :
   (factory((global.ionicBundle = global.ionicBundle || {})));
}(this, (function (exports) { 'use strict';

/ionic-angular/umd/index.js

(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "..._< bunch of stuff >_..."], factory);
    }
})(function (require, exports) {

How To Reproduce

1. Start a new Angular project
2. Install ionic-angular with --save (or just use the ionic start command as the first step)
3. Install ng-packagr with --save-dev
4. Set up a packaging environment and have a file be exported in public_api.ts
5. In that file, import something from "ionic-angular" (the IonicModule or any component) and use it in the file itself
6. Run ng-packagr -p -package.json

Expected Behaviour

Package ionic-angular properly and have it as a dependency.

Version Information

  "dependencies": {
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/storage": "2.1.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "peerDependencies": {
    "ionic-angular": "3.9.2",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/storage": "2.1.3",
    "ionicons": "3.0.0"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.6",
    "ng-packagr": "^1.6.0",
    "typescript": "2.4.2"
  }

[chenyuanchn]

@ludvon I met the same problem. Have you solved it?

[vilanz]

@chenyuanchn Nope. Still getting the same error so far.

[Inlustra]

@ludvon Have you added ionic-angular to your "externals" in package.json?
Surely you don't want to bundle ionic-angular in your package?

I might be wrong on this one as I'm just now understanding it myself but from the ionic-angular bundle code you provided:
(factory((global.ionicBundle = global.ionicBundle || {})));
I think ionicBundle is the umd bundle id?
So I think your ngPackage json should look something like this:

    "lib": {
      "entryFile": "src/public_api.ts",
      "umdModuleIds": {
        "ionic-angular": "ionicBundle"
      }
    }
  }

You'd also want to move everything from dependencies into devDependencies and peerDependencies

Again, I might be wrong, would be good to get someone with a bit more knowledge on the subject to have a look?

[dherges]

@Inlustra Yes, the umd module id should be ionicBundle (from the code shown in this issue).

In the 1.x version, this config needs to be placed in lib.externals as a key/value-pair, the key being the (TypeScript) module identifier (= the string value you write in import {...} from 'module-identifier'), the value being the umd module id (i.e., here it's ionicBundle)

In the 2.x version, this config needs to go the lib.umdModuleIds section. You can omit lib.umdModuleIds altogether in which case rollup is going to "guess" the umd module id.

It'll be super great when someone from the ionic team could reach out to us here or someone of you goes asking them how they're handling UMD module ids. When idemntifiers are stable, it'll be a good enhancement to ng-packagr to looks up ionic's umd module ids from a list of "well-known magic values". Relevant code is here: https://github.com/dherges/ng-packagr/blob/master/src/lib/steps/rollup.ts#L36

[Inlustra]

@dherges I think the bigger issue is that they aren't even UMD patterns for bundling - half of their ionic-native plugins are bundled in pure es2015, like a copy/paste of their source directories ... 😞

[vilanz]

@Inlustra @dherges Sorry, I didn't word my initial post quite right.
Including "ionicBundle" in lib.externals still gave me the same error. Might be the weird way the Ionic team compiles their projects, as @Inlustra pointed out.

[olivercodes]

@dherges Adding the ionicBundle to umdModuleIds does not work. Are there any other details to the workaround that we are missing in this thread?

...
"$schema":"./node_modules/ng-packagr/package.schema.json",
"name":"@my-comp",
"version":"1.0.0",
"ngPackage": {
  "lib": {
    "entryFIle": "public_api.ts",
     "umdModuleIds": {
        "ionic-angular": "ionicBundle"
     }
   }
},
scripts: {
  "packagr":"ng-packagr -p ng-package.json",
  // rest of scripts
},
... rest of package.json

[dherges]

What exactly is then non-working? Can you put up a repro?

[dherges]

From the initial post:

Compiling to FESM15
<some-path>\
ion-with-packagr\node_modules\ionic-angular\components\app\app-constants.ts

I wouldn't know why rollup tries to resolve a module from *.ts file in node_modules. It could be that re-mapping the source maps fails. I'd need a repro to tell more.

[vilanz]

Interestingly, Ionic stuff seems to be working perfectly with the new 2.0.0 release.
I'll create a repro if anything breaks.

[olivercodes]

Sorry @dherges, I'll send you repro soon. Busy day

@ludvon that's interesting! I'll upgrade and try again!!