nrwl / nx Goto Github PK
View Code? Open in Web Editor NEWSmart Monorepos · Fast CI
Home Page: https://nx.dev
License: MIT License
Smart Monorepos · Fast CI
Home Page: https://nx.dev
License: MIT License
First of all, thank you for such a wonderful tool. It's so much easier now to work with complex angular apps.
I noticed that while upgrading an existing Angular CLI project using the generate workspace
command, it deletes all the existing npm
scripts (such as start
, build
, test
, lint
and e2e
that use ng
command) and replaces these with only format
script.
Versions:
@angular/cli: 1.5.0-beta.4
@nrwl/schematics: 0.0.7
node: v8.7.0
yarn: 1.2.1
It would be useful to have the original npm
scripts even after the conversion to nx workspace.
Steps to reproduce:
yarn global add nrwl/fix-cli-build nrwl/schematics-build
ng new proj
cd proj
yarn add nrwl/schematics-build
./node_modules/.bin/schematics @nrwl/schematics:convert-to-workspace
Looks like https://github.com/nrwl/nx/blob/master/packages/schematics/src/convert-to-workspace/index.ts#L65 might just need to get changed to use angularCliJson.defaults
instead of app.defaults
(along with e2e test update to confirm).
Right now, the upgrade process just moves the folder, which doesn't preserve git history of moved files correctly.
Ideally, if the project is a git repo, and git is installed, the src directory should be moved using git mv
, and a commit should be immediately created for the move and the other files changed/created by the conversion. By creating a commit immediately after git mv
, then the git history will have a minimal commit showing the existing files being renamed (and will reduce risk that git will not recognize it as a rename due to other changes to existing files being applied in the same revision).
I've been exploring nrwl/nx and I really like it since it solves the exact problems we found when building an application on my company.
While I really enjoy the Workspaces, aliases, libs, the only aspect I decided to leave out is Ngrx Data Persistence
.
I wonder if it would be a good idea to make it optional, or at least make it easy to remove it ?
Hey guys, thanks a lot for the project!
I am trying to setup a workspace following the official docs but getting an error:
➜ WebstormProjects ng new myprojectname --collection=@nrwl/schematics
Cannot find module '@angular-devkit/schematics'
Error: Cannot find module '@angular-devkit/schematics'
at Function.Module._resolveFilename (module.js:527:15)
at Function.Module._load (module.js:476:23)
at Module.require (module.js:568:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/Users/m0t0r/.nvm/versions/node/v8.6.0/lib/node_modules/@nrwl/schematics/src/application/index.js:11:20)
at Module._compile (module.js:624:30)
at Object.Module._extensions..js (module.js:635:10)
at Module.load (module.js:545:32)
at tryModuleLoad (module.js:508:12)
at Function.Module._load (module.js:500:3)
Additional information:
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
@angular/cli: 1.5.0-beta.4
node: 8.6.0
os: darwin x64
An effect built with the DataPersistence service is always typed as Observable<any>
, while a regular effect can infer types like (for example) Observable<user.CreateUserSuccess | user.CreateUserFailure>
. (1)
The arguments of run
, onError
, and others should also infer types. (2, 3)
@Injectable()
class TodoEffects {
@Effect()
loadTodo = this.s.pessimisticUpdate('UPDATE_TODO', {
run: (a, state) => ({
type: 'TODO_UPDATED',
payload: { user: state.user, newTitle: a.payload.newTitle }
}),
onError: (a, e: any) => null
});
constructor(private s: DataPersistence<TodosState>) {}
}
(property) TodoEffects.loadTodo: Observable<any>
(parameter) a: Action
(parameter) state: any
@Injectable()
class TodoEffects {
@Effect()
loadTodo = this.s.pessimisticUpdate<UpdateTodo>('UPDATE_TODO', {
run: (a, state) => ({
type: 'TODO_UPDATED',
payload: { user: state.user, newTitle: a.payload.newTitle }
}),
onError: (a, e: any) => null
});
constructor(private s: DataPersistence<TodosState>) {}
}
(property) TodoEffects.loadTodo: Observable<{ type: 'TODO_UPDATED', payload: {...} }>
(parameter) a: UpdateTodo
(parameter) state: TodosState
PR #63 attempts to fix issues 2 and 3
Outputs the error Cannot read property 'npmScope' of undefined
Steps to reproduce:
yarn global add nrwl/fix-cli-build nrwl/schematics-build
ng new proj
cd proj
yarn add nrwl/schematics-build
./node_modules/.bin/schematics @nrwl/schematics:convert-to-workspace
Running this command on an empty NgModule
caused two imports
properties to be added to the NgModule
decorator.
Before:
@NgModule({})
export class ContactsModule {}
Generate:
$ ng g ngrx contacts --module=libs/contacts/src/contacts.module.ts
After:
@NgModule({
providers: [ContactsEffects]
imports: [StoreModule.forFeature('contacts', contactsReducer, {initialState: contactsInitialState})]
imports: [EffectsModule.forFeature([ContactsEffects])]
})
yarn gives me the following warnings
warning "@nrwl/[email protected]" has unmet peer dependency "rxjs@>5.4.2".
warning "@nrwl/[email protected]" has unmet peer dependency "@angular-devkit/schematics@>0.0.18".
warning "@nrwl/[email protected]" has unmet peer dependency "@schematics/angular@>0.0.30".
[4/4] Building fresh packages...
warning "@nrwl/[email protected]" has no binaries
My workplace has banned connection to git and a few other places so i cant use the install script
# Create nx sandbox
$ curl -fsSL https://raw.githubusercontent.com/nrwl/nx/master/packages/install/install.sh | bash -s nx-sandbox
$ cd nx-sandbox
$ ng generate app an-app
...
update .angular-cli.json (1361 bytes)
No matching files. Patterns tried: '{apps,libs}/**/*.ts' !**/node_modules/** !./node_modules/**
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] format: `prettier --single-quote --print-width 120 --write '{apps,libs}/**/*.ts'`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] format 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:
npm ERR! ~\npm-cache\_logs\2017-10-11T10_44_53_010Z-debug.log
$ node --version
v8.4.0
$ ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
@angular/cli: 1.5.0-beta.2
node: 8.4.0
os: win32 x64
@angular/animations: 4.4.4
@angular/common: 4.4.4
@angular/compiler: 4.4.4
@angular/core: 4.4.4
@angular/forms: 4.4.4
@angular/http: 4.4.4
@angular/platform-browser: 4.4.4
@angular/platform-browser-dynamic: 4.4.4
@angular/router: 4.4.4
@angular/cli: 1.5.0-beta.2
@angular/compiler-cli: 4.4.4
@angular/language-service: 4.4.4
typescript: 2.3.4
$ cat node_modules/@nrwl/nx/package.json
{
"name": "@nrwl/nx",
"version": "0.0.5+a43fbae",
"description": "Nrwl Extensions for Angular",
..
$ cat node_modules/@nrwl/schematics/package.json
{
"name": "@nrwl/schematics",
"version": "0.0.5+a43fbae",
"description": "Nrwl Extensions for Angular: Schematics",
..
After converting a CLI app into an nx one via https://nrwl.io/nx/guide-nx-workspace#convert-an-angularcli-project-to-an-nx-workspace my package.json
& .angular-cli.json
are missing empty lines at their ends. Many editors add such an empty line automatically as it reduces noise in Git diffs (otherwise adding a line at the end creates a difference in two lines as a line break is counted into the preceding line).
Most tools like npm or Yarn generate JSON files with a trailing new line as well so it'd be good to align.
Hi,
Just wondering if there is anywhere in the pipeline to have a template or process to include ionic 3 apps?
It is very annoying to deal with formatting code (especially via tslint). Instead we should use tools like clang-format or prettier to do that.
We should change the workspace (and covert-to-workspace) schematic in the following way:
Finally, we should update the schematics to generate code that is formatted properly. So running yarn format
will produce 0 changes. The last part might be tricky in some situations, but things like quotes, spaces, etc can be handled in the same PR.
Hi Guys,
Thanks very much for making this framework available. Have been looking to implement this structure for a while but never had the time to create the tooling.
So I followed the instructions on the getting started -
I copy pasted the command to create the workspace using the sandbox method. After a short time and without error I ended up with a Angular cli looking folder structure. No apps and no libs folders
I tried running the command to upgrade existing cli app to workspace and I received error stating workspace was unknown schematic.
Tried globally uninstalling angular cli and installed beta 1.5b4. Ran the commands for sandbox and I still got Angular cli folder structures.
Tried global installation of nx it complained about missing dependcies such as schematics etc. tried installing them. Ran command to generate app and I got once again an Angular cli folder structure.
Has anyone encountered this issue?
Have a feeling I am missing something obvious and probably perfectly documented.
I am using a Mac for development.
Regards,
Tarek
In newly generated ngrx app ng g module doesn't work. ng g component/service/... works fine.
ng generate ngrx app —module=apps/debug/src/app/app.module.ts —root
ng g module apps/debug/src/myFeatureModule
NgRx Schematic adds a bunch of imports on the same line, which makes the generated code too long.
It should generate imports on separate lines.
When generating a new lib with ng g lib libname --ngmodule
, npm throws an exception under windows because it does not find the argument xargs
.
ng g lib mylib --ngmodule --export
The option '--export' is not registered with the generate command. Run `ng generate --help` for a list of supported options.
create libs/mylib/index.ts (65 bytes)
create libs/mylib/src/mylib.module.spec.ts (191 bytes)
create libs/mylib/src/mylib.module.ts (168 bytes)
update .angular-cli.json (1838 bytes)
Der Befehl "xargs" ist entweder falsch geschrieben oder
konnte nicht gefunden werden.
npm ERR! code ELIFECYCLE
npm ERR! errno 255
npm ERR! [email protected] format: `find apps/ -iname '*.ts' | xargs clang-format -i && find libs/ -iname '*.ts' | xargs clang-format -i`
npm ERR! Exit status 255
npm ERR!
npm ERR! Failed at the [email protected] format script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
I have been receiving this area when trying to wire up ngrx. I cloned the ngrx_exemplary app, and it builds just fine. I tried to reproduce this as minimally as possible, and I'm still receiving the following error:
ERROR in ~/Repos/AngularSandbox/apps/test/src/app/app.module.ts (17,60): Argument of type '(state: Test, action: TestAction) => Test' is not assignable to parameter of type 'ActionReducerMap<{ readonly count: number; }, Action> | InjectionToken<ActionReducerMap<{ readonl...'.
Type '(state: Test, action: TestAction) => Test' is not assignable to type 'InjectionToken<ActionReducerMap<{ readonly count: number; }, Action>>'.
Property '_differentiate_from_OpaqueToken_structurally' is missing in type '(state: Test, action: TestAction) => Test'.
I only updated the interfaces and init files:
export interface Test {
// define state here
readonly count: number;
}
export interface TestState { readonly test: Test; }
import {Test} from './test.interfaces';
export const testInitialState: Test = {
// fill it initial state here
count: 4
};
Hi all,
Great initiative and I am sure it will be a huge timesaver for our project.
However, installing it does not come easy on windows :)
The setup:
Note: We are trying to use default npm instead of yarn
Steps to reproduce:
npm i -g @angular/[email protected]
npm i -g @nrwl/schematics
ng new sometestproject --collection=@nrwl/schematics
2 peer dependencies not met (@schematics/angular
and @angular-devkit/schematics
)
npm i -g @schematics/angular
npm i -g @angular-devkit/schematics
ng new sometestproject --collection=@nrwl/schematics
Error: tree.branch is not a function tree.branch is not a function
My suspicion is that not using yarn might be the culprit, but then my question is: should it not just work out of the box with "vanilla" npm?
I have tried downgrading @angular/cli
and @nrwl/schematics
to earlier versions, that also did not do the trick.
Just putting this here for other people that might also experience the same issue. Would also be nice if we can solve it (willing to contribute).
Update:
@see angular/angular-cli#8053
Seems to be related to a bug in @angular/cli
I don't have this issue: #68
Even though my output is as expected, when I then do as it says in the video:
ng g component myComponent -a=myLib --export
I receive the errors:
Error: Cannot read property 'length' of null Cannot read property 'length' of null
$ ng g ngrx
Cannot read property 'split' of undefined
TypeError: Cannot read property 'split' of undefined
at Class.run (~\node_modules\@angular\cli\commands\generate.js:112:63)
at resolve (~\node_modules\@angular\cli\ember-cli\lib\models\command.js:261:20)
at Promise (<anonymous>)
at Class.validateAndRun (~\node_modules\@angular\cli\ember-cli\lib\models\command.js:2
40:12)
at Promise.resolve.then.then (~\node_modules\@angular\cli\ember-cli\lib\cli\cli.js:140
:24)
at <anonymous>
Expected better error message / help.
Just looking at the screencast and the docs doesn't help to understand how the various parts should work together. Should I have one app and the remaining parts in lib ? Probably not. But why then does ng serve
only serve the first app created ? I would have expected that every app automatically has it's own URL, like localhost:4200/firstapp or localhost:4200/secondapp. Or is that outside the scope of this project ?
Config specs and project url needs to be updated.
I created a library called client
using the following command ng generate lib client
I was assuming from the documentation that it would create the library in the following path:
libs/client/src/client.ts
Instead it created it like the following:
libs/client/apps/<name of an app I made previously>/src/client.ts
I could try to make a PR on this if you could point me in the right direction of where to go to fix it.
Say we have app.module.ts
look something like this:
import {NgModule} from '@angular/core';
@NgModule({})
export class AppModule {}
Run something like this:
schematics @nrwl/schematics:ngrx --module=apps/client/src/app/app.module.ts
And invalid code will be generated.
Change the module to look like and rerun the same schematic:
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
@NgModule({
imports: [
CommonModule
]
})
export class AppModule {}
And it will work
I am trying to install the @nrwl/
Code used below to install:
yarn global add @nrwl/schematics
Below is log:
yarn global v1.2.1
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "[email protected]" has unmet peer dependency "webpack-sources@>=1.0.0".
warning "@nrwl/[email protected]" has unmet peer dependency "rxjs@>5.4.2".
warning "@nrwl/[email protected]" has unmet peer dependency "rxjs@>5.4.2".
warning "@nrwl/[email protected]" has unmet peer dependency "@angular/core@>4.0.0".
warning "@nrwl/[email protected]" has unmet peer dependency "@angular/common@>4.0.0".
warning "@nrwl/[email protected]" has unmet peer dependency "@angular/router@>4.0.0".
warning "@nrwl/[email protected]" has unmet peer dependency "@angular/platform-browser@>4.0.0".
warning "@nrwl/[email protected]" has unmet peer dependency "@ngrx/store@>4.0.0".
warning "@nrwl/[email protected]" has unmet peer dependency "@ngrx/router-store@>4.0.0".
warning "@nrwl/[email protected]" has unmet peer dependency "@ngrx/effects@>4.0.0".
[4/4] Building fresh packages...
warning "@nrwl/[email protected]" has no binaries
Done in 17.86s.
Please help me in resolving it.
Proj name should always be set to proj.
Thanks for a great initiative, I can't wait to use it on my project!
Everything is working so far, including AOT compilation and tests, except for an annoying issue in Code editor where all my template are reporting errors because some components cannot be looked up. To be exact, all the components that are imported using one of the rules defined in tsconfig paths
attribute.
I think this issue is reported since a long time: angular/angular#16382
I can confirm that the compilation and the test successfully run but all my templates and Component are red in MS Code editor.
Is this is a known issue that I should either wait for a fix or fix it myself?
But maybe it is just my configuration that is messed up? Do you know of any workaround to have it working?
Also, I can also reproduce it with a simpler project, just relying on paths
in tsconfig seems to break angular language service.
I'd set up a fresh workspace, created an application, and then added NgRx to a module:
ng generate ngrx app --module=apps/my-app/src/app/app.module.ts --onlyEmptyRoot
When I ng served it, I got an error because @ngrx/store-devtools
had been added to my package.json, but not installed. I'd expect it to be installed automatically.
This requires two things:
First, we need to checks that apps and libs can only import each other using absolute paths. So you can only use relative imports within a lib and an app. This should apply to all apps and libs.
Second, the developer should be able to provision the list of libs that should be lazy loaded. Those libs should only be imported using relative paths. Considering Point 1, other apps and libs won't be able to import these libs. This configuration can be specified in .angular.cli.jsonor
tslint.json`. Whatever is easier.
ng generate lib mymodule --ngmodule
generates:
libs/mymodule/apps/<apps[0]>src/mymodule.module.spec.ts
libs/mymodule/apps/<apps[0]>src/mymodule.module.ts
libs/mymodule/apps/<apps[0]>index.ts
instead of expected:
libs/mymodule/src/mymodule.module.spec.ts
libs/mymodule/src/mymodule.module.ts
libs/mymodule/index.ts
"@angular/cli": "github:nrwl/fix-cli-build",
"@nrwl/nx": "nrwl/nx-build"
Creating a new project: ng new proj --collection=@nrwl/schematics
Does not add @ngrx/effects, @ngrx/store to package.json
ng serve errors: /Users/Yonet/proj/node_modules/@nrwl/nx/src/data-persistence.d.ts (3,25): Cannot find module '@ngrx/effects'.
ERROR in /Users/Yonet/proj/node_modules/@nrwl/nx/src/data-persistence.d.ts (4,31): Cannot find module '@ngrx/store’.
Nx IS AWESOME! I love it soo much. I have just a couple feature requests:
Otherwise, keep rocking!
schematics @nrwl/schematics:app --name=camelCase
Creates camel-case folder which has src/app/app.module
Also creates camelCase folder with e2e/, src/assets, src/environments
I have styles and scss variables I want to share across all my applications. I made a styles library and would like to reference it with import "@myprojectname/mystylelib/styles"
in all applications and other libraries.
Similar to how Typescript is setup to resolve imports like @myprojectname/mylib
, it would be nice to include:
"stylePreprocessorOptions": {
"includePaths": [
"../../../libs"
]
},
when creating apps and libs in .angular-cli.json
. Unfortunately, these won't be namespaced with @myprojectname/...
with the current directory setup provided by Nx.
A potential solution would be to change the directory structure of libs to be libs/@myprojectname/{libraries go here}
. It would make the imports make more sense to the users and allow style focused libraries to be imported in the same manner within css, scss, and less files.
If this looks good, I would gladly like to help with the implementation.
Thanks again for all your hard work, Nx is awesome!
Right ever time that runs ng build
also runs npm install
, which is very slow.
We can speed it up by running npm install
ones and then copying over or linking the directory.
Steps to reproduce:
ng g lib mylib --ngmodule
ng g c mycomp -a=mylib
Making sure the MylibModule
has the following in its metadata properties will get the schematics to work:
@NgModule({
. . .
declarations: [],
providers: [],
exports: []
. . .
})
Looks like the AngularCLI schematics are failing if the NgModule
does not have declarations
or providers
or exports
metadata properties. While this is probably something that should be fixed in AngularCLI schematics, we can update our lib schematic to create an NgModule
with these metadata properties set to empty arrays and that should make things work for now.
Steps:
Result:
Creates lib at libs/foo/apps/my-app/src
(also creates entry for that path in angular-cli.json).
When I generated new components in my Angular CLI app, it would import them as follows in app.module:
import { MyComponent } from 'app/my/my.component';
AFAIK, the app/
import works because the baseUrl
in <root>/tsconfig.json
is set to "src".
This doesn't work after upgrading to Nx workspace since the directory layout changes, and baseUrl
changes from src
to .
.
It would be nice to fix this automatically. Simplest fix would be to add an app
entry to paths in the root tsconfig.json, which can point to apps/original-app
. But this would encourage other libs and apps to import from app
, which is not recommended. The better solution would be to rewrite all app/
imports to be relative.
I followed https://github.com/nrwl/nx/tree/master/packages/schematics#global-install and it's throwing the error in the title after trying ng new foo --collection=@nrwl/schematics
, it might be something with my env, since I'm having problems with a clone of the default angular schematics as well (angular/angular-cli#7744)
@angular/cli: 1.4.2
node: 8.1.4
os: darwin x64
➜ ng new foo --collection=@nrwl/schematics
Schematic "application" not found in collection "@nrwl/schematics".
Error: Schematic "application" not found in collection "@nrwl/schematics".
at SchematicEngine.createSchematic (/Users/fxck/.yarn-config/global/node_modules/@angular-devkit/schematics/src/engine/engine.js:65:19)
at CollectionImpl.createSchematic (/Users/fxck/.yarn-config/global/node_modules/@angular-devkit/schematics/src/engine/collection.js:11:29)
at Object.getSchematic (/Users/fxck/.yarn-config/global/node_modules/@angular/cli/utilities/schematics.js:40:23)
at Class.run (/Users/fxck/.yarn-config/global/node_modules/@angular/cli/tasks/schematic-get-options.js:12:40)
at Class.beforeRun (/Users/fxck/.yarn-config/global/node_modules/@angular/cli/commands/new.js:99:31)
at Promise.resolve.then (/Users/fxck/.yarn-config/global/node_modules/@angular/cli/ember-cli/lib/cli/cli.js:150:24)
at <anonymous>
I have create my Nx Workspace with an app and a lib. I have added a simple component to the lib and added it to app component template.
No problem when I serve the app, but when I run the tests, this error is thrown in app.component.spec.ts:
Failed: Template parse errors:
'app-my-button' is not a known element:
1. If 'app-my-button' is an Angular component, then verify that it is part of this module.
2. If 'app-my-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<app-my-button></app-my-button>
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.