ngneat / aim Goto Github PK
View Code? Open in Web Editor NEWAngular Inline Module Schematics
Home Page: https://netbasal.com
Angular Inline Module Schematics
Home Page: https://netbasal.com
ng g @ngneat/scam:component --name=navbar --inline-style --inline-template
v3.0.2 on ng g c test
generates:
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { NgModule } from '@angular/common';
@Component({
selector: 'cw-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TestComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
@NgModule({
imports: [],
declarations: [TestComponent],
exports: [TestComponent]
})
export class TestComponentModule {
}
This line is incorrect:
import { NgModule } from '@angular/common';
NgModule should be imported from @angular/core
.
Angular CLI: 12.2.7
If you generate NX workspace without libs (empty) it uses Workspace.json and not Angular.json so you will end with:
The generate command requires to be run in an Angular project, but a project definition could not be found.
"nx g @ngneat/scam:component name"
ends with:
FileDoesNotExistException [Error]: Path "/D:/apps/assist-mobile/src/app/name/name.component.ts" does not exist.
at HostTree.overwrite (D:\GIT\Cue\frontends\node_modules\@angular-devkit\schematics\src\tree\host-tree.js:250:19)
at D:\GIT\Cue\frontends\node_modules\@ngneat\scam\src\utils.js:57:14
at MergeMapSubscriber.project (D:\GIT\Cue\frontends\node_modules\@ngneat\scam\node_modules\@angular-devkit\schematics\src\rules\call.js:75:24)
at MergeMapSubscriber._tryNext (D:\GIT\Cue\frontends\node_modules\@ngneat\scam\node_modules\rxjs\internal\operators\mergeMap.js:67:27)
at MergeMapSubscriber._next (D:\GIT\Cue\frontends\node_modules\@ngneat\scam\node_modules\rxjs\internal\operators\mergeMap.js:57:18)
at MergeMapSubscriber.Subscriber.next (D:\GIT\Cue\frontends\node_modules\@ngneat\scam\node_modules\rxjs\internal\Subscriber.js:66:18)
at MergeMapSubscriber.notifyNext (D:\GIT\Cue\frontends\node_modules\@ngneat\scam\node_modules\rxjs\internal\operators\mergeMap.js:93:26)
at SimpleInnerSubscriber._next (D:\GIT\Cue\frontends\node_modules\@ngneat\scam\node_modules\rxjs\internal\innerSubscribe.js:27:21)
at SimpleInnerSubscriber.Subscriber.next (D:\GIT\Cue\frontends\node_modules\@ngneat\scam\node_modules\rxjs\internal\Subscriber.js:66:18)
at TapSubscriber._next (D:\GIT\Cue\frontends\node_modules\@ngneat\scam\node_modules\rxjs\internal\operators\tap.js:65:26)
Path "/D:/apps/assist-mobile/src/app/name/name.component.ts" does not exist.
Hi together,
I'm a fan of this pattern (Single Component Angular Module) and use it mainly in applications. Like describes here: https://medium.com/marmicode/your-angular-module-is-a-scam-b4136ca3917b
What do you think? Do you use it only in libraries (where it is applied nearly everywhere) or also in applications?
Best regards,
Kersten
Hello,
I have an angular 11 app and I am trying to use the SCAM schematic to generate a component but I am getting a
Path "" does not exist error.
Details below
> Executing task: ng generate @ngneat/scam:component --name=discover-pools --project=myapp--module=pools --style=scss --changeDetection=OnPush --export --path=src/app/features/pools --viewEncapsulation=None --no-interactive <
Option "entryComponent" is deprecated: Since version 9.0.0 with Ivy, entryComponents is no longer necessary.
Path "/.../src/app/features/pools/discover-pools/discover-pools.component.ts" does not exist.
the first part of the path does exist: /.../src/app/features/pools/
however the discover-pools/discover-pools.component.ts is the file to be created by the schematic, so of course it does not exist.
Am I missing something here? Can someone help me figure out if I have the cli command wrong or if there is an issue with the schematic.
Awesome schematics library.
Quick question, is there an option or way I can generate the component where the schematics is called from?, and ignore if there is an existing directory with the same name under src/app ?
For instance, If I run ng g @ngneat/aim:component test within src/app/example and there is a /test directory under /app then the component gets created within src/app/test and not within src/app/example.
Best regards.
@NetanelBasal, This is great tooling. Thank you for creating this.
Can you please generate the ngModule name without "component" keyword?
From:
export class AppShellComponent implements OnInit { ... }
export class AppShellComponentModule {}
To:
export class AppShellComponent implements OnInit { ... }
export class AppShellModule {} // <-------
Hi โ thanks for this neat (๐ ) tool.
I notice the naming of the module doesn't include the word Component
when generating a single component. Is this intentional? If so, could it be made configurable?
As an example:
Generating a singe component file for profile
will currently give:
ProfileComponent
ProfileModule
I (personally) would prefer it generate:
ProfileComponent
ProfileComponentModule
Let me know your thoughts, and I can submit a PR for this.
aim-to-standalone
does not support converting aim components to standalone in nrwl secondary endpoint
https://github.com/wizardnet972/nx-standalone/blob/main/libs/ng-lib/baz/src/lib/foo/foo.component.ts
โ nx-standalone git:(main) โ npx @ngneat/aim-to-standalone start
? Path to tsconfig file tsconfig.base.json
โ Resolved dependencies and AIMs.
โ Refactored to AIM.
โ Saved.
Although there is a message that it succeeded, nothing has changed in this path: libs/ng-lib/baz/src/lib/foo/foo.component.ts
It sounds too good to be true...
Hi,
It's a good initiative, schematics for scams was really missing. I also use scams every day and I created my vscode snippets instead of schematics (quick win). In order to replace my snippets with these schematics, I have some suggestions that I would love to see implemented.
changeDetection
to OnPush
, on my side it's by default.v3.0.4:
> ng g p address
Unknown option: 'address'
> ng g pipe address
Unknown option: 'address'
> ng g p
Cannot read property 'match' of undefined
> ng generate pipe
Cannot read property 'match' of undefined
> ng g @ngneat/scam:p address
Unknown option: 'address'
> ng g @ngneat/scam:p
Cannot read property 'match' of undefined
Angular CLI: 12.2.7
Hi!
Just try migrate my project (upgraded v14) with command: npx @ngneat/aim-to-standalone start
? Path to tsconfig file tsconfig.json
โ Resolved dependencies and AIMs.
โ Refactoring to AIM...TypeError: Cannot read property 'getDecorators' of undefined
at refactorToAim (/Users/toilatung/.npm/_npx/43192a341c0c2c44/node_modules/@ngneat/aim-to-standalone/dist/to-standalone.js:83:17)
at Start.run (/Users/toilatung/.npm/_npx/43192a341c0c2c44/node_modules/@ngneat/aim-to-standalone/dist/commands/start/index.js:28:47)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async Start._run (/Users/toilatung/.npm/_npx/43192a341c0c2c44/node_modules/@oclif/core/lib/command.js:67:22)
at async Config.runCommand (/Users/toilatung/.npm/_npx/43192a341c0c2c44/node_modules/@oclif/core/lib/config/config.js:268:25)
at async Object.run (/Users/toilatung/.npm/_npx/43192a341c0c2c44/node_modules/@oclif/core/lib/main.js:73:5)
โ ผ Refactoring to AIM...
and it's still refactoring...
any ideas to make it work?
thank you ๐
When trying to generate a component, it gives :
An unhandled exception occurred: NOT SUPPORTED: keyword "id", use "$id" for schema ID
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.