angular - servidor - ¿Cómo anular las secuencias de comandos iónicas para incluir la reacción en la compilación?

publicar proyecto angular 5

Question

Estoy tratando de incluir en un proyecto Ionic2-Angular4 algunos componentes de reacción pero sin éxito. Para el proceso de construcción estoy usando scripts iónicos

"build": "ionic-app-scripts build",
"serve": "ionic-app-scripts serve",

También actualicé tsconfig.json the compilerOptions con la siguiente opción:

{
  "compilerOptions": {
    "jsx": "react",
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5"
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

Y el webpack.config.ts de la siguiente manera:

var path = require(''path'');
var webpack = require(''webpack'');
var ionicWebpackFactory = require(process.env.IONIC_WEBPACK_FACTORY);

module.exports = {
    entry: process.env.IONIC_APP_ENTRY_POINT,
    output: {
        path: ''{{BUILD}}'',
        publicPath: ''build/'',
        filename: process.env.IONIC_OUTPUT_JS_FILE_NAME,
        devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
    },
    devtool: process.env.IONIC_SOURCE_MAP_TYPE,

    resolve: {
        extensions: [''.ts'', ''.js'', ''.tsx'', ''.json''],
        modules: [path.resolve(''node_modules'')]
    },

    module: {
        loaders: [
            {
                test: //.json$/,
                loader: ''json-loader''
            },
            {
                test: //.tsx?$/,
                loader: process.env.IONIC_WEBPACK_TRANSPILE_LOADER
            },
            {
                test: //.js$/,
                loader: process.env.IONIC_WEBPACK_TRANSPILE_LOADER
            }
        ]
    },

    plugins: [
        ionicWebpackFactory.getIonicEnvironmentPlugin(),
        new webpack.EnvironmentPlugin([''IONIC_ENV''])
    ],
    node: {
        fs: ''empty'',
        net: ''empty'',
        tls: ''empty''
    }
};

También he agregado en package.json las siguientes bibliotecas:

    "react": "^15.6.1",
    "react-dev-utils": "^4.0.1",
    "react-dom": "^15.6.1",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",

Cada vez que trato de compilar, la compilación está terminada correctamente pero recibo el error:

Error: Cannot find module "./TestBar"

El TestBar es un ReactComponent que estoy tratando de importar en un componente angular. El código está debajo para

Archivo TestBar.tsx:

import * as React from ''react'';
import * as ReactDOM from ''react-dom'';
import { Injector } from ''@angular/core'';
import { ValueStore}  from ''./redux/list.store'';
import {Model} from ''./model'';

interface ReactChildComponentViewProps {
    store: ValueStore;
    injector: Injector;
}

let TestBar = React.createClass<ReactChildComponentViewProps, any> ({

    getInitialState: function () {
        let model: Model = this.props.injector.get(Model);
        console.log(''Using Angular 2 injector in React body, model.uuid: '' + model);
        this.props.store.store.subscribe(() => {
            this.setState({
                ''elements'': this.props.store.store.getState()
            });
        });
        return {
            ''title'': this.props.title,
            ''elements'': this.props.store.store.getState()
        };
    },
    render() {
        return (
                <div>aaaa</div>
        );
    }
});


export class ReactChildComponentView {

    static initialize( store, injector, containerId) {
        ReactDOM.render(<TestBar  store={store} injector={injector}/>, document.getElementById(containerId));
    }
}

¿Alguna vez alguien ha intentado algo similar?

Answer 1

Finalmente, logré anular el paquete web. Como vi en esta publicación Cómo extender la configuración predeterminada del paquete web en Ionic v2 para poder sobrescribir el paquete web, debes seguir los pasos a continuación:

• En la carpeta raíz de su proyecto, cree la carpeta config y copie el archivo webpack.config.js allí (este archivo se encuentra en .. / node_modules / @ionic / app-scripts / config
• Modificar el archivo copiado según sea necesario
• En el archivo package.json de su proyecto, agregue:

"config": {
   "ionic_bundler": "webpack",
   "ionic_webpack": "./config/webpack.config.js"
}