Problem with 3rd party JavaScript that uses relative paths

[vrmerlin]

Please provide us with the following information:

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

Windows 10, but probably all OSes

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:

@angular/cli: 1.0.0-beta.32.3
node: 7.5.0
os: win32 x64
@angular/common: 2.4.8
@angular/compiler: 2.4.8
@angular/core: 2.4.8
@angular/forms: 2.4.8
@angular/http: 2.4.8
@angular/platform-browser: 2.4.8
@angular/platform-browser-dynamic: 2.4.8
@angular/router: 3.4.8
@angular/cli: 1.0.0-beta.32.3
@angular/compiler-cli: 2.4.8

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

This was initially created with CLI.

The log given by the failure.

Normally this include a stack trace and some more information.

See below.

Mention any other details that might be useful.

We've had great luck using Angular2 and Phosphor (https://github.com/phosphorjs/phosphor) together, using the SystemJS loader. But the Angular industry seems to have moved to Angular-CLI and Webpack, so we are trying to do the same change.

Unfortunately, I'm running into a show-stopping problem. From what I've learned about Angular CLI, it looks like I need to add the Phosphor scripts I use to the .angular-cli.json file, like so:

      "styles": [
        "styles.css",
        "../node_modules/phosphor/styles/base.css"
        ],
      "scripts": [
        "../node_modules/phosphor/lib/core/messaging.js",
        "../node_modules/phosphor/lib/algorithm/iteration.js",
        "../node_modules/phosphor/lib/ui/widget.js",
        "../node_modules/phosphor/lib/ui/boxpanel.js",
        "../node_modules/phosphor/lib/ui/dockpanel.js",
        "../node_modules/phosphor/lib/ui/widget"
      ],

Adding these .js files made a lot of my browser errors go away, but I'm still getting the error Uncaught Error: Cannot find module '../algorithm/iteration'. That relative path is in the Phosphor code, in a number of places (like: var iteration_1 = require("../algorithm/iteration");). I don't manage that codebase though. Is there a way to get these relative URLs to work properly with Angular CLI/Webpack?

Thanks,
John

---

Thanks! We'll be in touch soon.

[mattdistefano]

Phosphor looks like it should be loaded with import statements within your code rather than via the scripts array in the config. For the most part, the scripts array should be used for non-module-aware JS libs - things that will attach themselves to the global scope. If you're using a library distributed in a module format, import what you need from it and webpack will pull in all the deps automatically.

[vrmerlin]

So, it appears that uninstalling 'phosphor' and then installing '@phosphor/widgets', and making some changes for how things moved around, has fixed this problem. The phosphor team has been making a lot of changes lately, and apparently renamed the product I should grab.

[filipesilva]

Closing as it seems to be solved. Thanks @mattdistefano for the helpful and insightful response!

[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.}