Error trying to load lazy-loaded module

[YagoLopez]

I'm submitting a:
[ x] bug report

Current behavior
Error lazy-loading modules. Path to lazy loaded module incorrect. Probably It has something to do with concatenating strings

Expected behavior
Lazy loaded path should be created correctly

Minimal reproduction of the problem with instructions
For example:

Defining the route:

{path: '', loadChildren: './app/pages/button/pageButtonModule'},

throws the following error:

Error: Uncaught (in promise): Error: Fetch error: 404 Not Found
(WRONG PATH->) Instantiating http://127.0.0.1:8080/src//pp/pages/button/pageButtonModule.js
  Loading ./app/pages/button/pageButtonModule
Error: Fetch error: 404 Not Found
    at :8080/node_modules/systemjs/dist/system.src.js:1436:13 [angular]
    at Object.onInvoke (core.umd.js:3980) [angular]
    at Zone.run (zone.js:113) [angular => angular]
    at eval (zone.js:535) [angular]
    at Object.onInvokeTask (core.umd.js:3971) [angular]
    at ZoneDelegate.invokeTask (zone.js:274) [angular]
    at Zone.runTask (zone.js:151) [<root> => angular]
    at drainMicroTaskQueue (zone.js:433) [<root>]
    at resolvePromise (zone.js:501) [angular]
    at resolvePromise (zone.js:486) [angular]
    at eval (zone.js:535) [angular]
    at Object.onInvokeTask (core.umd.js:3971) [angular]
    at ZoneDelegate.invokeTask (zone.js:274) [angular]
    at Zone.runTask (zone.js:151) [<root> => angular]
    at drainMicroTaskQueue (zone.js:433) [<root>]

---

Please tell us about your environment:
Windows 10, Webstorm
SYSTEMJS 0.20.7
(Not using angular-cli nor webpack to serve the app.)
latest versions of npm and node

• Angular version: 2.4.7

---

• Browser: Chrome 56.0.2924.87 (64-bit)

---

• Language: [TypeScript 2.0.2]

---

• Node (for AoT issues): node --version = 6.9.1

[DzmitryShylovich]

Hello, we reviewed this issue and determined that it doesn't fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.

[YagoLopez]

I've been searching on Stack Overflow and other places with no luck. My guess is lazy loading is not allowed with 'useHash: true' as router configuration. I wonder if anyone would be so kind just to confirm or deny this and save me a lot of time of researching. Anyway, thanks.

[DzmitryShylovich]

lazy loading does work with useHash true

[YagoLopez]

Aha, thank you. Still found no solution. I will keep searching.

I'm able to lazyload a module using systemjs and something like this:

{path: 'page1', loadChildren: '.app/pages/page1Module#Page1Module'}

(Notice the strange point at the beginning of the path)

Also another thing: I cannot export 'Page1Module' as default and use this configuration:

{path: 'page1', loadChildren: '.app/pages/page1Module'}

(without '#Page1Module')

Dont know if it's the desired behaviour just wanted to comment it out in case it could be useful.

Greetings.

[DzmitryShylovich]

did you read official docs and examples here https://angular.io/docs/ts/latest/guide/ngmodule.html#!#lazy-load ?

[YagoLopez]

Yes, i know the theory. It seems the problems i'm having are caused by:

1. After upgrading to the latest version 0.20.7, systemjs gives me errors with relative module paths, at least in my working environment.

2. Using webpack you need to provide absolute paths or, if you want to use relative paths you need a plugin

3. Angular-cli doesnt have a straight way to change webpack configuration and use plugins.

It's confusing that's why opened the issue but it doesnt seem to be an angular specific problem.

Greetings.

[DzmitryShylovich]

It's confusing that's why opened the issue but it doesnt seem to be an angular specific problem.

yeah, this is why it was closed :)
angular is just a web frameworks and has almost nothing todo with build tools.

[YagoLopez]

Just for the record, found this article on ng-newsletter on using webpack.config.js and angular-cli. Maybe it can be useful for someone trying to use webpack and lazy-loading.

http://www.dzurico.com/angular-cli-with-the-super-powers/?utm_campaign=NG-Newsletter&utm_medium=email&utm_source=NG-Newsletter_188

Lazy-loading is awesome and it's one of the best ways to optimize app load time and performance.

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