jointjs+ in angular project v8.2.14 about joint HOT 2 CLOSED

Thanks a ton @jamesgeorgewilliams. The solution you've provided above is working.

from joint.

This issue is not related to Angular, but to Webpack. Angular v8 is using Webpack v4 which can cause numerous issues.

Ideally, you would update your Angular project(v8 is not supported) to a version which uses Webpack v5, but if that is not possible, you will have to try some alternatives below.

In your project, it's likely Webpack cannot locate/recognize .mjs files. To address this issue you have to update the Webpack config.

If you have access to the webpack.config.js file, you could add the following:

resolve: {
    extensions: ['*', '.mjs', '.js', '.json']
  },
  module: {
    rules: [
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
      }
    ]
  }

Additional Problem

If you have created your Angular 8 project with the angular cli, it's likely you don't have access to this config file as it is hidden from the user.

ng eject is not available in Angular 8(This was a command to expose the webpack.config.js file). There is a package which allows you to create a custom webpack config without "ejecting" the angular cli project.
https://www.npmjs.com/package/@angular-builders/custom-webpack

It can be added to your project via npm i @angular-builders/[email protected] -D

This will allow you to create a webpack configuration in the angular.json file. You have to update the build and serve sections as follows:

"architect": {
  ...
  "build": {
    "builder": "@angular-builders/custom-webpack:browser"
    "options": {
      "customWebpackConfig": {
        "path": "./extra-webpack.config.js",
        "mergeStrategies": {
          "externals": "replace"
        }
        ...
      }
    },
  ...
  "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
    },
 }

You can find more information at the following link.
https://github.com/just-jeb/angular-builders/blob/8.x.x/packages/custom-webpack/README.md

Now, you should create the webpack config file extra-webpack.config.js in the root of your project. It can contain the following:

module.exports = {
  mode: 'production', // "production" | "development" | "none"
  resolve: {
    extensions: ['*', '.mjs', '.js', '.json']
  },
  module: {
    rules: [
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto'
      }
    ]
  }
};

At this point, if you run npm run start, the errors in your screenshot above should be fixed, but you will have some new errors related to some JavaScript features.

Webpack v4 doesn't support newer JavaScript features, es2020 for example.

You should add some babel packages to your project to support this, and update the extra-webpack.config.js .

npm i [email protected] -D
npm i @babel/plugin-proposal-nullish-coalescing-operator -D

extra-webpack.config.js

module.exports = {
  mode: 'production', // "production" | "development" | "none"
  resolve: {
    extensions: ['*', '.mjs', '.js', '.json']
  },
  module: {
    rules: [
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', { targets: "defaults" }]
            ],
            plugins: ['@babel/plugin-proposal-nullish-coalescing-operator']
          }
        }
      }
    ]
  }
};

Running npm run start should be successful now. As mentioned above, ideally you would just update to a supported version of Angular that uses webpack v5 if possible as it would solve all of these issues.

from joint.