nrwl / nx-examples Goto Github PK
View Code? Open in Web Editor NEWExample repo for Nx workspace
Home Page: https://nrwl-nx-examples-cart.netlify.app/cart
Example repo for Nx workspace
Home Page: https://nrwl-nx-examples-cart.netlify.app/cart
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
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 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 ?
just saw this in the code: https://github.com/nrwl/nx-examples/blob/master/package.json#L46
is this intended or a bug?
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.
Hello, when this will happen?
Thanks!
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)
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.
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.
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.
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,
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 ?
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
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?
Line 13 in c8ebc44
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.
Line 15 in c8ebc44
This page one does not (?) exist anymore, possibly replaced by https://nx.dev/getting-started/intro where users can pick between different tutorials:
Line 102 in c8ebc44
This link can possibly be replaced with https://nx.dev/concepts/how-caching-works
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.
First of all, this one doesn't work.
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
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.
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?
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.
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, 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
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:
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'
;
every Entity should be directly imported in the different modules and it creates quickly A circular dependency between modules
;
to avoid A circular dependency
that throws an unresolved error, all entities should be kept in one big module;
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.
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.
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?
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$
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:
[scope]-[type]-...
prefix?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.
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
if there are two apps (app1, app2), ng generate component toolbar --app=app2
will generate the component for app1
Where can I find the documentation where the use of create-nx-workspace (and it's options) is documented?
Checking out each branch looks like the name corresponds with the readme file. What branch contains the final working code?
Thanks
AJ
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.
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.
Hi all, is there any C++ generation example ?
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.
Due to assets (gif files) the repo is very big. Fresh check-out dir weighs ~725MB. Please compress the image files.
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:
.eslintrc.js
with some basic config.eslintrc.json
.eslintrc.json
is createdNX 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
Hi, could you please add a license to the repo?
Thank you :)
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.
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.
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.
for example type of library - data-access, ui, feature... and so on
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 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
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.