Tiny Angular application project in an Nx workspace.

npx create-nx-workspace workspace --cli=angular --preset=angular --appName=tiny-app --style=scss
nx update @angular/cli @angular/core

Assets workspace library

nx generate library assets --directory=shared --tags="scope:shared,type:assets" --style=scss
Remove the architect targets (lint and test) of the shared-assets project in angular.json:

{
  "projects": {
    "shared-assets": {
      "architect": {}
    }
  }
}

npx rimraf ./apps/tiny-app/src/assets ./libs/shared/assets/*.js ./libs/shared/assets/*.json ./libs/shared/assets/src/*.* ./libs/shared/assets/src/lib
"# shared-assets" > ./libs/shared/assets/README.md
npx mkdirp ./libs/shared/assets/src/assets/fonts ./libs/shared/assets/src/assets/icons ./libs/shared/assets/src/assets/images

"" > ./libs/shared/assets/src/assets/fonts/.gitkeep
"" > ./libs/shared/assets/src/assets/icons/.gitkeep
"" > ./libs/shared/assets/src/assets/images/.gitkeep

mv ./apps/tiny-app/src/favicon.ico ./libs/shared/assets/src
In the build architect target of the tiny-app project in angular.json, replace the assets option with these two entries:

{
  "projects": {
    "tiny-app": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              {
                "glob": "favicon.ico",
                "input": "libs/shared/assets/src",
                "output": ""
              },
              {
                "glob": "**/*",
                "input": "libs/shared/assets/src/assets",
                "output": "assets"
              }
            ]
          }
        }
      }
    }
  }
}

npx -p wget-improved nwget https://nx.dev/assets/images/nx-logo-white.svg -O ./libs/shared/assets/src/assets/images/nx-logo-white.svg
In app.component.html, replace the src attribute of the logo image element with "/assets/images/nx-logo-white.svg".

Styles workspace library

nx generate library styles --directory=shared --tags="scope:shared,type:styles" --style=scss
Remove the architect targets (lint and test) of the shared-styles project in angular.json:

{
  "projects": {
    "shared-styles": {
      "architect": {}
    }
  }
}

npx rimraf ./libs/shared/styles/*.js ./libs/shared/styles/*.json ./libs/shared/styles/src/*.* ./libs/shared/styles/src/lib/*.*
"# shared-styles" > ./libs/shared/styles/README.md
mv ./apps/tiny-app/src/styles.scss ./libs/shared/styles/src/lib/_global.scss
"@import './lib/global';" > ./libs/shared/styles/src/index.scss
In the build architect target of the tiny-app project in angular.json, replace the styles option with this entry:

{
  "projects": {
    "tiny-app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "libs/shared/styles/src/index.scss"
            ]
          }
        }
      }
    }
  }
}

Environments workspace library

nx generate library environments --directory=shared --tags="scope:shared,type:environments" --style=scss
npx rimraf ./libs/shared/environments/src/lib/*.*
mv ./apps/tiny-app/src/environments/*.* ./libs/shared/environments/src/lib
"export * from './lib/environment';" > ./libs/shared/environments/src/index.ts
npx rimraf ./apps/tiny-app/src/environments
In the build architect target of the tiny-app project in angular.json, replace the fileReplacements option in the production configuration with this entry:

{
  "projects": {
    "tiny-app": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "libs/shared/environments/src/lib/environment.ts",
                  "with": "libs/shared/environments/src/lib/environment.prod.ts"
                }
              ]
            }
          }
        }
      }
    }
  }
}

In main.ts, replace the environment import statement with the following:

import { environment } from '@workspace/shared/environments';

Configure Nx workspace

Add these two implicitDependencies entries to the tiny-app project in nx.json:

{
  "projects": {
    "tiny-app": {
      "implicitDependencies": [
        "shared-assets",
        "shared-styles"
      ]
    }
  }
}

fiiiiif / nx-tiny-app-project Goto Github PK

nx-tiny-app-project's Introduction

Tiny Angular application project in an Nx workspace.

Assets workspace library

Styles workspace library

Environments workspace library

Configure Nx workspace

nx-tiny-app-project's People

Contributors

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent