Can't import the named export 'Directive' from non EcmaScript module (only default export is available)

This means your bundler resolves .mjs files, however it doesn't know that they are ESM modules. On webpack, you can add the following to rules.

webpack.config.js (in project root)

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.mjs$/,
          include: /node_modules/,
          type: "javascript/auto"
        }
      ]
    }
  }
}

https://webpack.js.org/configuration/

EDIT: Found a solution for craco.config.js

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.module.rules.push({
        test: /\.mjs$/,
        include: /node_modules/,
        type: "javascript/auto"
      });
      return webpackConfig;
    },
    
    plugins: [
      // Inject the "__DEV__" global variable.
      new webpack.DefinePlugin({
        __DEV__: process.env.NODE_ENV !== "production",
      })
    ],
  },
};

The answer of @Joosep.P works, but for someone with laravel and webpackmix the following is the way to go. In webpack.mix.js file add the following:

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.mjs$/,
                include: /node_modules/,
                type: "javascript/auto"
            }
        ]
    }
});

Just posting it as another answer as it may help someone else or me to find the solution with laravel and webpackmix easily in the future. Thanks.

It probably has to do with different Angular versions.

If ng-lazyload-image is using Angular 13 and your own project is using a lower version this will happen. There are some breaking changes since Angular 13.

If ng-lazyload-image is using Angular 13 there are no es2015 files generated for it's npm package and your compiler is still looking for them.

An option to solve this would be to use a lower version of the ng-lazyload-image package or update your own Angular to Angular 13+