angular - crear - Valor inesperado ''MyCustomModule'' importado por el módulo ''AppModule''

page title angular 4

Question

Intento migrar una de mis bibliotecas personalizadas de angular2 a RC.6 + Webpack. Mi estructura de directorio es:

- src - source TS files
- lib - transpiled JS files + definition files
- dev - development app to test if it works / looks ok.
- myCustomLib.js - barrel
- myCustomLib.d.ts

Dentro de la carpeta dev intente ejecutar una aplicación. Arranqué mi módulo:

app.module.ts

import { BrowserModule }                from "@angular/platform-browser";
import { NgModule }                     from "@angular/core";
import { AppComponent }                 from "./app.component";
import { MyCustomModule }               from "../../myCustomLib";

@NgModule({
    imports: [
        BrowserModule,
        MyCustomModule
    ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
})
export class AppModule {
}

Ahora, usando el paquete web, adjunto mi aplicación de desarrollo.

webpack.config.js

module.exports = {
    entry: "./app/boot",
    output: {
        path: __dirname,
        filename: "./bundle.js",
    },
    resolve: {
        extensions: ['''', ''.js'', ''.ts''],
        modules: [
            ''node_modules''
        ]
    },
    devtool: ''source-map'',
    module: {
        loaders: [{
            test: //.js$/,
            loader: ''babel-loader'',
            exclude: /node_modules/
        }, {
            test: //.ts$/,
            loader: ''awesome-typescript-loader'',
            exclude: /node_modules/
        }]
    },
    watch: true
};

Pero cuando intento cargar la aplicación, recibo un mensaje:

metadata_resolver.js:230
Uncaught Error: Unexpected value ''MyCustomModule'' imported by the module ''AppModule''

El archivo de mi barril que importo se ve así:

myCustomLib.js

export * from ''./lib/myCustomLib.module'';

También encontré sugerencias sobre un tema similar en github , pero cambiándolo a:

export { MyCustomModule } from ''./lib/myCustomLib.module'';

no ayudó. También intenté importar el módulo desde el directorio src , el mismo error. MyCustomModule debería estar bien ya que estaba funcionando bien con systemJS antes.

myCustomLib.module.ts:

import { NgModule }                     from ''@angular/core'';
import { BrowserModule }                from ''@angular/platform-browser'';

@NgModule({
    imports: [
        BrowserModule
    ]
})
export class MyCustomModule {}

¿Alguna idea de cuál puede ser el motivo de este error? He visto temas similares aquí, pero ninguna respuesta o sugerencia ayudó.

Editar : Para hacer el ejemplo aún más simple, he eliminado todo de MyCustomModule, el mismo problema ...

Answer 1

Agregue la carpeta lib a la configuración de su paquete web para resolver los módulos . La ruta debe ser relativa a la ubicación del archivo de configuración del paquete web.

resolve: {
   modules: [''node_modules'',''lib'']

Answer 2

en myCustomLib.js , intente importar antes de exportar

import { MyCustomModule } from ''./lib/myCustomLib.module;

export MyCustomModule;

Answer 3

su MyCustomModule debe estar dentro de la carpeta src / app ya que no es reconocido por el compilador porque el compilador compila todos los archivos en la carpeta src, por eso no reconoce su módulo