Angular project in another angular project: Uncaught (in promise): TypeError: n.e is not a function

user_4470072 0
Viewed 946

I have created an angular 9 application and added the js files to another angular application and I get the error n.e is not a function in the console, after deploying the host app on IIS.

Reproduction of the problem

  1. create an angular 9 web component in the project a
  2. create an angular application project b
  3. use the angular component created in project a in project b Idea of web components app is to import the components to other project and work seamlessly.

Error type:

main-es2015.75fe17eab98c55742615.js:1 ERROR Error: Uncaught (in promise): TypeError: n.e is not a function
TypeError: n.e is not a function
    at loadChildren (main-es2015.75fe17eab98c55742615.js:1)
    at un.loadModuleFactory (main-es2015.75fe17eab98c55742615.js:1)
    at un.load (main-es2015.75fe17eab98c55742615.js:1)
    at l.project (main-es2015.75fe17eab98c55742615.js:1)
    at l._tryNext (main-es2015.75fe17eab98c55742615.js:1)
    at l._next (main-es2015.75fe17eab98c55742615.js:1)
    at l.next (main-es2015.75fe17eab98c55742615.js:1)
    at d._subscribe (main-es2015.75fe17eab98c55742615.js:1)
    at d._trySubscribe (main-es2015.75fe17eab98c55742615.js:1)
    at d.subscribe (main-es2015.75fe17eab98c55742615.js:1)
    at T (polyfills-es2015.61be2d396988ee9b9963.js:1)
    at T (polyfills-es2015.61be2d396988ee9b9963.js:1)
    at polyfills-es2015.61be2d396988ee9b9963.js:1
    at l.invokeTask (polyfills-es2015.61be2d396988ee9b9963.js:1)
    at Object.onInvokeTask (main-es2015.75fe17eab98c55742615.js:1)
    at l.invokeTask (polyfills-es2015.61be2d396988ee9b9963.js:1)
    at a.runTask (polyfills-es2015.61be2d396988ee9b9963.js:1)
    at _ (polyfills-es2015.61be2d396988ee9b9963.js:1)
Bn @ main-es2015.75fe17eab98c55742615.js:1
angular9 angular javascript
1 Answers

You probably just have a conflict with/within Webpack. If you switch the Angular builder to @angular-builders/custom-webpack:browser, you can use custom Webpack configuration like this:

          "options": {
            "customWebpackConfig": {
              "path": "./extra-webpack.config.js",
              "mergeStrategies": {
                "externals": "replace"
              }
            },
...

And the custom config would just define unique jsonpFunction like this:

module.exports = {
  output: {
    jsonpFunction: 'projecta'
  }
}
user_148448790
Related