Geek Answers Handbook

Angular2: dependencies between applications created using angular-cli

I use Angular2-cli to create two applications: MyFirstApp and MySecondApp . I need MySecondApp import MyFirstApp so that I can reuse the directive / service / component. When I import MyFirstApp , I have the following compilation error: Cannot find module 'MyFirstApp' .

Here's how to reproduce:

  $ npm -v 3.9.3 $ 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 #Also tried w/ ng install ../MyFirstApp and github link $ vim src/app/my-second-app.component.ts

Modify src/app/my-second-app.component.ts so it looks like this:

 import { Component } from '@angular/core'; import { MyFirstAppService } from 'MyFirstApp'; @Component({ moduleId: module.id, selector: 'MySecondApp', templateUrl: 'mysecondapp.component.html', styleUrls: ['mysecondapp.component.css'] }) export class MySecondAppAppComponent { title = 'MySecondApp works!'; }

I tried many versions of import { MyFirstAppService } from 'MyFirstApp'; (i.e. import { MyFirstAppServiceService } from './../../node_modules/my-first-app/src/app/my-first-app-service.service'; & amp; co) and plays from using system-config.ts (using this and this ) with no luck. I always have Cannot find module 'MyFirstApp' .

Any suggestions?

Edit : By configuring system-config.ts (lines 1 through 14) as follows:

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

I can do import { MyFirstAppServiceService } from 'my-first-app/src/app/my-first-app-service.service'; . .../dist/... does not work. This doesn't seem to be the right way to do this, though ... Can't import { MyFirstAppServiceService } from 'my-first-app/my-first-app-service.service' be done?

Note that the resulting vendors/my-first-app/ directory does not contain MyFirstApp code

 $ # 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.

+1
source share
2 answers

Angular2-cli project developers want to support a library / add-ons flavored project for version 1.0.0 .

Now, what can we do to make it work:

  • Add core package.json library
  • npm install yourlib --save in other applications

  • Set up the second application to pack your library according to your needs. Example with gulp:

    var copyScripts = require ('ionic-gulp -scripts-copy');

     gulp.task('assets', function(){ return copyScripts({src:'node_modules/your-lib/dist/**/*', dest:'our-dest'}); });
0
source

In your src / app / mysecondapp.component.ts try replacing:

 import { MyFirstAppService } from 'MyFirstApp';

Under this

 import { MyFirstAppService } from './app/MyFirstApp';

I hope this works :)

0
source

More articles:


All Articles