ngneat / aim

Angular Inline Module Schematics

Angular Inline Module Schematics

Installation

npm i @ngneat/aim --save-dev

Usage

Component

ng g @ngneat/aim:component name

Directive

ng g @ngneat/aim:directive name

Pipe

ng g @ngneat/aim:pipe name

Notes

• You can use every option from the default Angular schematics. For example:

ng g @ngneat/aim:component --name=bar --inlineStyle --inlineTemplate

• You can define default values for the schematics in your angular.json file:

"schematics": {
   "@ngneat/aim:component": {
     "changeDetection": "OnPush"
   }
}

aim's Issues

Pipe can't be created

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

`Path ... does not exist` error on Windows

When I run this command
npx ng g @ngneat/scam:component new-password , I get the following error.
Path "/C:/src/app/new-password/new-password.component.ts" does not exist.

I am using PowerShell 7.1.3

Package versions

@ngneat/scam: 2.0.1
@angular/core: 12.0.2
@angular/cli: 12.0.2

How to generate component in current directory and ignore an existing directory with the same component name under src/app

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.

ngModule naming convention

@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 {} // <-------

NgModule import line is incorrect

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

Add support for "common" NX workspace

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.

Module naming

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 nrwl secondary endpoint?

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

[AIM to Standalone] Cannot read property 'getDecorators' of undefined

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 🙏

Is this a scam?

It sounds too good to be true...

An unhandled exception occurred: NOT SUPPORTED: keyword "id", use "$id" for schema ID

When trying to generate a component, it gives :
An unhandled exception occurred: NOT SUPPORTED: keyword "id", use "$id" for schema ID

Suggestions about component options

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.

• The ability to inline template and style in the component (because I'm also convinced by the single file Angular component),
• the ability to set the changeDetection to OnPush, on my side it's by default.

Path "" does not exist error when trying to use schematic

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.

Cli rename

ng g @ngneat/scam:component --name=navbar --inline-style --inline-template

Discussion: Do you use this pattern only in libraries?

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