Angular2:使用 angular-cli 创建的应用程序之间的依赖关系
Angular2: Dependencies Between Apps created with angular-cli
我正在使用 Angular2-cli 创建两个应用程序:MyFirstApp
和 MySecondApp
。我希望 MySecondApp
导入 MyFirstApp
以便我可以重用 directive/service/component。
当我导入 MyFirstApp
时,出现以下编译错误:Cannot find module 'MyFirstApp'
.
重现的方法如下:
$ 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
修改 src/app/my-second-app.component.ts
使其看起来像:
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!';
}
我尝试了许多版本的import { MyFirstAppService } from 'MyFirstApp';
(即import { MyFirstAppServiceService } from './../../node_modules/my-first-app/src/app/my-first-app-service.service';
& co) 并使用 system-config.ts
(使用 this and this)玩,但没有任何运气。我总是有一个 Cannot find module 'MyFirstApp'
.
有什么建议吗?
编辑:
通过如下调整 system-config.ts
(第 1 至 14 行):
const map: any = {
'my-first-app': 'vendor/my-first-app/app/index.js'
};
/** User packages configuration. */
const packages: any = {
'my-first-app': {
format: 'cjs'
}
};
我能做到import { MyFirstAppServiceService } from 'my-first-app/src/app/my-first-app-service.service';
。 .../dist/...
不起作用。似乎不是 正确的 方法……难道不应该 import { MyFirstAppServiceService } from 'my-first-app/my-first-app-service.service'
吗?
请注意,生成的 vendors/my-first-app/
目录不包含 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
谢谢。
在你的 src/app/mysecondapp.component.ts 中,尝试替换:
import { MyFirstAppService } from 'MyFirstApp';
通过这个
import { MyFirstAppService } from './app/MyFirstApp';
我希望它会起作用:)
Angular2-cli 项目的开发者希望支持 library/addons flavoured project for the 1.0.0 release.
目前,我们可以做些什么来让它发挥作用:
- 在库中添加一个主package.json
- npm install yourlib --save in your other apps
配置您的第二个应用程序,以便它根据您的需要打包您的库。 gulp 的示例:
var copyScripts = require('ionic-gulp-scripts-copy');
gulp.task('assets', function(){
return copyScripts({src:'node_modules/your-lib/dist/**/*', dest:'our-dest'});
});
我正在使用 Angular2-cli 创建两个应用程序:MyFirstApp
和 MySecondApp
。我希望 MySecondApp
导入 MyFirstApp
以便我可以重用 directive/service/component。
当我导入 MyFirstApp
时,出现以下编译错误:Cannot find module 'MyFirstApp'
.
重现的方法如下:
$ 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
修改 src/app/my-second-app.component.ts
使其看起来像:
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!';
}
我尝试了许多版本的import { MyFirstAppService } from 'MyFirstApp';
(即import { MyFirstAppServiceService } from './../../node_modules/my-first-app/src/app/my-first-app-service.service';
& co) 并使用 system-config.ts
(使用 this and this)玩,但没有任何运气。我总是有一个 Cannot find module 'MyFirstApp'
.
有什么建议吗?
编辑:
通过如下调整 system-config.ts
(第 1 至 14 行):
const map: any = {
'my-first-app': 'vendor/my-first-app/app/index.js'
};
/** User packages configuration. */
const packages: any = {
'my-first-app': {
format: 'cjs'
}
};
我能做到import { MyFirstAppServiceService } from 'my-first-app/src/app/my-first-app-service.service';
。 .../dist/...
不起作用。似乎不是 正确的 方法……难道不应该 import { MyFirstAppServiceService } from 'my-first-app/my-first-app-service.service'
吗?
请注意,生成的 vendors/my-first-app/
目录不包含 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
谢谢。
在你的 src/app/mysecondapp.component.ts 中,尝试替换:
import { MyFirstAppService } from 'MyFirstApp';
通过这个
import { MyFirstAppService } from './app/MyFirstApp';
我希望它会起作用:)
Angular2-cli 项目的开发者希望支持 library/addons flavoured project for the 1.0.0 release.
目前,我们可以做些什么来让它发挥作用:
- 在库中添加一个主package.json
- npm install yourlib --save in your other apps
配置您的第二个应用程序,以便它根据您的需要打包您的库。 gulp 的示例:
var copyScripts = require('ionic-gulp-scripts-copy');
gulp.task('assets', function(){ return copyScripts({src:'node_modules/your-lib/dist/**/*', dest:'our-dest'}); });