Base solution for your next web application
Open Closed

Problem with abp.js from NPM #8638


User avatar
0
andmattia created

I try to use the abp from NPM and it works on compilation but with some issue.

I compare the 2 different versione and I see the biggest broken change

If I remove the window.app on file from NPM all function works fine but if I don't do it the popup from abp not work, translation not work,...


8 Answer(s)
  • User Avatar
    0
    maliming created
    Support Team

    I try to use the abp from NPM and it works on compilation but with some issue.

    What are the steps to reproduce the problem?

    Related: https://github.com/aspnetboilerplate/aspnetboilerplate/pull/5285

  • User Avatar
    0
    andmattia created

    Hi

    Yes I think is releted to this PR

  • User Avatar
    0
    maliming created
    Support Team

    hi

    What are the steps to reproduce the problem?

  • User Avatar
    0
    andmattia created

    Hi

    1. download a AngularJs solution
    2. install NPM packege
    3. use webpack like const path = require('path');
    module.exports = {
        entry: "./src/index.ts",
        //output: {
        //    filename: "../libs/custom/bundle.js"
        //},
        output: {
            path: path.resolve(__dirname, 'libs/custom'),
            filename: '[name].js'
        },
        resolve: {
            // Add '.ts' and '.tsx' as a resolvable extension.
            extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
        },
        optimization: {
            splitChunks: {
                chunks: 'all',
            },
        },
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    exclude: [/node_modules/],
                    loader: "ts-loader",
                    //options: {
                    //    configFile: "webpack_configs/tsconfig.webpack.json"
                    //}
                }
            ]
        }
    };
    
    1. add bundle.js vendor.js in layout.cshtml at the end
      @Scripts.Render("~/Bundles/App/metronic/js")
        @Scripts.Render("~/Bundles/Common/js")
        @Scripts.Render("~/Bundles/App/js")
        <script src="~/libs/custom/bundle.js"></script>
    

    bundle need to be compile for prduction

    "scripts": {
        "test": "echo",
        "compileTsc": "tsc",
        "dev": "rimraf dist && webpack --bail --progress --profile --mode development --display-error-details",
        "prod": "rimraf dist && webpack --mode production --progress"
      },
    
  • User Avatar
    0
    maliming created
    Support Team

    Does replacing window with $ work?

    var abp = $.abp || {};
    
  • User Avatar
    0
    andmattia created

    @maliming

    it works, so now I need to publish on my private NPM this version beacuse every time to compile NPM overvrite the abp.js on base node_module dirs.

    Any suggestion?

  • User Avatar
    0
    maliming created
    Support Team

    hi

    I will update abp.js you don't need to publish private packages. : )

  • User Avatar
    0
    maliming created
    Support Team

    https://github.com/aspnetboilerplate/aspnetboilerplate/issues/5434