Schematics documentation #7627

bmayen · 2017-09-08T01:29:23Z

Bug Report or Feature Request (mark with an `x`)

- [ ] bug report -> please search issues before submitting
- [x] feature request

Versions.

Latest

Desired functionality.

Very excited to see Schematics support has landed! Will usage be documented here or is this something we should look for over at angular/devkit repo?

One thing we would love to be able to do is create our own application structure. Also, additional generators for things like lazy-loaded-feature which contain ngModule, component ts, html, scss, etc. Are these supported use-cases?

The text was updated successfully, but these errors were encountered:

ghost · 2017-09-16T09:16:28Z

I have no idea about what is chematics, but as it is now a way to generate app, I'd really like to see full docs. I wonder how you guys found possible to release it without any docs. VERY frustrating.

bmayen · 2017-09-17T12:44:00Z

@AloeDream, this issue is trying to clarify, first and foremost, whether this repo is even the right place for this documentation. Technically, the functionality is provided via https://github.com/angular/devkit. Ideally, documentation is also provided from that repo and maybe we get some recipes here https://github.com/angular/angular-cli/wiki/stories.

But, yes, would be great to get some feedback from the team with a rough estimate on when we might expect that. My guess is that this functionality was added primarily for internal purposes and the fact that it enables users to customize is icing on the cake. In which case, documentation probably isn't the highest priority at the moment.

In the meantime, you might want to consider opening a similar issue over at angular/devkit repo.

ghost · 2017-09-18T09:07:17Z

@bmayen this feature is critical for CLI, as I go type ng help to review ng new command parameters and see that many of them disappeared and one new appeared without any explanation how to use it. So yes, I think this is the right place to at least mention where to find its docs and how it's not the highest priority, as I can't create new or update existing project without those docs?

Splaktar · 2017-09-26T06:42:25Z

There should be some slides and talks coming out of AngularMix in a couple weeks which provide considerable information about Schematics. I'm unsure if there are plans to provide significant documentation on the feature before then, but hopefully soon :)

Some details can be found in this blog post.

tomwanzek · 2017-10-20T22:08:10Z

@Brocco First of all, thanks for all the hard work on the CLI 🥇Love it.

I have one quick question related to @Splaktar 's above comment. AFAIK you presented at AngularMix on the CLI/schematics, but the session was not recorded/published on the youtube channel. Is there any material (slides etc) you could make available? Thanks in advance.

Splaktar · 2017-10-27T18:44:36Z

I don't believe that there were many slides in that talk. Most of it was a demo of how the schematics work. It's very unfortunate that it wasn't recorded :(

I know that there is work happening to document the schematics feature. However I have no idea what the ETA might be.

Splaktar · 2017-10-27T19:09:25Z

@tomwanzek schematics were on the latest Angular Air and they walk through the whole process. Thanks @Brocco! I was able to get everything working after watching the show.

tomwanzek · 2017-10-27T20:34:28Z

@Splaktar Thanks for the hint re ngAir...checking it out.

jimdubbs · 2017-10-28T18:19:54Z

@Splaktar were you able to test our your custom schematics? Following @Brocco 's instructions on the ngAir episode I ran the following commands:
npm i -g @angular-devkit/schematics
npm i @schematics.schematics -g
schematics @schematics/schematics:schematic --name schematics-test

i than installed/built schematics-test, and npm link'd it.
In an empty directory I attempt to run: schematics schematics-test:my-full-schematic --name test
and I get the error "tree.branch is not a function". I've spent a few hours trying to figure out what this could possibly be with no luck. Any insight?

Splaktar · 2017-10-28T19:13:52Z

@jimdubbs Yes, I got everything working.

I also ran into those tree.branch is not a function errors. I think that I hit them when trying to generate an application using my schematics with ng new. I've since switched to just using the schematics command directly and I haven't hit that issue since. It's most likely just a configuration issue.

Note that my solution combined the contents of @schematics/angular with the output of @schematics/schematics. I don't think that the output of @schematics/schematics is really ready for prime time yet, but it gave me enough to work with that I could wire everything up. Specifically, I have utility/ and strings.ts in my-schematics/src/.

I also had to add the following to the package.json generated by @schematics/schematics to get npm test to work:

  "devDependencies": {
    ...
    "common-tags": "1.4.0",
    "portfinder": "1.0.13",
    "selenium-mock": "0.1.5",
    ...
}

Here's my full package.json, not all of this is required (like angular here just helps my IDE)

{
  "name": "my-schematics",
  "version": "0.0.1",
  "private": true,
  "description": "Schematic plugins to Angular Devkit",
  "engines": {
    "node": ">= 6.11.0",
    "npm": ">= 3.10.0"
  },
  "keywords": [
    "schematics"
  ],
  "dependencies": {
    "@angular-devkit/core": "0.0.20",
    "@angular-devkit/schematics": "0.0.34",
    "@types/jasmine": "2.6.2",
    "@types/node": "8.0.47",
    "jasmine": "2.8.0",
    "typescript": "2.5.3"
  },
  "devDependencies": {
    "@angular/common": "4.4.6",
    "@angular/compiler": "4.4.6",
    "@angular/core": "4.4.6",
    "@angular/platform-browser": "4.4.6",
    "@angular/platform-browser-dynamic": "4.4.6",
    "@angular/router": "4.4.6",
    "@types/jasmine": "2.6.2",
    "@types/jasminewd2": "2.0.3",
    "@types/node": "6.0.60",
    "common-tags": "1.4.0",
    "portfinder": "1.0.13",
    "protractor": "5.2.0",
    "selenium-mock": "0.1.5",
    "ts-node": "3.3.0",
    "tslint": "5.8.0",
    "zone.js": "0.8.18"
  },
  "optionalDependencies": {},
  "peerDependencies": {},
  "scripts": {
    "build": "tsc -p tsconfig.json",
    "schematics": "schematics",
    "list": "npm run schematics -- my-schematics --list-schematics",
    "test": "npm run build && jasmine src/**/*_spec.js"
  },
  "schematics": "./src/collection.json"
}

Splaktar · 2017-10-28T20:13:00Z

@jimdubbs I actually just hit that error again while trying to run my schematics globally in a brand new Node environment.

I resolved it by moving "@angular-devkit/schematics": "0.0.34" from dependencies to devDependencies, and peerDependencies in my-schematics repo.

Then I ran into Cannot find module 'rxjs/add/operator/map'. This was fixed by adding "rxjs": "5.4.2", to the dependencies of my-schematics repo.

jimdubbs · 2017-10-29T03:00:24Z

@Splaktar Still running into the tree.branch is not a function issue. My package.json dependencies for my schematic project is
"dependencies": { "@angular-devkit/core": "0.0.20", "@types/jasmine": "2.6.2", "@types/node": "8.0.47", "jasmine": "2.8.0", "typescript": "2.5.3" }, "peerDependencies": { "@angular-devkit/schematics": "0.0.34" }, "devDependencies": { "@angular-devkit/schematics": "0.0.34", "@angular/common": "4.4.6", "@angular/compiler": "4.4.6", "@angular/core": "4.4.6", "@angular/platform-browser": "4.4.6", "@angular/platform-browser-dynamic": "4.4.6", "@angular/router": "4.4.6", "@types/jasmine": "2.6.2", "@types/jasminewd2": "2.0.3", "@types/node": "6.0.60", "common-tags": "1.4.0", "portfinder": "1.0.13", "protractor": "5.2.0", "selenium-mock": "0.1.5", "ts-node": "3.3.0", "tslint": "5.8.0", "zone.js": "0.8.18", "rxjs": "5.4.2" }

Globally I have the following installed:
angular-devkit/[email protected]
angular-devkit/[email protected]
angular/[email protected]
schematics/[email protected]

I've npm linked my schematics project so I should be able to access it globally.

from the command line I attempt to run "schematics schematics-test:my-full-schematic --name test" from an empty folder and I get the tree.branch error. Any insight as to what Im doing wrong?do I need to have something installed locally in the directory im trying to run the schematics command from?

Splaktar · 2017-10-29T03:14:33Z

Do I need to have something installed locally in the directory im trying to run the schematics command from?

Nope.

@jimdubbs tree.branch is defined in @angular-devkit/schematics. So your project is not picking that up for some reason.

If you are using it via npm link, make sure to run npm run build in your schematics-test project before trying to run the command.

You shouldn't need angular-devkit/[email protected] installed globally. Here's what I have:

npm list -g --depth=1
/Users/splaktar/.nvm/versions/node/v8.6.0/lib
├── @angular-devkit/[email protected]
│ ├── @angular-devkit/[email protected]
│ ├── @ngtools/[email protected]
│ ├── [email protected]
│ └── [email protected]
├── [email protected] (git+ssh://[email protected]/...)
│ ├── @angular-devkit/[email protected]
│ ├── @types/[email protected]
│ ├── @types/[email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected]
└── [email protected]
  ...

jimdubbs · 2017-10-29T03:20:51Z

Can confirm I've ran npm run build in my schematics project.
Tried installing angular-devkit/[email protected] in local project that Im trying to run schematics schematics-test:my-full-schematic --name test from and still no dice :(

I've cleaned up my global installs to match yours, tried recreating a schematics project from schematics/schematics:schematic and modified package.json to match yours posted. Still getting tree.branch error from an empty node project. Tried installing angular-devkit/schematics and linking my schematic project to the empty node project and still getting tree.branch is not a function.
My global installs:

+-- @angular-devkit/[email protected]
| +-- @angular-devkit/[email protected]
| +-- @ngtools/[email protected]
| +-- [email protected]
| `-- [email protected]
+-- @schematics/[email protected]
| `-- @angular-devkit/[email protected]
+-- @schematics/[email protected]
+-- [email protected] -> D:\github\jimmys-schematic
| +-- @angular-devkit/[email protected]
| +-- @angular-devkit/[email protected]
| +-- @types/[email protected]
| +-- @types/[email protected]
| +-- @types/[email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| `-- [email protected]

@Splaktar What kind of environment/project are you trying to run the schematics command from globally to use your created schematics?

Splaktar · 2017-10-29T04:30:58Z

@jimdubbs The environment that I'm using to run schematics my-schematics:application --name tmp --directory tmp is NodeJS 8.6.0 w/ nothing in it but those global dependencies above. I'm in a directory that does not have any project (package.json) in it. This is generating a new app, not generating something in an existing app.

If you are trying to use your schematics in an existing project to generate services/components, etc. then in that project's package.json, you'll want

devDependencies: {
    ...
    "@angular-devkit/schematics": "0.0.34",`
    "my-schematics": "git+ssh://[email protected]:myname/my-schematics.git",
    ...
},

Adding the following to that project's .angular-cli.json will allow you to skip defining the collection every time when using ng g:

  "defaults": {
    "schematics": {
      "collection": "my-schematics"
    },
    ...
  }

You may also want to add this to your scripts in package.json:

    "schematics": "schematics",

This way you can do something like npm run -- schematics my-schematics:my-test-schematic --name foo. This allows you to run the schematics command in your local project (rather than use the global package) and may help you avoid the failure to lookup @angular-devkit/schematics that you are hitting.

jimdubbs · 2017-10-29T14:12:31Z

@Splaktar Not trying to run from an existing project, completely empty like you. Quite a frustrating error, and it seems I have an Identical setup as you.

update: decided to completely remove everything and try starting from scratch.
installed angular-devkit/schematics and schematics/schematics globally.

running schematics @schematics/schematics:schematic --name my-schematic to generate a schematic project fails with Error: Cannot find module '@angular-devkit/core

heres my global installs:

├─┬ @angular-devkit/[email protected]
│ ├── @angular-devkit/[email protected]
│ ├── @ngtools/[email protected]
│ ├── [email protected]
│ └── [email protected]
├── @schematics/[email protected]

clearly shows angular-devkit/core is an installed dependency of schematics. I believe the first time I tried setting this up I got the same thing and thats why I had installed angular-devkit/core globally.

Vaelor · 2017-11-01T10:40:58Z

I am getting these errors too.
Running this with an Ubuntu, it never picks up @angular-devkit/core. Installing it globally is the only way this works, and also rxjs needs to be installed globally.

testproject $ node --version
v8.5.0
testproject $ npm --version
5.3.0

Using all the workarounds, I then get the error
Cannot read property 'entries' of undefined
when running
npm run schematics -- --debug my-schematics/schematics:component --name customTestComponent
Nothing useful as far as error logs go, the debug option doesn't really help.

13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/lib/node_modules/npm/lib/utils/lifecycle.js:289:16)
13 verbose stack     at emitTwo (events.js:125:13)
13 verbose stack     at EventEmitter.emit (events.js:213:7)
13 verbose stack     at ChildProcess.<anonymous> (/usr/lib/node_modules/npm/lib/utils/spawn.js:40:14)
13 verbose stack     at emitTwo (events.js:125:13)
13 verbose stack     at ChildProcess.emit (events.js:213:7)
13 verbose stack     at maybeClose (internal/child_process.js:927:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)

The video is okay, but still doesn't seem to be enough to properly set this up.

Splaktar · 2017-11-01T15:34:16Z

I've found that --debug and --verbose don't seem to output anything different when I run into issues :(

@Vaelor wouldn't it be npm run schematics -- --debug my-schematics:component --name customTestComponent?

Splaktar · 2017-11-01T15:46:55Z

@jimdubbs error seems to be a common issue atm (multiple issues open against angular/cli): #8167

jimdubbs · 2017-11-02T18:36:25Z

@Splaktar Indeed, I've found a workaround for now - instead of testing my schematics with the Schematics binary im just using the CLI and it seems to be fine.

Splaktar · 2017-11-08T06:04:21Z

There is also a video from the June MTV Angular Meetup that was just posted in October that has Hans covering Schematic concepts and demoing a number of features.

Splaktar · 2018-09-10T01:04:32Z

There is also a newer schematics documentation issue here: #12149

no-more · 2018-12-08T05:45:02Z

Hello,

I couldn't find docs about "defaults" configuration, thanks to an example I know it's possible to configure a default value with argv, but that's all. I don't know if it's possible, for example, to define a default value based on another parameter.
There should be a section about defaults in the documentation please.

Thanks.

Splaktar · 2018-12-13T11:00:36Z

@no-more good suggestion. I've added it to an outline that is currently being worked on as part of the official schematic docs.

mgechev · 2018-12-14T00:02:42Z

Closing this issue so we can use #12149 instead.

angular-automatic-lock-bot · 2019-09-09T00:41:46Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

bmayen mentioned this issue Sep 17, 2017

[Feature] Custom project boilerplates #7717

Closed

Brocco assigned hansl Sep 22, 2017

Brocco added the area: docs Related to the documentation label Sep 22, 2017

Robinyo mentioned this issue Jan 3, 2018

Add a configuration flag to 'ng-cli' to set the default collection #9084

Closed

hansl removed their assignment Feb 6, 2018

devoto13 mentioned this issue Feb 16, 2018

rename feature-routing.module.ts to feature.routing.ts #8116

Closed

Splaktar mentioned this issue Sep 10, 2018

(schematics documentation) Add more sources #12149

Closed

mgechev closed this as completed Dec 14, 2018

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Schematics documentation #7627

Schematics documentation #7627

bmayen commented Sep 8, 2017

ghost commented Sep 16, 2017 •

edited by ghost

Loading

bmayen commented Sep 17, 2017

ghost commented Sep 18, 2017

Splaktar commented Sep 26, 2017

tomwanzek commented Oct 20, 2017

Splaktar commented Oct 27, 2017

Splaktar commented Oct 27, 2017 •

edited

Loading

tomwanzek commented Oct 27, 2017

jimdubbs commented Oct 28, 2017

Splaktar commented Oct 28, 2017

Splaktar commented Oct 28, 2017

jimdubbs commented Oct 29, 2017 •

edited

Loading

Splaktar commented Oct 29, 2017 •

edited

Loading

jimdubbs commented Oct 29, 2017 •

edited

Loading

Splaktar commented Oct 29, 2017 •

edited

Loading

jimdubbs commented Oct 29, 2017 •

edited

Loading

Vaelor commented Nov 1, 2017 •

edited

Loading

Splaktar commented Nov 1, 2017

Splaktar commented Nov 1, 2017 •

edited

Loading

jimdubbs commented Nov 2, 2017

Splaktar commented Nov 8, 2017

Splaktar commented Sep 10, 2018

no-more commented Dec 8, 2018

Splaktar commented Dec 13, 2018

mgechev commented Dec 14, 2018

angular-automatic-lock-bot bot commented Sep 9, 2019

Schematics documentation #7627

Schematics documentation #7627

Comments

bmayen commented Sep 8, 2017

Bug Report or Feature Request (mark with an x)

Versions.

Desired functionality.

ghost commented Sep 16, 2017 • edited by ghost Loading

bmayen commented Sep 17, 2017

ghost commented Sep 18, 2017

Splaktar commented Sep 26, 2017

tomwanzek commented Oct 20, 2017

Splaktar commented Oct 27, 2017

Splaktar commented Oct 27, 2017 • edited Loading

tomwanzek commented Oct 27, 2017

jimdubbs commented Oct 28, 2017

Splaktar commented Oct 28, 2017

Splaktar commented Oct 28, 2017

jimdubbs commented Oct 29, 2017 • edited Loading

Splaktar commented Oct 29, 2017 • edited Loading

jimdubbs commented Oct 29, 2017 • edited Loading

Splaktar commented Oct 29, 2017 • edited Loading

jimdubbs commented Oct 29, 2017 • edited Loading

Vaelor commented Nov 1, 2017 • edited Loading

Splaktar commented Nov 1, 2017

Splaktar commented Nov 1, 2017 • edited Loading

jimdubbs commented Nov 2, 2017

Splaktar commented Nov 8, 2017

Splaktar commented Sep 10, 2018

no-more commented Dec 8, 2018

Splaktar commented Dec 13, 2018

mgechev commented Dec 14, 2018

angular-automatic-lock-bot bot commented Sep 9, 2019

Bug Report or Feature Request (mark with an `x`)

ghost commented Sep 16, 2017 •

edited by ghost

Loading

Splaktar commented Oct 27, 2017 •

edited

Loading

jimdubbs commented Oct 29, 2017 •

edited

Loading

Splaktar commented Oct 29, 2017 •

edited

Loading

jimdubbs commented Oct 29, 2017 •

edited

Loading

Splaktar commented Oct 29, 2017 •

edited

Loading

jimdubbs commented Oct 29, 2017 •

edited

Loading

Vaelor commented Nov 1, 2017 •

edited

Loading

Splaktar commented Nov 1, 2017 •

edited

Loading