Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ionic umd module ids #434

Open
vilanz opened this Issue Dec 21, 2017 · 15 comments

Comments

8 participants
@vilanz
Copy link

vilanz commented Dec 21, 2017

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

This comment has been minimized.

Copy link

chenyuanchn commented Dec 29, 2017

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

@vilanz

This comment has been minimized.

Copy link
Author

vilanz commented Dec 29, 2017

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

@Inlustra

This comment has been minimized.

Copy link

Inlustra commented Jan 3, 2018

@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

This comment has been minimized.

Copy link
Collaborator

dherges commented Jan 6, 2018

@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

@dherges dherges changed the title ENOENT error when packaging something that uses Ionic Ionic umd module ids Jan 6, 2018

@Inlustra

This comment has been minimized.

Copy link

Inlustra commented Jan 8, 2018

@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 ... 😞

@thm1118 thm1118 referenced this issue Jan 12, 2018

Closed

Ionic support #646

@vilanz

This comment has been minimized.

Copy link
Author

vilanz commented Jan 12, 2018

@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

This comment has been minimized.

Copy link

olivercodes commented Feb 2, 2018

@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

This comment has been minimized.

Copy link
Collaborator

dherges commented Feb 4, 2018

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

@dherges

This comment has been minimized.

Copy link
Collaborator

dherges commented Feb 4, 2018

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

This comment has been minimized.

Copy link
Author

vilanz commented Feb 5, 2018

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

@olivercodes

This comment has been minimized.

Copy link

olivercodes commented Feb 5, 2018

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

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

@SerkanSipahi

This comment has been minimized.

Copy link

SerkanSipahi commented Apr 7, 2018

@olivercodes any update?

@olivercodes

This comment has been minimized.

Copy link

olivercodes commented Apr 24, 2018

@SerkanSipahi @dherges

Update - the latest version of ng-packagr I was able to bundle an Ionic application and then reuse it (YAY!). However, it only works if that application does not use lazy loading for any of it's components. It seems that when you use ng-packagr on a component/page that brings in any lazy loaded components, it then breaks. Just gives the regular "invalid link" error when a packaged component/page tries to navigate to a page/component that was brought in as a lazy loaded import.

@mfdeveloper

This comment has been minimized.

Copy link

mfdeveloper commented Apr 26, 2018

The @Inlustra solution works for me, but I've replaced the lib.umdModuleIds key by lib.externals, like @dherges said. I'm using ng-packagr: 1.7.0 for Angular 4.x (AOT builds) and Ionic 3.2.

Moreover, I'm using sub-package directory structure described in tell-me-now-how-do-i-use-secondary-entry-points-aka-sub-packages, that generates a mypackage.d.ts referenced like typings into package.json file. That use typescript exports like this:

export { MyComponentOrService as 0a } from 'my-package/subpackage';

I don't know why, but this don't work only in ng-packagr: 1.7.0. So, I just remove the as 0a and into my ionic app, import directly from my-package. Sadly, I have that create a script to remove this, or I need remember remove them after every ng-package build 😢

For sass, the 1.7.0 don't have any schema key to map your .sass/.css files. I've to create a script to copy all my extra .sass (that not add to my component using styleUrls of @Component decorator) to src dist compiled package.

Like suggested by @dherges on issue #344 , I've created a branch [angular-4.x] that use the ng-packagr 1.7.0 version, and the branch [master] point to ng-packagr: 2.4.2, Angular 5.x and Ionic 3.9.x.

This is a "hard" solution, but it works 😅

@ehorodyski

This comment has been minimized.

Copy link

ehorodyski commented Jul 11, 2018

Hi @mfdeveloper - Can you detail your solution getting it work with Angular 5.x and Ionic 3.9.x?

I run into build issues like this when running the ng-packagr script:

BUILD ERROR
node_modules/ionic-angular/components/picker/picker-component.d.ts.PickerCmp.html(13,71): : Expected 0 arguments, but got 1.
node_modules/ionic-angular/components/input/input.d.ts.TextInput.html(1,928): : Expected 0 arguments, but got 1.
node_modules/ionic-angular/components/input/input.d.ts.TextInput.html(1,961): : Expected 0 arguments, but got 1.

Error: node_modules/ionic-angular/components/picker/picker-component.d.ts.PickerCmp.html(13,71): : Expected 0 arguments, but got 1.
node_modules/ionic-angular/components/input/input.d.ts.TextInput.html(1,928): : Expected 0 arguments, but got 1.
node_modules/ionic-angular/components/input/input.d.ts.TextInput.html(1,961): : Expected 0 arguments, but got 1.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.