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
, 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:
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 version of import { MyFirstAppService } from 'MyFirstApp';
(i.e. import { MyFirstAppServiceService } from './../../node_modules/my-first-app/src/app/my-first-app-service.service';
& co) and played with system-config.ts
(using this and this) without any luck. I always have a Cannot find module 'MyFirstApp'
.
Any suggestions ?
Edit:
By tweaking system-config.ts
(lines 1 to 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/...
doesn't work. Doesn't seems to be the right way to do it though... Should'nt it be possible to do import { MyFirstAppServiceService } from 'my-first-app/my-first-app-service.service'
?
Note that the resulting vendors/my-first-app/
directory doesn't contain the 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.
In your src/app/mysecondapp.component.ts, try to replace :
import { MyFirstAppService } from 'MyFirstApp';
By this
import { MyFirstAppService } from './app/MyFirstApp';
I hope it'll work :)
Developers of the Angular2-cli project want to support library/addons flavoured project for the 1.0.0 release.
For now, what we can do to make it works:
- Add a main in the library package.json
- npm install yourlib --save in your other apps
Configure your second app so it packages your lib according to your needs. An 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'}); });
来源:https://stackoverflow.com/questions/37822540/angular2-dependencies-between-apps-created-with-angular-cli