javascript - módulo - es6-module-loader no puede localizar @ angular/core en Angular 6

ts no se encuentra el módulo ''@ angular core

Question

Utilicé este es6-module-loader en un proyecto Angular 2 y funcionó muy bien para cargar módulos TypeScript en tiempo real en el navegador web. Ahora, estoy actualizando este proyecto a Angular 6 , pero aquí no se cumplen las dependencias para las imports del módulo de carga. Por ejemplo:

declare var SystemLoader:any;

export class DemoClass {
  constructor() {
    var source = "export class Foo { " +
    "constructor() { console.log(''Created the ES6 class foo!''); } " +
    "execMethod() { console.log(''Executed method!'') }" +
    "}";

     SystemLoader.module(source, {name: _name}).then(function (module: any) {
        module.Foo.prototype.execMethod();
     }
  }
}

Este código anterior funciona en Angular 6 . Cargará el módulo Foo e imprimirá esas líneas en la Console . Pero si consigo el módulo un poco de complejidad y agrego algo de import como este:

declare var SystemLoader:any;

export class DemoClass {
  constructor() {
    var source = "import {Component} from /"@angular/core/"; " +
    "export class Foo { " +
    "constructor() { console.log(''Created the ES6 class foo!''); } " +
    "execMethod() { console.log(''Executed method!'') }" +
    "}";

     SystemLoader.module(source, {name: _name}).then(function (module: any) {
        module.Foo.prototype.execMethod();
     }
  }
}

Entonces no funcionará y se queja con el error 404 loading @angular/core . Por lo tanto, en Angular 2 esto no fue un problema porque todos los node_modules necesarios para el proyecto fueron cargados por Angular tal como están, pero en Angular 6 parece que todas esas dependencias son Webpack por Webpack y escupidas en un gran archivo JavaScript grande. Entonces, ¿cómo puedo evitar esta simplificación de Webpack para que el módulo dinámico pueda cargar?

Editar:

O al menos una muestra para migrar de es6-module-loader (en desuso) a es-module-loader usando el mismo proceso expuesto anteriormente (cargar el código fuente, compilar [transpilar] y renderizar en la máquina del cliente).

Answer 1

No estoy familiarizado con angular 6, pero el problema parece deberse al proceso de resolución del módulo de webpack, donde el cargador de módulos no tiene la oportunidad de captar la dependencia de ese módulo en el momento de la compilación. Puede haber un par de maneras de abordar esto.

Puede eliminar la adición de @angular/core como una dependencia externa , suponiendo que se declare de manera compatible (como common-js, umd, etc.). Si aún no se ha declarado de esa manera, siempre puede crear un envoltorio alrededor para exponerlo, por ejemplo, como un módulo common-js .

Otra forma es tener un punto de code-split en esta dependencia (ya sea con importaciones dinámicas o con require.ensure ). No estoy seguro de que lo haga, pero si el cargador angular relevante (el que analiza el texto fuente en el código fuente) tiene su oportunidad de funcionar, y su salida es un código compilado, podría hacerlo.