Nx 共享资产库

Question

I want my React app in my Nx monorepo to retrieve all the assets in my asset library called common-assets .

I managed to do it with my NextJS app like so:

project.json of my NextJS app

{
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/clients",
  "projectType": "application",
  "implicitDependencies": ["common-assets"],
  "targets": {
    "build": {
      "executor": "@nrwl/next:build",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "root": "apps/clients",
        "outputPath": "dist/apps/clients",
        "assets": [
          {
            "input": "libs/common/assets/src/lib",
            "glob": "**/*",
            "output": "assets"
          }
        ]
      },
...
}

I tried to do the exact same thing for my react App by modifying the asset key in the project.json

project.json of my React app:

  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/sellers/src",
  "projectType": "application",
  "implicitDependencies": ["common-assets"],
  "targets": {
    "build": {
      "executor": "@nrwl/web:webpack",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "compiler": "babel",
        "outputPath": "dist/apps/sellers",
        "index": "apps/sellers/src/index.html",
        "baseHref": "/",
        "main": "apps/sellers/src/main.tsx",
        "polyfills": "apps/sellers/src/polyfills.ts",
        "tsConfig": "apps/sellers/tsconfig.app.json",
        "assets": [
          "apps/sellers/src/favicon.ico",
          "apps/sellers/src/assets",
          {
            "input": "libs/common/assets/src/lib",
            "glob": "**/*",
            "output": "src/assets"
          }
        ],
        "styles": ["apps/sellers/src/styles.scss"],
        "scripts": [],
        "webpackConfig": "@nrwl/react/plugins/webpack"
      },
      "configurations": {
        "development": {
          "extractLicenses": false,
          "optimization": false,
          "sourceMap": true,
          "vendorChunk": true
        },
        "production": {
          "fileReplacements": [
            {
              "replace": "apps/sellers/src/environments/environment.ts",
              "with": "apps/sellers/src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "namedChunks": false,
          "extractLicenses": true,
          "vendorChunk": false
        }
      }
    },
    "serve": {
      "executor": "@nrwl/web:dev-server",
      "defaultConfiguration": "development",
      "options": {
        "buildTarget": "sellers:build",
        "hmr": true
      },
      "configurations": {
        "development": {
          "buildTarget": "sellers:build:development"
        },
        "production": {
          "buildTarget": "sellers:build:production",
          "hmr": false
        }
      }
    },
    "lint": {
      "executor": "@nrwl/linter:eslint",
      "outputs": ["{options.outputFile}"],
      "options": {
        "lintFilePatterns": ["apps/sellers/**/*.{ts,tsx,js,jsx}"]
      }
    },
    "test": {
      "executor": "@nrwl/jest:jest",
      "outputs": ["coverage/apps/sellers"],
      "options": {
        "jestConfig": "apps/sellers/jest.config.ts",
        "passWithNoTests": true
      }
    }
  },
  "tags": []
}

But it's not working...

Answer 1

I kept assets into image folder and

"assets": [
      "apps/boost/src/favicon.ico",
      "apps/boost/src/assets",
      {
        "input": "libs/common-assets/assets/src/lib/images",
        "glob": "**/*",
        "output": "assets"
      }
    ],

I'm able to use it into other project as well

 <img alt="logo" src="/assets/logo.png" />

Answer 2

Do this:

{
   "input": "./libs/common-assets/src/lib/images",
   "glob": "**/*",
   "output": "/assets/"
}

Then access it with:

<img alt="logo" src="assets/logo.png" />