Angular-cli: Getting "Cannot find module" when trying to use custom schematics with `new` command

[fxck]

There's little to no info about how to actually use schematics, so I tried forking @schematics/angular, changed couple things, published on npm (https://www.npmjs.com/package/@thescrollbar/schematics / https://github.com/thescrollbar/schematics), did following https://github.com/nrwl/nx/tree/master/packages/schematics#installing-nrwlschematics and tried

ng new impr --collection=@thescrollbar/schematics, which throws error listed below.. in case you are wondering, that path does exist on my filesystem and does link to this https://github.com/thescrollbar/schematics/tree/master/application

I also tried publishing contents of https://github.com/angular/devkit/tree/master/packages/schematics/angular to npm without changing anything and use it as schematics, didn't work either

Bug Report or Feature Request (mark with an x)

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

Versions.

@angular/cli: 1.4.2
node: 8.1.4
os: darwin x64

The log given by the failure.

Error: Cannot find module '/Users/fxck/.yarn-config/global/node_modules/@thescrollbar/schematics/application'
    at Function.Module._resolveFilename (module.js:485:15)
    at Function.resolve (internal/module.js:18:19)
    at new ExportStringRef (/Users/fxck/.yarn-config/global/node_modules/@angular-devkit/schematics/tools/export-ref.js:15:32)
    at NodeModulesEngineHost._resolveReferenceString (/Users/fxck/.yarn-config/global/node_modules/@angular-devkit/schematics/tools/node-module-engine-host.js:18:21)
    at NodeModulesEngineHost.createSchematicDescription (/Users/fxck/.yarn-config/global/node_modules/@angular-devkit/schematics/tools/file-system-engine-host-base.js:92:34)
    at SchematicEngine.createSchematic (/Users/fxck/.yarn-config/global/node_modules/@angular-devkit/schematics/src/engine/engine.js:63:40)
    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)

[bmayen]

Barring documentation, it would be great if we could get some official feedback on whether or not we're even intended to be using this stuff yet. I get the sense that it's not production-ready for anything outside of the internal usage of it. But since there's no official word on this one way or another, a lot of us are very confused.

[fxck]

@hansl @Brocco maybe?

[fxck]

So after updating to 1.4.3 the error is gone!

..and is replaced by a different one Cannot find module '@thescrollbar/schematics/package.json'

[feloy]

I can make it work this way:
https://medium.com/@c1265a527848/95e22319cc24

[bmayen]

@feloy, thanks for putting this together! Looking forward to reading through this later tonight.

[bmayen]

@feloy, in the article you mention:

It is definitely not a perfect solution to place ourselves files in this node_modules directory, because files in the directory are generally handled by npm or yarn commands.

For users not able to publish their custom schematics and install via npm/yarn that way, npm link would be a better approach vs manually copying files into node_modules.

[fxck]

I just can't figure out how to make it as globally installable package, I can get it to work inside cli's node_modules, but as soon as I move it to global deps, it starts throwing tree.branch is not a function

[fxck]

I think I figured out at least one part. I thought that cli would be able to work with typescript schematics, but it actually has to be compiled first. So instead of just cloning https://github.com/angular/devkit/tree/master/packages/schematics/angular you actually need to clone and work with its npm run build command, you can then start changing packages/schematics/angular, I suppose there's a way to add your own schematics along it, but who knows on what places you need to chance stuff, so it's safer to just change the angular one... then you publish the dist folder to npm and THEN you can use it as a collection.. I have yet to try if I'll encounter the tree.branch problem.

[fxck]

Yep. Still getting tree.branch is not a function, works if I install my package globally with npm i -g @thescrollbar/schematics and then manually move it from /usr/local/bin/node_modules/ to /usr/local/bin/node_modules/@angular/cli/node_modules

[bmayen]

I'm also following this issue which is somewhat related. Would provide the ability to selectively extend the default collections.
https://github.com/angular/devkit/issues/34

[fxck]

I hope there's going to be a way to set your collection as the default one so you don't have to use --collection=whatever anytime you try to generate something.

[fxck]

So when I try to do

ng g component --collection=@thescrollbar/schematics logo

it generates it using @angular/schematics instead, despite the fact that when I on purpose do

ng g shit --collection=@thescrollbar/schematics logo

it says

Schematic "shit" not found in collection "@thescrollbar/schematics".

which I think clearly indicates that it indeed is using my collection.. words can't even describe how frustrated I am

[fxck]

Closing this. All of my problems are actual known bugs.

Read more at https://stackoverflow.com/a/46431467/301596 (good piece of information about the state of schematics)

[Splaktar]

I ran into some of these issues last night as well.

You do need to compile and include both the .d.ts and .js files in your new repo. I just copied over the build step from the original project:

  "scripts": {
    "build-tsc": "tsc -p tsconfig.json"
  },

[fxck]

Good to know that simple tsc is enough. I thought I needed the whole angular-devkit.

[Splaktar]

Nope, I just have the things under schematics/, application, class, etc, along with utility.

Here's the tsconfig.json that I'm using (some changes were needed):

{
  "compilerOptions": {
    "declaration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "noEmitOnError": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": false,
    "noImplicitThis": true,
    "noUnusedParameters": true,
    "noUnusedLocals": true,
    "outDir": "./",
    "rootDir": ".",
    "skipDefaultLibCheck": true,
    "skipLibCheck": true,
    "inlineSourceMap": true,
    "sourceRoot": ".",
    // Inline sources are necessary for our tests to show the proper sources, since we are using
    // Istanbul (not Constantinople) as well, and applying both source maps to get the original
    // source in devtools.
    "inlineSources": true,
    "strictNullChecks": false,
    "target": "es6",
    "lib": [
      "es2017"
    ],
    "baseUrl": "",
    "typeRoots": [
      "./node_modules/@types"
    ],
    "types": [
      "jasmine",
      "node"
    ]
  },
  "exclude": [
    "node_modules/**/*",
    "*/files/**/*",
    "*/other-files/**/*"
  ]
}

[Splaktar]

And here's the package.json that I used. I don't think that all of the devDependencies are required, but they make my IDE a bit happier.

{
  "name": "my-schematics",
  "version": "0.1.4",
  "private": true,
  "description": "Schematic plugins to Angular CLI",
  "engines": {
    "node": ">= 6.11.0",
    "npm": ">= 3.0.0"
  },
  "keywords": [
    "angular-cli"
  ],
  "dependencies": {},
  "devDependencies": {
    "@angular/common": "4.4.3",
    "@angular/compiler": "4.4.3",
    "@angular/core": "4.4.3",
    "@angular/platform-browser": "4.4.3",
    "@angular/platform-browser-dynamic": "4.4.3",
    "@angular/router": "4.4.3",
    "@types/jasmine": "2.5.53",
    "@types/jasminewd2": "2.0.2",
    "@types/node": "6.0.60",
    "@angular-devkit/schematics": "0.0.24",
    "common-tags": "1.4.0",
    "jasmine-core": "2.7.0",
    "protractor": "5.1.2",
    "ts-node": "3.3.0",
    "tslint": "5.5.0",
    "typescript": "2.3.4",
    "zone.js": "0.8.17"
  },
  "optionalDependencies": {},
  "peerDependencies": {
    "@angular-devkit/schematics": "0.0.24"
  },
  "scripts": {
    "build-tsc": "tsc -p tsconfig.json"
  },
  "schematics": "./collection.json"
}

[angular-automatic-lock-bot[bot]]

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._}