loadChildren Regex error with angular-compilers

[mrz5018]

Error

When trying to use AOT with loadChildren I was getting this error:

=> Errors prevented startup:

   While building for web.browser:
   client/imports/app/app.module.ngfactory.js:52:190: Unexpected token (52:190)

=> Your application has errors. Waiting for file change.

Issue

When I looked into it, it looks like the issue is with how the app.js code is being manipulated in the web.browser folder. The loadChildren lines of the code are found through a regex search. This regex result is then replaced with the dynamic loading code. In some cases it seems that this search and replace algorithm outputs something that can no longer be parsed by meteor.

Steps to Reproduce

In the lazy-loading example from this project, just switch the order of data and loadChildren. This results in the error that I was seeing in my project.

{
        path: 'todoAdd',
        data: {
          title: 'Add Todo'
        }
        loadChildren: './todo-add/todo-add.module#TodoAddModule',
},

Possible Solution

To solve this on my project I just made a local copy of angular-compilers and changed the regex for now. I made the following change:

Was: const LOAD_CHILDREN_REGEX = /loadChildren\s*:(\s*['"](.*?)'"]\s*([,}]))/gm;
Now: const LOAD_CHILDREN_REGEX = /loadChildren\s*:(\s*['"['"]\s*)/gm;

It's a simple enough fix, so I can open up a pull request to put in this change. Before that, I wanted to make sure that everyone else agreed that this change wouldn't break any other situations that I'm not thinking about.

[mrz5018]

Also, this is similar to #1930 and the same fix should solve it.

[pmcochrane]

The regex does seem to be the problem when trying to flatten to a single line. It's to do with the comma at the end of the loadChildren line.

This will work (due to comma at end but tslint will moan [uneccessary trailing comma] ):
{ path: 'todoAdd', loadChildren: './todo-add/todo-add.module#TodoAddModule', }

This won't work (no comma after loadChildren):
{ path: 'todoAdd', loadChildren: './todo-add/todo-add.module#TodoAddModule' }

This will work ( as there is still a comma after loadChildren):
{ loadChildren: './todo-add/todo-add.module#TodoAddModule', path: 'todoAdd' }

I think the fix is a combination of modifying the regex and update the replaceDynamicLoadingCode return value to handle if a comma is present or not. I'm making do with putting loadChildren as the first property for now.

[ardatan]

Fixed in 0.3.2