npx create-nx-workspace workspace --cli=angular --preset=angular --appName=tiny-app --style=scssnx update @angular/cli @angular/core
nx generate library assets --directory=shared --tags="scope:shared,type:assets" --style=scss- Remove the architect targets (
lintandtest) of theshared-assetsproject inangular.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.mdnpx 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/.gitkeepmv ./apps/tiny-app/src/favicon.ico ./libs/shared/assets/src- In the
buildarchitect target of thetiny-appproject inangular.json, replace theassetsoption 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 thesrcattribute of the logo image element with"/assets/images/nx-logo-white.svg".
nx generate library styles --directory=shared --tags="scope:shared,type:styles" --style=scss- Remove the architect targets (
lintandtest) of theshared-stylesproject inangular.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.mdmv ./apps/tiny-app/src/styles.scss ./libs/shared/styles/src/lib/_global.scss"@import './lib/global';" > ./libs/shared/styles/src/index.scss- In the
buildarchitect target of thetiny-appproject inangular.json, replace thestylesoption with this entry:
{
"projects": {
"tiny-app": {
"architect": {
"build": {
"options": {
"styles": [
"libs/shared/styles/src/index.scss"
]
}
}
}
}
}
}nx generate library environments --directory=shared --tags="scope:shared,type:environments" --style=scssnpx 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.tsnpx rimraf ./apps/tiny-app/src/environments- In the
buildarchitect target of thetiny-appproject inangular.json, replace thefileReplacementsoption in theproductionconfiguration 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';- Add these two
implicitDependenciesentries to thetiny-appproject innx.json:
{
"projects": {
"tiny-app": {
"implicitDependencies": [
"shared-assets",
"shared-styles"
]
}
}
}