Import from npm fails

[superchris]

I'm trying to use an npm called angular2-pheonix-channels I developed that wraps Phoenix channels in an observer for angular2. I have a jspm project where it works swimmingly, but in the angular-cli project it fails to find the module. I'm afraid I'm a bit of a typescript newb, my guess is that it may be a typescript compiler issue, but regardless not being able to easily add external npm dependencies seems like a problem to me. Thanks in advance for any insight you can provide :)

[EmmanuelDemey]

Hi,

Can you share the error you have ?

Manu

[superchris]

Sure:

[DiffingTSCompiler]: Typescript found the following errors:
 app/angular-cli-test.ts (4, 29): Cannot find module 'angular2-phoenix-channels'.
Error: [DiffingTSCompiler]: Typescript found the following errors:
 app/angular-cli-test.ts (4, 29): Cannot find module 'angular2-phoenix-channels'.
 at DiffingTSCompiler.doFullBuild (/Users/chrisnelson/dev/angular-cli-test/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:143:29)
 at DiffingTSCompiler.rebuild (/Users/chrisnelson/dev/angular-cli-test/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:72:18)
 at DiffingPluginWrapper.rebuild (/Users/chrisnelson/dev/angular-cli-test/node_modules/angular-cli/lib/broccoli/diffing-broccoli-plugin.js:86:45)
 at /Users/chrisnelson/dev/angular-cli-test/node_modules/angular-cli/node_modules/ember-cli/node_modules/broccoli/lib/api_compat.js:42:21
 at lib$rsvp$$internal$$tryCatch (/Users/chrisnelson/dev/angular-cli-test/node_modules/angular-cli/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:493:16)
 at lib$rsvp$$internal$$invokeCallback (/Users/chrisnelson/dev/angular-cli-test/node_modules/angular-cli/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:505:17)
 at /Users/chrisnelson/dev/angular-cli-test/node_modules/angular-cli/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:1001:13
 at lib$rsvp$asap$$flush (/Users/chrisnelson/dev/angular-cli-test/node_modules/angular-cli/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:1198:9)
 at doNTCallback0 (node.js:417:9)
 at process._tickCallback (node.js:346:13)

Like I said, I'm using this same npm successfully from typescript in a jspm project, so it seems like something specific to angular-cli.

[superchris]

Anyone have any thoughts on this?

[timkindberg]

@superchris I also had this problem. I had installed falcor and falcor-http-datasource from npm and they were not found.

Things I tried:

• In the ember-cli-build.js there is a vendorNpmFiles array that you can add node modules to. You add the path to your libs dist file relative to the node_modules root.
• I did that and it still didn't work... because System has no idea. So then in the index.html I added all the system-y crap to get it to route the call for 'falcor' over to 'vendor/falcor', etc, etc. That got a successful find of most of the falcor files, but lots of falcors dependencies failed to load.
• So I ditched that approach.
• So then I thought, well I could map out the entirety of falcor's dependency tree for System, but WAIT! That's exactly what JSPM does.
• So I installed 'falcor' with jspm.
• I realized System needed to have access to the JSPM config.js though, so I had to make sure it got built into '/vendor' by modifiying the ember-cli-build.js file. That worked well, but...
• Then I realized that the entirety of the jspm_packages folder had to be accessible as well (in the build, in order to be served up) so then I dumped that whole folder in there too. This dropped my dev reload times considerably (from sub-second to ~4-5 seconds), since it was a huge folder of crap.

That got it working, but it was way too much effort. But hopefully this explanation helps you guys come up with a good user experience here. Angular-cli definitely needs a canonical way to add npm as well as jspm dependencies (at least npm). I'm assuming my experience is not the end goal :)

Here is how my ember-cli-build.js is currently looking.

/* global require, module */

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
var Funnel = require('broccoli-funnel');
var mergeTrees = require('broccoli-merge-trees');

module.exports = function(defaults) {
 var app = new Angular2App(defaults, {
 vendorNpmFiles: []
 });

 var jspmConfigTree = new Funnel(__dirname, {
 files: ['config.js'],
 destDir: 'vendor'
 });

 var jspmPackagesTree = new Funnel('jspm_packages', {
 destDir: 'jspm_packages'
 });

 return mergeTrees([
 app.toTree(),
 jspmConfigTree,
 jspmPackagesTree
 ])
}

I have a feeling that Broccoli is a purely glob based build system... meaning it has no concept of tracing dependencies in TypeScript or ES6. But obviously that functionality is needed, because right now just scooping up all node_modules is not feasible. I think that might be what this issue is talking about: #189

[hansl]

Considering this fixed. Please note that there's an ng install command being worked on which will cover this use case without any special configuration. It will be ready when alpha is released.

[fk1blow]

while this may be considered fixed, i've tried using "phoenix-elixir" module and got the same error(Cannot find module 'phoenix-elixir'.")

[filipesilva]

@fk1blow please open a new issue for what you're experiencing. It sounds like a typings problem to me.

[fk1blow]

Thanks for the reply - i only added an declare module... inside src/typings.d.ts and it worked(though i don't like to add these declarations for each and every library i import from node_modules).

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}