Skip to content

Problem when compiling project with MeteorCLI #1966

Open
@jbx-alex

Description

@jbx-alex

Hello,
I'm using the reactive-component-loader library (https://github.com/wishtack/wishtack-steroids/tree/master/packages/reactive-component-loader) to be able to use Lazy Load Non-Routable Modules.

@NgModule({
    ...
    imports: [
        ReactiveComponentLoaderModule.withModule({
            moduleId: 'todo-form-v1',
            loadChildren: './todo-form-v1/todo-form-v1.module#TodoFormV1Module'
        }),
        ReactiveComponentLoaderModule.withModule({
            moduleId: 'todo-form-v2',
            loadChildren: './todo-form-v2/todo-form-v2.module#TodoFormV2Module'
        }),
    ]
    ...
})
export class TodoListModule {
}

When compiling this part of the code shows the error:

While building for web.browser: imports/app/app.module.js:59:110: Unterminated string constant (59:110)

If I add a comma at the end of the line, this way:

ReactiveComponentLoaderModule.withModule({
       moduleId: 'todo-form-v2',
       loadChildren: './todo-form-v2/todo-form-v2.module#TodoFormV2Module',
}),

Show this error when I try to use the library:
ERROR TypeError: path.split is not a function

Because the loadAndCompile method of SystemJsNgModuleLoader the path is not a string:

SystemJsNgModuleLoader.prototype.loadAndCompile = function (path) {
    var _this = this;
    var _a = __read(path.split(_SEPARATOR), 2), module = _a[0], exportName = _a[1];
    if (exportName === undefined) {
        exportName = 'default';
    }
    return System.import(module)
        .then(function (module) { return module[exportName]; })
        .then(function (type) { return checkNotEmpty(type, module, exportName); })
        .then(function (type) { return _this._compiler.compileModuleAsync(type); });
};

The only way to solve it has been like this:

ReactiveComponentLoaderModule.withModule({
    moduleId: 'title-v2',
    loadChildren: ('./title-v2.module#TitleV2Module').toString()
}),

I do not know if it's because of how MeteorCLI build.

Once this has been solved, it shows me this error:
ERROR ReferenceError: System is not defined at SystemJsNgModuleLoader.loadAndCompile

And I've solved it by adding the following line of code in the polyfills.ts file, but I do not know if it's the right way:
import 'systemjs/dist/system.js';

The last error I've had has been when trying to import title-v1.module
ERROR SyntaxError: Unexpected token <

I do not know how to solve this, I've set up a project with only Angular 7 with this library and it works well.
I am using Meteor 1.8.1 and Angular 7.2.0

Thanks in advance and I'm sorry if it's not a compiled error and I should not go here.
Regards

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions