Skip to content

Loader not working correctly with js files #58

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

Closed
alvaro9210 opened this issue Feb 16, 2017 · 3 comments
Closed

Loader not working correctly with js files #58

alvaro9210 opened this issue Feb 16, 2017 · 3 comments

Comments

@alvaro9210
Copy link

alvaro9210 commented Feb 16, 2017

How can I make this loader work with an npm linked dependency?

I have two projects Project Aand Project B.
Project B is linked with npm link and it provides modules to project A.
The loader works fine when I lazy load on app.routing.ts of Project A:

...
{
    path: "my-apps",
    loadChildren: "project-b/my-apps/my-apps.module#MyAppsModule",
},
...

This correctly produces the instruction to lazy load the Module from Project B:

...
{
    path: "my-apps",
    loadChildren: function () { return new Promise(function (resolve) { __webpack_require__.e/* require.ensure */(0).then((function (require) { resolve(__webpack_require__(1554)['MyAppsModule']); }).bind(null, __webpack_require__)).catch(__webpack_require__.oe); }); },
...
},

But...
On MyAppsModule (from Project B) I also have a lazy loaded child with the following instruction:

{
    path: ":slug",
    loadChildren: "./app-content/app-content.module#AppContentModule"
}

The thing is that the loader doesn't change the import of the module ofProject B, it keeps the result intact, it produces the following:

{
    path: ":slug",
    loadChildren: "./app-content/app-content.module#AppContentModule"
}

Which ends up breaking my app with the message:

EXCEPTION: Uncaught (in promise): Error: Cannot find module './app-content/app-content.module'.

For now I am "lazy loading" the module by doing the manual import of the module and using it in the loadChildren option, but as far as I know, that's not lazy loading a module per se. (Correct me if I am wrong)

Do you guys know how can I make this loader work with an npm linked dependency?
Thanks in advance.

Webpack@2.2.1
angular-router-loader@0.5.0

@brandonroberts
Copy link
Owner

This is intended behavior. The loader does not go inside your node_modules to look for lazy loaded routes inside packages there. You could look into add an entry in your Webpack configuration to run the loader against that module file directly.

@alvaro9210
Copy link
Author

alvaro9210 commented Mar 17, 2017

Now I get it. This is not related to npm link.
Is due to the fact that ProjectB is being consumed as a compiled library, just a bunch of .js files and I had no rules for .js files. This loader was being used only with .ts files:

module: {
   rules: [
      {
         test: /\.ts$/,
         use: [ "awesome-typescript-loader", "angular2-template-loader", "angular-router-loader" ]
      }
   ]
},

Now the thing is that this loader doesn't work correctly with .js files. I mean, yes It does work if I add the rule to run the loader with js files like this:

module: {
   rules: [
      {
         test: /\.ts$/,
         use: [ "awesome-typescript-loader", "angular2-template-loader", "angular-router-loader" ]
      },
      {
         test: /\.js$/,
         use: [ "angular-router-loader" ]
      }
   ]
},

because it converts the instruction to a promise, but it simply doesn't work because the Webpack bundling process throws the following error:

ERROR in ./~/carbonldp-panel/my-apps/my-apps.routing.js
Module parse failed: /Users/base22/Carbon/carbonldp-workbench/node_modules/angular-router-loader/src/index.js!/Users/base22/Carbon/carbonldp-workbench/node_modules/carbonldp-panel/my-apps/my-apps.routing.js Unexpected token (44:79)
You may need an appropriate loader to handle this file type.
|             {
|                 path: ":slug",
|                 loadChildren: () => new Promise(function (resolve) {  (require as any).ensure([], function (require: any) {    resolve(require('./app-content/app-content.module')['AppContentModule']);  });}),
|             }
|         ]
 @ ./~/carbonldp-panel/my-apps/my-apps.module.js 15:24-52
 @ ./src/app/app.routing.ts
 @ ./src/app/app.module.ts

Is worth noting that carbonldp-panel = ProjectB.

The only workaround to work this out is by generating my dist package of ProjectB as the src files, I mean I am now shipping the .ts files so when Webpack comes in place in ProjectA, the loader for .ts files can do its work correctly. This is working fine and I can now bundle and serve my app correctly.
But I don't see this as a solution... Do you know how can I make this loader work with .js files?

@alvaro9210 alvaro9210 changed the title Loader not working with npm linked package Loader not working correctly with js files Mar 17, 2017
@brandonroberts
Copy link
Owner

Support for plain JS files released as 0.6.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants