As per docs, running ng test only runs 2 tests (which btw both fail). It looks like across the shared libs and apps themselves there are 32 *.spec.ts files.

Is it possible that from an apps karma.conf.js file, that I can specify spec paths within shared libs to include as part of that apps tests?

Basically what I am trying to do, setup a karma.conf that can then just run the test suite specifically for that app. The majority of functionality is in shared libs, and app logic is minimal, but when working on an app I want to be able to run tests specific to that app in 1 go.

Right now we have something like:

ng test --project=app --watch=false && ng test --project=lib_x --watch=false && ng test --project=lib_y --watch=false && ng test --project=lib_z --watch=false

The problem with this is that the more shared libs we have, the overhead for the tests gets considerably larger, building modules etc, and tests that used to take 1m ish are now taking 5>m locally, and even longer on ci runners.

To generate a component/directive/service/module... in a specific app or library you can use --app:

This line should read as followed to be consistent with the latest CLI:

To generate a component/directive/service/module... in a specific app or library you can use --project:

running an app is also guiding folks to use the outdated --app flag.

Hi, could you please add a license to the repo?

Thank you :)

Where can I find the documentation where the use of create-nx-workspace (and it's options) is documented?

When running ng test against a nx repo utilizing @nrwl/[email protected] as shown in master, you get the following error:

Invalid config file!
TypeError: makeSureNoAppIsSelected is not a function

In the karma.conf.js

const { makeSureNoAppIsSelected } = require('@nrwl/schematics/src/utils/cli-config-utils');
// Nx only supports running unit tests for all apps and libs.
makeSureNoAppIsSelected();

It looks like this was removed by @vsavkin in nrwl/nx@907ec27 but I'm not sure what we're supposed to do now in the karma.conf.js as that hasn't been updated in the example.

Hello, when this will happen?

Thanks!

I would like to have the ability to use nodejs or any (server side) from workspace (app/lib) do you have that abilty integrated ? Or should I use only RESTful API?

This is the error:

> ng generate component relateddata --project=rxjspipelines
Error: More than one module matches. Use the skip-import option to skip importing the component into the closest module or use the module option to specify a module.
    at findModule (C:\Development\Sites\intra\angular\examples\node_modules\@schematics\angular\utility\find-module.js:72:19)
    at Object.findModuleFromOptions (C:\Development\Sites\intra\angular\examples\node_modules\@schematics\angular\utility\find-module.js:25:33)
    at C:\Development\Sites\intra\angular\examples\node_modules\@schematics\angular\component\index.js:95:40
More than one module matches. Use the skip-import option to skip importing the component into the closest module or use the module option to specify a module.

This would have been my 2nd component, but not sure why it didn't work this time. The 1st component worked just find.

Try it in this repo: https://github.com/webmandman/angularexamples

At the moment, there's no clean example that could help build a scalable application in the monorepo with @nrwl/nest as backend. Many sources provide quite limited information and it breaks once the API grows. There are some challenges:

1. with nestjs all Entites are combined with relative path __dirname + '/../*/.entity{.ts,.js}' and it's not possible in the monorepo, as soon as it breaks the border of the module => Error: 'Cannon use import statement outside a module';

2. every Entity should be directly imported in the different modules and it creates quickly A circular dependency between modules;

3. to avoid A circular dependency that throws an unresolved error, all entities should be kept in one big module;

4. classes, imported from the different modules, don't always properly instantiated in the decorators.

I created some repo with the mentioned challenges:

1 - 2: https://github.com/sketchnotes/nx-nestjs

3 - 4: https://github.com/sketchnotes/nx-nestjs-JwtAuthGuard/

Imho, I want to believe that it would be nice to have an easy but scalable example, something like auth-users-posts-comments with all dungeons of @NxDevTools & @nestframework.

First of all, this one doesn't work.

https://blog.nrwl.io/nx-workspace-schematics-server-side-rendering-ssr-with-angular-universal-afc04ead55

It would be great to have SSR in this example, so we can always keep track on it.

Most of the examples I have seen put SSR within the angular app. It seems like it is the only way. However, it seems like against the whole nx architecture.

Here is the setup having ssr inside the angular app https://github.com/jared-christensen/nx-angular-universal

However, it doesnt work in NX v12. It works in NX v11

jared-christensen/nx-angular-universal#1

hey guys,

Just starting out using NX and it looks really slick!

I'm currently in a situation where our team is developing an application 'shell/layout' which can load up one or more applications (different teams/projects) depending on the route. At the current implementation, without NX, we use different applications and the 'shell' has a router configuration to lazy load the other application in a 'layout' like set up. The layout contains a header, a footer and a container. In which the container loads up the other applications.

I was wondering if you guys are planning on adding the router + lazy + parentmodule options to the 'ng g app' command. If not, what would you guys suggest instead?

Hi!

I'm trying to implement a React components library and I would like to use the new JSX transform.
But when I change the Typescript compiler options to use react-jsx, the following error occurs during build:

$ nx run yui-react:build

> nx run yui-react:build
Bundling mylib...
Error when using sourcemap for reporting an error: Can't resolve original location of error.
Error during bundle: Error: 'jsx' is not exported by node_modules/react/jsx-runtime.js
Bundle failed: mylib
Error when using sourcemap for reporting an error: Can't resolve original location of error.
Error during bundle: Error: 'jsx' is not exported by node_modules/react/jsx-runtime.js
Bundle failed: mylib

Commands executed:

$ npx create-nx-workspace
$ nx g @nrwl/react:lib mylib --publishable --importPath @myorg/mylib
$ nx run yui-react:build

package.json

  "devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/preset-env": "^7.13.10",
    "@babel/preset-react": "^7.12.13",
    "@babel/preset-typescript": "^7.13.0",
    "@nrwl/cli": "11.5.2",
    "@nrwl/eslint-plugin-nx": "11.5.2",
    "@nrwl/jest": "11.5.2",
    "@nrwl/linter": "11.5.2",
    "@nrwl/react": "^11.5.2",
    "@nrwl/tao": "11.5.2",
    "@nrwl/web": "11.5.2",
    "@nrwl/workspace": "11.5.2",
    "@testing-library/react": "^11.2.5",
    "@types/jest": "^26.0.21",
    "@types/node": "^14.14.35",
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.2",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "babel-jest": "^26.6.3",
    "dotenv": "8.2.0",
    "eslint": "^7.22.0",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsx-a11y": "6.4.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "4.2.0",
    "jest": "^26.6.3",
    "prettier": "2.2.1",
    "ts-jest": "^26.5.4",
    "ts-node": "~9.1.1",
    "typescript": "^4.2.3"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "document-register-element": "^1.14.10",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "tslib": "^2.0.0"
  }

Hi,
It would be very useful if you could add a workspace-specific schematics use case example in Readme.
Maybe we just have to follow the angular schematics docs ?

Hi all, is there any C++ generation example ?

Good afternoon,
I'd like to enable the power of buildable libraries in my project.
Unfortunately I don't quite understand how to polyfill? missing imports.

I've got errors similar to:

Could an example be provided of how to build libraries with react presentational components?

Hi guys, thanks for the attention!

So, I'm trying to serve locally a workspace with 2 apps in the same port, 4200.
I know that I need to pass which app I want to serve.

but if I run that way:
ng serve --project=app1 --port 4200 | ng serve --project=app2 --port 4201

I keeping with the same doubt, running 2 apps in different ports, can access app2 just if a get in 4201 port.

I'm trying by proxy file, when access ':4200/app2' to get into app2.

there is any simplest way to serve many apps just in 4200 port and access them by different routes ?

Due to assets (gif files) the repo is very big. Fresh check-out dir weighs ~725MB. Please compress the image files.

node -v
v9.5.0

ng -v
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
    
Angular CLI: 1.6.5
Node: 9.5.0
OS: darwin x64
Angular: 5.2.8
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

@angular/cli: 1.6.5
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.4.5
@angular-devkit/schematics: 0.4.5
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.5
@schematics/angular: 0.4.5
typescript: 2.7.2
webpack: 3.10.0

$ - ng generate app @Any-Application --routing --style=scss

Throws exception:

Error: Unregistered task "node-package" in schematic "app".
Unregistered task "node-package" in schematic "app".

Hi, maybe I'm overlooking something silly but I don't understand the readme when it says:

Below are some plugins which you can add to your workspace:

• Angular
  • ng add @nrwl/angular
• React
  • ng add @nrwl/react

What is ng? Is it supposed to say nx? 🤔

When I running the command nx serve in local.Only product application is running.why cart application is not running?

We saved the last build SHA in CircleCI cache as the reference for next build
https://github.com/nrwl/nx-examples/blob/master/.circleci/config.yml#L139-L142

- save_cache:
    key: last-deploy-sha
    paths:
      - dist/last-deploy.txt

But CircleCI cache is immutable, so saving an existing cache doesn't take any effect.

Skipping cache generation, cache already exists for key: last-deploy-sha
Found one created at 2022-08-29 17:03:12 +0000 UTC

We should find other solutions to save the SHA.

When i try to access the example repo: https://nrwl.github.io/nx-examples/nx-examples I get a number of 404 errors. See Image

i found breaking change on /utils/cli-config-utils
const { getAppDirectoryUsingCliConfig } = require('@nrwl/schematics/src/utils/cli-config-utils');
there's no getAppDirectoryUsingCliConfig
im only found this function

function getWorkspacePath(host) {
    var possibleFiles = ['/angular.json', '/.angular.json'];
    return possibleFiles.filter(function (path) { return host.exists(path); })[0];
}

how to configure my protractor conf with this?
thanks

When I run npm run affected:apps I get the following error:

nx affected:apps
Invalid options provided
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] affected:apps: nx affected:apps
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] affected:apps script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:

That is my current configuration:

Angular CLI: 6.0.1
Node: 8.11.3
OS: win32 x64
Angular: 6.0.1
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.6.1
@ngtools/webpack                  6.0.8
@schematics/angular               0.6.1
@schematics/update                0.6.1
rxjs                              6.0.0
typescript                        2.7.2
webpack                           4.8.3

It's possible I've got something misconfigured but the folder structure I see when I use the generators doesn't match what's in the repo. For example when I generate a lib I see it created in libs/{name}/apps/{appName}/src/lib.module.ts.

We have a reasonably-sized app that I'm trying to keep control of but I'm a bit lost! Any help would be greatly appreciated.

Can you please clarify what should be the naming convention for classes, service, interfaces in each lib? Shall they use "ScopeType..." prefix or not? I am seeing different variants being used, even in this example repo and can't produce a clear guideline for the team. For example, I'd expect the interface in https://github.com/nrwl/nx-examples/blob/master/libs/shared/product/types/src/lib/shared-product-types.ts to follow the file name and be called something like SharedProductType to match the file name, or if this is not the convention why the module in https://github.com/nrwl/nx-examples/blob/master/libs/shared/product/state/src/lib/shared-product-state.module.ts can't simply be named ProductStateModule? Why does it have scope as part of the name? And so forth.

Can someone please 🙏 explain two things:

1. When the file names should have [scope]-[type]-... prefix?
2. When the classes/interfaces/constants in files above should have the same scope/type in their names and when they should not? SharedUtilCreatePostResponseInterface in libs/shared/util-create-post-response-interface/... lib sounds silly, but at least Nx 8 generates it this way.

Thank you very much.

for example type of library - data-access, ui, feature... and so on

The command to create a new workspace is outdated, the bash script is replaced by a script in the .bin folder of the @nrwl/schematics package. (https://angularplaybook.com/courses/264974/lectures/4113736)

if there are two apps (app1, app2), ng generate component toolbar --app=app2 will generate the component for app1

I've seen that a similar question was closed.

But the question remains: is it possible to add app/library specific package.jsons to an nx workspace?

Since this repo is advertised on the nx website as the example for micro-frontends, I came here with high hopes, only to find disappointment since IMO this example is not a micro-frontend at all.

As I noted in #61 some thought leaders argue that it is fundamental for micro-frontends to be deployed autonomously, and a single version policy seriously hurts this goal.

Hi,

I just cloned this repo. After running "npm install" and "ng serve cart" the below error is thrown.
I've searched where these options are set but unfortunately I cannot find it.
Any idea how to fix this?

Thanks & best regards,
Johan

ERROR in C:/Dev/nx-examples/libs/shared/header/index.scss
(C:/Dev/nx-examples/node_modules/@nrwl/web/src/utils/third-party/cli-files/plugins/raw-css-loader.js!C:/Dev/nx-examples/node_modules/postcss-loader/src??embeddees/postcss-loader/src??embedded!C:/Dev/nx-examples/node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-7-3!C:/Dev/nx-examples/libs/shared/header/index.scss)
Module build failed (from C:/Dev/nx-examples/node_modules/sass-loader/dist/cjs.js):
ValidationError: **Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.

• options has an unknown property 'includePaths'.** These properties are valid:
  object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
  at validate (C:\Dev\nx-examples\node_modules\schema-utils\dist\validate.js:85:11)
  at Object.loader (C:\Dev\nx-examples\node_modules\sass-loader\dist\index.js:36:28)

this lib school-ui (https://github.com/nrwl/nx-examples/tree/master/libs/school-ui) which is not shared in other apps except school app (https://github.com/nrwl/nx-examples/tree/master/apps/school). Why do you put it in libs directory? This looks strange. My understanding is that all modules in libs are supposed to be shared across multiple apps, rather than used just in one dedicated app. I think this misleads novice to put app related modules/components in libs folder, not only shared modules/components. Thanks.

Hello,

How can we run multiple applications on the same port just different base URL?
Assume we do not have access to backend since API calls are external

We are using next js and adding basePath in next.config.js will render app on localhost/basepath but ports are still different
so instead of
app1 on localhost:4200
app2 on localhost:4300
We want
app1 on localhost:4200/app1
app2 on localhost:4200/app2 running in parallel.

Our karma and protractor conf files output test results and code coverage to files. It would be good to see example of how we can know the app being tested so we can include that in the filename we generate.

I am a first time user of nx, and so far, really like it. I am starting to utilize libraries with my NestJS application, and had a question on the intended purpose of specific file. Consider the following generation command:

nx g @nrwl/nest:library --directory=training/api --name=user --controller=true --service=true --tags=app:api

This creates the following lib files (among others):

1. libs/training/api/user/src/lib/training-api-user.controller.ts
2. libs/training/api/user/src/lib/training-api-user.module.ts
3. libs/training/api/user/src/lib/training-api-user.service.ts
4. libs/training/api/user/src/lib/training-api-user.ts

I think it is pretty clear what the purpose of files 1-3 are. Inject the service into the module, import the controller into the module, and utilize the service for controller-related functionality and data access.

But what is file 4 intended to be used for? I find myself leaving this blank more often than not, but given that it was auto-generated, I'm assuming it has an intended use?

Thanks!

Hi guys, I have this bit of code

@Effect()
  public login$ = this.dataPersistence.fetch(AuthActionTypes.AuthLoginRequest, {
    run: (action: AuthLoginRequest, state: AuthState) => {
      return new AuthLoginSuccess({})
    },

    onError: (action: AuthLoginRequest, error) => {
      return new AuthLoginFailure()
    }
  });

How can i unit test the "orError" part of it?

Can you provide documentation that starts with the initial setup of the micro frontend example?

Or, I was wondering if there are any articles that you can refer to.

Hi I am new to NX but it is simply great. I have a interesting question.
Is it possible to override a workspace Node module dependency localy for a certain project ?

So basically create a node-module folder within an app which will override the dependencies of the workspace node-module folder. The use case will be if we have the application code build against older dependency.

Normally, we'd use "ng g application myapp". The Nx Example readme shows "ng g @nrwl/angular:app myapp" to create an application.

I have tried both ways within an Nx workspace and I didn't find any difference.

Is there a difference?

Hello, does it happen to anyone that it seems as if the tests were executed twice?

I mean, I have 1289 tests in my project and in console it appears that 2578 were executed., (In the screenshot below I have taken the screenshot almost at the end of the execution, it shows 2551 of these) but when the final report is being generated, it appears the 1289 tests.

I have updated Angular (12.2.10) , Jest and Nx to their latest version.

My package.json is as follows:

{
"name": "frontend",
"version": "1.0.2",
"license": "MIT",
"scripts": {
"ng": "nx",
"nx": "nx",
"start": "nx serve",
"build": "ng build",
"build:prod": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build --configuration production --aot --build-optimizer && gzipper compress ./www",
"build:test": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build --configuration production --aot --build-optimizer --configuration=test && gzipper compress ./www",
"test": "node --max-old-space-size=8192 --expose-gc node_modules/jest/bin/jest.js --coverage --verbose false --logHeapUsage --ci",
"test-watch": "jest --watchAll --coverage --verbose false --logHeapUsage --maxWorkers=11",
"lint": "nx workspace-lint && ng lint",
"e2e": "ng e2e",
"affected:apps": "nx affected:apps",
"affected:libs": "nx affected:libs",
"affected:build": "nx affected:build",
"affected:e2e": "nx affected:e2e",
"affected:test": "nx affected:test",
"affected:lint": "nx affected:lint",
"affected:dep-graph": "nx affected:dep-graph",
"affected": "nx affected",
"format": "nx format:write",
"format:write": "nx format:write",
"format:check": "nx format:check",
"update": "ng update @nrwl/workspace",
"workspace-schematic": "nx workspace-schematic",
"dep-graph": "nx dep-graph",
"help": "nx help",
"postinstall": "ngcc",
"compodoc": "compodoc -p ./tsconfig.compodoc.json -s",
"build-webpack-analyzer": "ng build --stats-json",
"run-webpack-analyzer": "webpack-bundle-analyzer www/stats.json",
"sonar-linux": "./node_modules/sonar-scanner/bin/sonar-scanner",
"sonar-windows": ".\node_modules\sonar-scanner\bin\sonar-scanner"
},
"author": "José Ignacio Sanz García",
"private": true,
"dependencies": {
"@angular-material-components/datetime-picker": "^5.1.0",
"@angular/animations": "12.2.10",
"@angular/cdk": "12.2.10",
"@angular/common": "12.2.10",
"@angular/compiler": "12.2.10",
"@angular/core": "12.2.10",
"@angular/elements": "12.2.10",
"@angular/forms": "12.2.10",
"@angular/localize": "^12.2.10",
"@angular/material": "12.2.10",
"@angular/platform-browser": "12.2.10",
"@angular/platform-browser-dynamic": "12.2.10",
"@angular/platform-server": "12.2.10",
"@angular/pwa": "^0.1102.11",
"@angular/router": "12.2.10",
"@angular/service-worker": "12.2.10",
"@compodoc/compodoc": "^1.1.13",
"@ctrl/ngx-codemirror": "^4.1.1",
"@fullcalendar/core": "^5.6.0",
"@ng-select/ng-select": "^6.1.0",
"@ngrx/component-store": "12.5.0",
"@ngrx/effects": "12.5.0",
"@ngrx/entity": "12.5.0",
"@ngrx/router-store": "12.5.0",
"@ngrx/store": "12.5.0",
"@ngrx/store-devtools": "12.5.0",
"@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0",
"@nrwl/eslint-plugin-nx": "12.10.0",
"@nrwl/workspace": "12.10.0",
"@typescript-eslint/eslint-plugin": "^4.22.1",
"@typescript-eslint/parser": "^4.22.1",
"chart.js": "^2.9.4",
"classlist.js": "^1.1.20150312",
"codemirror": "^5.61.0",
"crypto-js": "^4.0.0",
"eslint-plugin-cypress": "^2.11.2",
"file-saver": "^2.0.5",
"fs": "0.0.1-security",
"google-libphonenumber": "^3.2.21",
"html2canvas": "^1.0.0-rc.7",
"html2pdf.js": "^0.10.1",
"jest-canvas-mock": "^2.3.1",
"jest-leak-detector": "^27.0.6",
"jsdom": "^16.6.0",
"jspdf": "^2.3.1",
"jspdf-autotable": "^3.5.14",
"lodash": "^4.17.21",
"mammoth": "^1.4.18",
"ng-mocks": "^12.5.0",
"ngx-material-file-input": "^2.1.1",
"ngx-swiper-wrapper": "^10.0.0",
"npm": "^7.23.0",
"posthtml-beautify": "^0.7.0",
"primeicons": "^4.1.0",
"primeng": "^11.4.0",
"project": "^0.1.6",
"properties-parser": "^0.3.1",
"quill": "^1.3.7",
"rxjs": "^6.6.7",
"screenfull": "^5.1.0",
"textarea-caret": "^3.1.0",
"to-px": "^1.1.0",
"tslib": "^2.2.0",
"weak-napi": "^2.0.2",
"web-animations-js": "^2.3.2",
"xlsx": "^0.17.1",
"zone.js": "0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "12.2.10",
"@angular-devkit/schematics": "^12.2.10",
"@angular-eslint/eslint-plugin": "12.3.1",
"@angular-eslint/eslint-plugin-template": "12.3.1",
"@angular-eslint/template-parser": "12.3.1",
"@angular/cli": "12.2.10",
"@angular/compiler-cli": "12.2.10",
"@angular/language-service": "12.2.10",
"@ngrx/schematics": "12.5.0",
"@nrwl/angular": "12.10.0",
"@nrwl/cypress": "12.10.0",
"@nrwl/jest": "12.10.0",
"@types/chart.js": "^2.9.31",
"@types/crypto-js": "^4.0.1",
"@types/google-libphonenumber": "^7.4.21",
"@types/html2canvas": "0.0.36",
"@types/jest": "27.0.2",
"@types/jspdf": "^1.3.3",
"@types/lodash": "^4.14.168",
"@types/textarea-caret": "^3.0.0",
"@types/to-px": "^1.1.1",
"cypress": "^7.2.0",
"eslint": "^7.25.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.0",
"gzipper": "^4.5.0",
"html-docx-js-typescript": "^0.1.5",
"jest": "27.2.3",
"jest-junit": "^12.2.0",
"jest-preset-angular": "10.0.1",
"jest-sonar": "^0.2.12",
"posthtml": "^0.15.2",
"prettier": "2.3.1",
"protractor": "^7.0.0",
"sonar-scanner": "^3.1.0",
"string.prototype.replaceall": "^1.0.5",
"swiper": "^6.5.9",
"ts-jest": "27.0.5",
"ts-loader": "^9.1.1",
"ts-node": "^9.1.1",
"typescript": "4.3.5",
"webpack-bundle-analyzer": "^4.4.0",
"webpack-cli": "^4.6.0"
},
"browser": {
"crypto": false
}
}

The base jest.config.js (the one in the root) is as follows:

module.exports = {
testMatch: ['/+(*.)+(spec|test).+(ts|js)?(x)'],
transform: {
'^.+\.(ts|js|html)$': 'ts-jest',
},
resolver: '@nrwl/jest/plugins/resolver',
moduleFileExtensions: ['ts', 'js', 'html'],
coverageDirectory: '/coverage',
reporters: ['default',
'jest-junit',
['jest-sonar', {
outputDirectory: './',
outputName: 'test-report.xml',
reportedFilePath: 'absolute'
}],
],
setupFiles: [
'/test-setup.ts'
],
coverageReporters: ["json", "lcov", "clover", "text", "text-summary", "cobertura"],
collectCoverageFrom: [
"/.ts",
"!/node_modules/",
"!/vessel.ts",
"!/.module.ts",
"!/routes.ts",
"!/paths.ts",
"!/*.token.ts",
"!/.collection.ts",
"!**/.enum.ts",
"!/*.model.ts",
"!/.mock.ts",
"!/polyfills.ts",
"!/main.ts",
"!/index.ts",
"!/help.ts",
"!/admin-help/",
"!**/.environment.ts",
"!/environment*.ts",
"!/typings.d.ts"
],
projects: [
'/libs/core',
'/libs/menu-ui',
'/libs/shared',
'/apps/ioms-main',
'/apps/auth',
'/apps/side-menu',
'/apps/dashboard',
'/apps/messaging',
'/apps/administration',
'/apps/data-request',
'/apps/vessels',
'/apps/compliance-data'
]
};

My jest-preset.js is the following:

const nxPreset = require('@nrwl/jest/preset');

nxPreset.transform = {
'^.+\.(ts|js|html)$': 'jest-preset-angular'
};
module.exports = { ...nxPreset };

the test-setup.ts that is in the root is the following:
import 'jest-canvas-mock';
import '@frontend/core/mocks/libs/rxjs.mock';

console.warn = (message: string) => {
if(!message.includes('Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming')) {
console.warn(message);
}
};

the jest.config.js files of the different projects are as the following:

module.exports = {
displayName: 'core',
name: 'core',
coverageDirectory: '../../coverage/libs/core',
preset: '../../jest.preset.js',
setupFiles: ['./../../test-setup.ts'],
setupFilesAfterEnv: ['/src/test-setup.ts'],
globals: {
'ts-jest': {
tsconfig: '/tsconfig.spec.json',
stringifyContentPathRegex: '\.(html|svg)$'
},
},
snapshotSerializers: [
'jest-preset-angular/build/serializers/no-ng-attributes',
'jest-preset-angular/build/serializers/ng-snapshot',
'jest-preset-angular/build/serializers/html-comment',
]
};

What could be happening?

Thanks in advance.

In my project, I'm using .eslintrc.js as a root config for ESLint (my config needs dynamic paths and some other JS-related features so JSON is a limitation).
When I'm using a generator for creating lib/app then every time .eslintrc.json file is created.

Repro steps:

1. create .eslintrc.js with some basic config
2. remove .eslintrc.json
3. generate new application
4. check root directory - .eslintrc.json is created

Expected behavior

NX Generator should at least check if .eslintrc.js exist at the root level and if so do not create .eslintrc.json file.

I know that JS files require AST manipulation which is much more complicated than updating JSON so I don't expect that migrations and other tasks will do it automatically but at least additional JSON config shouldn't be created

I'm not sure about which video this might be linked to, should be available in Git history. Found this from YouTube: https://www.youtube.com/watch?v=XZpp52IqD2A

This video is 3 years old at this point so possibly can be replaced or skipped entirely.

This page one does not (?) exist anymore, possibly replaced by https://nx.dev/getting-started/intro where users can pick between different tutorials:

• package-based
• integrated repo
• add to existing repo.

This link can possibly be replaced with https://nx.dev/concepts/how-caching-works

Hi,
Following error occurred during workspace creation.
can you give me direction what am doing wrong?

Sajids-MacBook-Pro:~ Sajid$ create-nx-workspace demo-workspace
Creating a sandbox with the CLI and Nx Schematics...
[fsevents] Success: "/private/var/folders/hp/2ghd8_6n48d8mm1hcg_2hp4w0000gn/T/tmp-5443WXGVxrJaXwPz/node_modules/fsevents/lib/binding/Release/node-v59-darwin-x64/fse.node" is installed via remote
added 425 packages in 14.795s
ng new "demo-workspace" --collection=@nrwl/schematics
Could not find module "@ngrx/schematics" from "/Users/Sajid".
Error: Could not find module "@ngrx/schematics" from "/Users/Sajid".
at Object.resolve (/Users/Sajid/node_modules/@angular-devkit/core/node/resolve.js:141:11)
at NodeModulesEngineHost._resolvePackageJson (/Users/Sajid/node_modules/@angular-devkit/schematics/tools/node-module-engine-host.js:29:21)
at NodeModulesEngineHost._resolveCollectionPath (/Users/Sajid/node_modules/@angular-devkit/schematics/tools/node-module-engine-host.js:70:40)
at NodeModulesEngineHost.createCollectionDescription (/Users/Sajid/node_modules/@angular-devkit/schematics/tools/file-system-engine-host-base.js:106:27)
at SchematicEngine._createCollectionDescription (/Users/Sajid/node_modules/@angular-devkit/schematics/src/engine/engine.js:78:40)
at SchematicEngine._createCollectionDescription (/Users/Sajid/node_modules/@angular-devkit/schematics/src/engine/engine.js:89:48)
at SchematicEngine.createCollection (/Users/Sajid/node_modules/@angular-devkit/schematics/src/engine/engine.js:71:43)
at Object.getCollection (/Users/Sajid/node_modules/@angular/cli/utilities/schematics.js:28:31)
at NewCommand.getOptions (/Users/Sajid/node_modules/@angular/cli/models/schematic-command.js:194:41)
at NewCommand.initialize (/Users/Sajid/node_modules/@angular/cli/commands/new.js:48:21)
child_process.js:615
throw err;
^

Error: Command failed: /var/folders/hp/2ghd8_6n48d8mm1hcg_2hp4w0000gn/T/tmp-5443WXGVxrJaXwPz/node_modules/.bin/ng new "demo-workspace" --skip-install --collection=@nrwl/schematics
at checkExecSyncError (child_process.js:575:11)
at Object.execSync (child_process.js:612:13)
at Object. (/usr/local/lib/node_modules/@nrwl/schematics/bin/create-nx-workspace.js:83:17)
at Module._compile (internal/modules/cjs/loader.js:654:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)
at Module.load (internal/modules/cjs/loader.js:566:32)
at tryModuleLoad (internal/modules/cjs/loader.js:506:12)
at Function.Module._load (internal/modules/cjs/loader.js:498:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:695:10)
at startup (internal/bootstrap/node.js:201:19)
Sajids-MacBook-Pro:~ Sajid$

https://nrwl.github.io/nx-examples/nx-examples

running npx cypress open does open the cypress app and displays the specs in the monorepo correctly:

However, if I click on any of the spec files, i get this error:

Is there a way to fix this? I know I can run each project individually with nx run my-app-e2e:e2e --headed --no-exist but it would be nice to be able to navigate all the tests at a repo level.

Checking out each branch looks like the name corresponds with the readme file. What branch contains the final working code?

Thanks
AJ

just saw this in the code: https://github.com/nrwl/nx-examples/blob/master/package.json#L46

is this intended or a bug?

Hi, Upon trying storybook with Nx and Angular, I was able to run those perfectly but it seems that I can not use external css library within storybook like tailwindcss.

Do you have the proper webpack config for this?

Thanks!

Regards,
Lex