Dependencies between Apps created with angular-cli

[MathieuNls]

I am using the Angular2-cli to create two applications: MyFirstApp & MySecondApp. I whish MySecondApp to import MyFirstApp so I can reuse directive/service/component.
When I import MyFirstApp, using the documentation for 3rd parties I have the following compilation error: Cannot find module 'MyFirstApp'.

Here's how to reproduce:

    $ npm -v
    3.9.3

    $ lsb_release -a
    No LSB modules are available.
    Distributor ID: elementary OS
    Description:    elementary OS Freya
    Release:    0.3.2
    Codename:   freya

    $ node -v
    v6.2.1

    $ npm list  | grep 'angular'
    ├── @angular/common@2.0.0-rc.1
    ├── @angular/compiler@2.0.0-rc.1
    ├── @angular/core@2.0.0-rc.1
    ├── @angular/http@2.0.0-rc.1
    ├── @angular/platform-browser@2.0.0-rc.1
    ├── @angular/platform-browser-dynamic@2.0.0-rc.1
    ├── @angular/router@2.0.0-rc.1
    ├─┬ angular-cli@1.0.0-beta.5

    $ ng new MyFirstApp
    $ cd MyFirstApp
    $ ng g service MyFirstAppService
    $ ng build
    $ cd ..
    $ ng new MySecondApp
    $ cd MySecondApp
    $ npm install ../MyFirstApp --save

Add MyFirstApp to angular-cli-build.js & system.config.ts as shown in the doc.

//angular-cli-build.js
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      'my-first-app/**/*.+(js|js.map)', //HERE
      '@angular/**/*.+(js|js.map)'
    ]
  });
};

//system.config.ts
const map: any = {
  'my-first-app': 'vendor/my-first-app/index.js'
  // Also tried  'my-first-app': 'node_modules/my-first-app/index.js'
};

/** User packages configuration. */
const packages: any = {
  'my-first-app': {
   format:'cjs'
  }
};

Then,

//my-second-app.component.ts
import * as firstapp from 'my-first-app'; // -> `Cannot find module 
import { MyFirstAppServiceService } from 'my-first-app/my-first-app-service.service'; // -> `Cannot find module 
import { MyFirstAppServiceService } from 'my-first-app/src/app/my-first-app-service.service'; //-> Works !

The last import works, but I guess it doesn't leverage angular-cli-build.js nor system-config.ts.

Note that the resulting vendors/my-first-app/ directory doesn't contain the actual code of MyFirstApp

$ # While in MySecondApp
$ tree dist/vendor/my-first-app 
dist/vendor/my-first-app
├── angular-cli-build.js
└── config
    ├── environment.js
    ├── karma.conf.js
    ├── karma-test-shim.js
    └── protractor.conf.js

Thanks.

[filipesilva]

We don't really have support for making library-type packages at the moment.

I think the Cannot find module message is due to package.json not having a defined main entry, maybe you can try adding that.

There really isn't any way to recursively build subprojects, so your best bet is to try and import the ts files directly I think.

[sky-coding]

@filipesilva the Ember CLI has a command (ember addon <addon-name>) that will scaffold a new project designed to be installed via npm into other Ember CLI projects. These "addon" projects can also be built and served standalone using a built-in "dummy app", which acts as a fake consumer of the addon for testing and demonstration purposes. This is extremely useful for quickly creating an easily maintainable styleguide/component library that is shared between apps but also deployed independently.

I would really love an equivalent for my Angular CLI projects, and was hopeful the CLI would have provided a similar method for creating addons, seeing as it is based on the Ember CLI.

Since it is not possible to consume an Angular CLI app from another Angular CLI app, should my approach be to create my own "addon" using a manual (gulp/grunt) build process, in order to achieve the same functionality? Just looking for some feedback before I start down this path. Thank you!

[filipesilva]

Well we want to support creating library-type projects, that is still on the 1.0.0 goals.

Right now, you can probably make your own addon - remember that Angular-CLI is actually an Ember-CLI adding itself. But I can't promise it will be well supported since we've moved away from the addon architecture a bit while we build the core functionality.

There is actually one example of a library app created with the CLI: https://github.com/angular/material2. They are probably the people best suited to help you in doing this.

[saxicek]

@filipesilva Now that @angular/cli is 1.0.0 can you please update on this? Was the library-type project included? Or is there any issue where progress can be tracked? Or was it dropped completely? Thank you!

Edit: I believe #1692 is the issue I was looking for.

[angular-automatic-lock-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.}