Ionic2 RC.0: Module does not export ModuleClass error

[jgw96]

From @andrucz on September 29, 2016 20:44

After installing the module using:

npm install --save angular2-moment

And adding it to NgModule:

import { MomentModule } from 'angular2-moment';

@NgModule({
  ...
  imports: [MomentModule]
})

And import/use in my component, I am getting this error when serving:

[17:37:53]  Error: Module c:\dev\app\node_modules\angular2-moment\index.js does not export MomentModule (imported by c:\dev\app\.tmp\app\app.module.js)
    at Module.trace (rollup.js:7677:29)
    at ModuleScope.findDeclaration (rollup.js:7300:22)
    at Scope.findDeclaration (rollup.js:5351:39)
    at Identifier.bind (rollup.js:6489:29)
    at rollup.js:5151:50
    at ArrayExpression.eachChild (rollup.js:5165:19)
    at ArrayExpression.bind (rollup.js:5151:7)
    at rollup.js:5151:50
    at Node.eachChild (rollup.js:5168:5)
    at Node.bind (rollup.js:5151:7)

The same occurs when I try to import and use other modules.

Copied from original issue: driftyco/ionic#8322

[jgw96]

From @ramonornela on September 29, 2016 22:21

See https://github.com/driftyco/ionic-third-party-lib-example

[jgw96]

From @Florian007 on September 29, 2016 22:30

Same problem

[jgw96]

From @Florian007 on September 29, 2016 22:33

With ng2-translate

[jgw96]

From @hookedonionics on September 30, 2016 4:13

With ng2-translate

I am having this same issue with ng2-translate as well. Even after following steps suggested in https://github.com/driftyco/ionic/issues/8274

[jgw96]

From @DenisVuyka on September 30, 2016 9:29

Having same problems, absolutely all external modules/libs not working with RC0.

[jgw96]

From @dr1v3 on September 30, 2016 12:51

You can use this workaround: edit file node_modules/@ionic/app-scripts/config/rollup.config.js

• add useStrict: false to the module.exportsobject
• add'node_modules/angular2-moment/**'and 'node_modules/angular2-moment/index.js' : ['MomentModule']like this

    commonjs(
        {
          include: [
            'node_modules/rxjs/**',
            'node_modules/angularfire2/**',
            'node_modules/firebase/**',
            'node_modules/angular2-moment/**'
          ],
          namedExports: {
            'node_modules/angularfire2/node_modules/firebase/firebase.js': ['initializeApp', 'auth', 'database'],
            'node_modules/angularfire2/node_modules/firebase/firebase-browser.js': ['initializeApp', 'auth', 'database'],
            'node_modules/angular2-moment/index.js' : ['MomentModule']

          }
        }),

[jgw96]

From @DenisVuyka on September 30, 2016 13:12

@dr1v3 What's the workaround for relative templates within external libraries? With your workaround I'm now getting: Error reading template file, "my-component-tpl.html": Error: ENOENT: no such file or directory ending with node_modules/@angular/core/src/animation/my-component-tpl.html' and Error: Module <...>/node_modules/rxjs/Subject.js does not export Subject (imported by <...>/node_modules/@angular/core/src/facade/async.js) at Module.trace (<...>/node_modules/rollup/dist/rollup.js:7677:29)

[jgw96]

From @andrucz on September 30, 2016 14:39

Thanks, @dr1v3. That workaround worked for me.

[jgw96]

From @anand1st on September 30, 2016 15:36

I'm having a similar problem with ng2-cordova-oauth. The error message I get is as following: Error: Module **/node_modules/ng2-cordova-oauth/core.js does not export CordovaOauth. Will try workaround shortly to see if it works

Update: Thanks @dr1v3. Workaround works. The following is the config for ng2-cordova-oauth in commonjs: `

  include: [
    'node_modules/ng2-cordova-oauth/**',
    'node_modules/rxjs/**'
  ],
  namedExports: {
    'node_modules/ng2-cordova-oauth/core.js' : ['CordovaOauth', 'Facebook', 'Google']
  }

`

[jgw96]

From @Bigous on September 30, 2016 17:54

How can we disable the rollup until this issue is not fixed?

[jgw96]

From @ganySA on October 1, 2016 17:48

+1 Same problem

[jgw96]

From @ganySA on October 1, 2016 18:28

having a similar problem with moment library.... anyone have a fix on how to use moment? I have import * as moment from 'moment';

And on compile i get cannot call a namespace ('moment') ?

[jgw96]

From @bnjjj on October 1, 2016 21:21

Same problems with lazy.js :/

[jgw96]

From @hardyCoder on October 1, 2016 22:48

Workaround did not work for my library and (ng2-charts). I am still getting the error "ng2-charts.js does not export ChartsModule", does anyone have any other suggestions on how to convert current third party packages to RC0 successfully or maybe any other kind of workaround?

[jgw96]

From @ganySA on October 2, 2016 8:10

@dr1v3 Question: i have followed your instructions and the app now compiles but do i have manually include all the external libraries in index.html ? that seems to be the only way they start working?

see my config below - lots of libraries, but for example moment does not end up included and i need to manually go and add it to the index.html?

 include: [
            'node_modules/rxjs/**',
            'node_modules/angular2-moment/**',
            'node_modules/breeze-bridge-angular2/**',
            'node_modules/@ionic/storage/**',
            'node_modules/breeze-client/**',
            'node_modules/moment/moment.min.js',
            'node_modules/google-lib-phonenumber/dist/**',
            'node_modules/jquery/dist/jquery.js',
            'node_modules/lodash/**'
          ],
          namedExports: {
            'node_modules/angular2-moment/index.js' : ['MomentModule'],
            'node_modules/breeze-client/breeze.base.debug.js' : ['EntityState', 'core', 'NamingConvention','FetchStrategy', 'EntityManager', 'EntityQuery', 'FilterQueryOp', 'Predicate'],
            'node_modules/moment/moment.js' : ['moment'],
            'node_modules/lodash/lodash.js' : ['_'],
            'node_modules/jquery/dist/jquery.js' : ['jQuery'],
            'node_modules/google-lib-phonenumber/dist/libphonenumber.js': ['default']

          }

[jgw96]

From @dr1v3 on October 2, 2016 8:37

@ganySA, your config seems to be right. I'm using moment.js too, but i didn't add anything into the index.html file. I haven't got to get to work angular2-moment, so i've created my custom moment pipe like this: src/pipes/moment.ts:

import { Pipe, PipeTransform} from '@angular/core';
import moment from 'moment';

@Pipe({ name: 'moment' })

export class MomentPipe implements PipeTransform{
    transform(value) {
        return moment(value).fromNow();
    }
}

make shure to add this pipe to the app.module.ts:

import {MomentPipe} from "../pipes/moment";
...
@NgModule({
  declarations: [
    ...,
    MomentPipe
  ],

i'm uing this pipe like this: {{someVar | moment}}

[vlados]

I was thinking that RC0 is fully tested before releasing and now we find major bugs like this and others. When they will be fixed so we can use ionic in production???

[dr1v3]

@vlados, obviously we can use ionic in production when 2.0 final will be released. This is normal for beta/rc, just look into the Ubuntu releases before 14.04, they contain dozens of bugs even after final release.

[manucorporat]

@vlados We have released RC because from an API point of view, the current version is likely to be the final version.

We could have postponed the release of RC.0 for months while our small team test everything, but we prefer to move fast and take advantage of this enormous community to help us test ionic much faster. We believe this release-early approach will be good for everyone in the mid-term.

[paatrick]

+1

[jaufgang]

@manucorporat, releasing early and having the community help test is great, but the early releases should be properly labelled. If rc.0 is the first release with a stable API, it should have been called beta.0 and all of the previous releases should have been labelled alpha releases.

It's about managing expectations. dealing with a flood of problems (this and a number of other currently open issues) caused by the introduction of a new build system is not something that should be happening in an RC.

alpha -> very early release to experiment with while product is being developed. expect breaking changes between release

beta -> feature complete, stable api, but needs debugging. don't expect breaking changes between releases, just fewer bugs

rc -> genuinely a candidate for a production release. we think we've ironed out almost all the bugs found in beta testing and haven't introduced any new changes. Now we want to open up use to the broader dev community to validate the robustness and find edge-case bugs before we are confident to make a final release.

[andrucz]

There is an even more simple workaround:

Instead of

import { MomentModule } from 'angular2-moment';

do

import { MomentModule } from 'angular2-moment/module';

[vlados]

I have the same problem with ng2-resource-rest module https://github.com/troyanskiy/ng2-resource-rest/issues/42

[WhatsThatItsPat]

Piggybacking on @jaufgang and others. And with the caveats that:

• I've enjoyed being on this beta train,
• I appreciate all of your team's hard work,
• I understand all of the juggling going on,
• I realize you had Angular Connect breathing down your neck,
• and seeing all the pressure of the annoying and unproductive "are we there yet" issues & comments...

...I must say it's been an incredibly frustrating few days and this release needed to bake for another couple weeks to even be worthy of Beta status, let alone RC.

My biggest qualm is seeing that these issues with external libs were known before the release. There should have been a prominent warning at the top of the changelog saying something like "If your project relies on popular third-party libraries (like AngularFire, Firebase, Lodash, Moment, etc.), DO NOT attempt to upgrade to RC0. This release is solely for testing the internal Ionic API. Bundling third-party libs will be addressed in a future release."

How many hours/days were wasted on the fool's errand of implementing outside libraries? It's one thing to ask us to test something that you think should work. It's quite another to ask us to test something that you know doesn't.

[danbucholtz]

Hi @patrickmcd,

I'm sorry you're frustrated. We're frustrated too. We tested 8-10 popular 3rd party libraries internally and everything worked fine. It is frustrating to us, too, to see that some are not working well with our bundling set-up.

The framework itself is in great shape. The build process and docs could use a little TLC. We are all working about 80 hours a week right now to get everything in order. Be rest assured - we will get there and soon.

Thanks, Dan

[lanfisis]

I have the same problem with Immutable.js lib with the error: immutable.js does not export Map

Did you know when this issue will be solved ?

[bnjjj]

I'm agree with @patrickmcd ! And I think that change a build system is a big breaking change and have no place in a RC... So now I stay in beta 11 until this essential feature was resolved. But upgrade multiple versions will be even more difficult and frustrating ! :/

[danbucholtz]

All,

We've posted some docs on the subject. Note: They match a version of @ionic/app-scripts that will be dropped in the next day or so. 95% of the concepts still apply.

http://ionicframework.com/docs/v2/resources/third-party-libs/ http://ionicframework.com/docs/v2/resources/app-scripts/

Here's an example with AngularFire2. Here is a project I implemented that has every library in it that Ionic users have reported trouble with. Most of the libraries worked, but a couple did not. Here is the summary of the findings.

Please let me know how everything goes. Since we shipped the documentation, we are going to close this issue now.

Thanks, Dan

[TdyP]

Hi, I've thoroughly followed the doc but got no success with ng2-charts

It keeps failing with

Error: Module myApp/node_modules/ng2-charts/ng2-charts.js does not export ChartsModule (imported by myApp/.tmp/app/app.module.js)

Has anyone managed to get this lib working? Is there other workarounds when editing Rollup config doesn't work?

Thanks guys!

[danbucholtz]

@TdyP,

What does your import look like in the code? What does your rollup config look like?

Thanks, Dan

[danbucholtz]

@TdyP,

Try the work around here. Otherwise, you can easily provide a custom rollup config to get around this.

https://github.com/valor-software/ng2-charts/issues/440 has some work arounds.

I commented in the issue to help the library author get the dist of his lib in the new Angular format. I am going to create some docs on the subject as I think it will be very helpful to library authors.

Thanks, Dan

[TdyP]

Thanks for your help Dan!

I managed to get this working by changing the import:

import { ChartsModule } from "ng2-charts/components/charts/charts";

Build runs fine now :)

[bnjjj]

You haven't try with lazy.js :(

[tadchristiansenli]

FYI, the third part doc has a broken link at the bottom of it (Troubleshooting section, "configuring the build"): http://ionicframework.com/docs/v2/resources/third-party-libs/LINK_NEEDED

[DenysVuika]

@danbucholtz I'm sorry but the issue is still there despite you are trying to close the ticket as early as possible. The documentation update also gives zero help regarding lib authoring.

ionic-rollup-angularfire2 seems to be a mess of config workarounds (based on readme.md) that nobody should be taking seriously as a guideline if speaking about "production readiness".

Both ionic-third-party-lib-mega-test and ionic-rollup-angularfire2 send developers the same message - if you want to make it running - "go figure out how to build your own rollup config from scratch (scripts\rollup.config.js in both repos) as we don't care".

Otherwise, you can easily provide a custom rollup config to get around this.

Why don't you just put the build scripts back to the project template and let people extend if if needed?

Another option we all would expect from the team - is clear documentation on building new reusable libraries. This is still a challenge and newly created libs still not working with RC.0.

[danbucholtz]

@DenisVuyka,

We are working on documentation for library authors on how to produce es2015 libs. This is something the entire community is going to want to do, and we're going to try to be leaders here.

The Angularfire2 issues are because of legitimate, known issues with firebase. We are reached out to them to get them resolved.

As far as the rollup configuration needed for some libs, we agree it is not ideal but we think the configuration challenges will go away over the coming months as more libs move to es2015 modules. For the most part, it really isn't that big of a deal in my opinion. I have the data to support that claim too. Most libs just work out of the box. Out of 26 of the most popular JS libs, only 4 required touching the rollup config. We are reaching out to those developers to help them fix their distribution.

Rollup is not a general purpose tool like some of the alternatives. It does require a bit of configuration in some case, but it is very fast. Much faster than the alternatives in our testing (apps boot in 1/3 of the time, 350ms vs 1150ms). We believe that the user experience of faster apps trumps the developer experience of having to modify a rollup config (knowing that the config will go away in the coming months as more libs migrate).

Thanks, Dan

[DenysVuika]

@danbucholtz Thanks Dan, I think the missing part here is any guide on es2015 lib authoring. Great that it's in progress. Thanks.

[moff]

Hi @danbucholtz!

Is that guide you've mentioned ready? That would be very useful.

[danbucholtz]

@moff,

Sorry, not yet. I keep getting pulled into other tasks. I will make a document in the coming days.

Thanks, Dan

[DenysVuika]

@danbucholtz Are there any estimates? The issue is 22 days old and last response was 5 days ago. Sorry for nagging, but many people are stuck and frustrated.

[victorcarvalhosp]

I'm getting: Error: Unexpected value 'ChartistModule' imported by the module 'AppModule' in the lib angular2-chartist

when try to: ionic run android

Any work-around for this lib?