Create an addon for angular-cli

Question

I just started a new project with angular-cli and need to implement some addons for specific needs of this project.

I found the commend ng addon <addon-name>, which is based on ember-cli addon creation, but that really creates a ember-cli addon which looks completely alien to angular-cli.

So, I inspired myself on angular-cli firebase addon and created this file in <my-project>/addons/i18n-json/index.js.

'use strict';

var i18nJson = {
    name: 'i18n-json',
    description: 'Generate an i18n JSON file from a string properties file.',
    works: 'insideProject',

    availableOptions: [{
        name: 'input',
        type: String,
        default: 'i18n/i18n.properties',
        description: 'i18n properties file'
    }, {
        name: 'output',
        type: String,
        default: 'dist/i18n/i18n.json',
        description: 'new JSON file to be generated with i18n strings'
    }],

    run: function(options, rawArgs) {
        console.log(1111, 'i18n-json', 'run'); // XXX
    }
};

module.exports = {
    name: 'i18n-json',

    includedCommands: function() {
        return {
            'i18n-json': i18nJson
        }
    }
};

Then, added "addons/i18n-json" to angular-cli.json's "addons" section.

Problem: ng command doesn't recognise it.

Tried both globally installed script and ./node_modules/.bin/ng but now got to the point I can't still understand why it's not showing any reaction.

Anyone has a clue?

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

When I enter ng addon help in version 1.0.0-beta.17 of the CLI I get:

You cannot use the addon command inside an angular-cli project.

However, see @David Bulté's answer here:

https://stackoverflow.com/a/35900837/1762493

Check the sections '3d party lib installation' and 'global lib installation' on the Angular-CLI Wiki:

App Creation Using Template

ng new my-todo-app --template=simple-todo

ng serve

Using A Template Library

ng new my-todo-app

# Could be ng use`` as well.

ng install complex-todo-addon

ng generate todo routes/+todo

Thirdparty Installation

ng new my-todo-app

ng install sass

Possibly related question here:

Angular CLI addon

Create an addon for angular-cli

1 Answers1