我在bitbucket创建了一个名为“angular-lister”的repo,repo的结构是:
然后我创建了另一个具有相同结构的repo(有点像,不能把图片放在这里,它并不重要).
在第二个回购中,我使用npm i –save path / to / angular-lister.git安装了我的仓库,我看到它被添加到我的包json中,它位于我的node_modules文件夹下.
我试图从angular-lister(app / app.component)导入一个组件,但我无法做到.
这是我的第二个回购的app.module.ts(非angular-lister):
import { ListerAppComponent } from 'node_modules/angular-lister/app/app.component' @NgModule({ imports: [ ... ],declarations: [ ...,ListerAppComponent ],bootstrap: [ ...] })
我收到以下错误:
zone.js:1382 GET
07001
404 (Not Found)
为什么,我在这里做错了什么?
编辑:
的package.json:
{ "name": "angular-project","version": "1.0.0","scripts": { "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ","lite": "lite-server","tsc": "tsc","tsc:w": "tsc -w" },"licenses": [ { "type": "MIT","url": "https://github.com/angular/angular.io/blob/master/LICENSE" } ],"dependencies": { "@angular/common": "~2.1.1","@angular/compiler": "~2.1.1","@angular/core": "~2.1.1","@angular/forms": "~2.1.1","@angular/http": "~2.1.1","@angular/platform-browser": "~2.1.1","@angular/platform-browser-dynamic": "~2.1.1","@angular/router": "~3.1.1","@angular/upgrade": "~2.1.1","angular-in-memory-web-api": "~0.1.13","bootstrap": "^3.3.7","core-js": "^2.4.1","angular-lister": "git+https://bitbucket.org/project/angular-lister.git","font-awesome": "^4.7.0","ng2-bootstrap": "^1.1.16","reflect-Metadata": "^0.1.8","rxjs": "5.0.0-beta.12","systemjs": "0.19.39","tinymce": "^4.4.3","zone.js": "^0.6.25" },"devDependencies": { "@types/core-js": "^0.9.34","@types/node": "^6.0.45","concurrently": "^3.0.0","lite-server": "^2.2.2","typescript": "^2.0.3" } }
system.config.js:
/** * System configuration for Angular samples * Adjust as necessary for your application needs. */ (function (global) { System.config({ paths: { // paths serve as alias 'npm:': 'node_modules/' },// map tells the System loader where to look for things map: { // our app is within the app folder app: 'app',// angular bundles '@angular/core': 'npm:@angular/core/bundles/core.umd.js','@angular/common': 'npm:@angular/common/bundles/common.umd.js','@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js','@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js','@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js','@angular/http': 'npm:@angular/http/bundles/http.umd.js','@angular/router': 'npm:@angular/router/bundles/router.umd.js','@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js','@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',// other libraries 'rxjs': 'npm:rxjs','angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js','ng2-bootstrap': 'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.js','moment': 'node_modules/moment/moment.js' },// packages tells the System loader how to load when no filename and/or no extension packages: { app: { main: './main.js',defaultExtension: 'js' },rxjs: { defaultExtension: 'js' } } }); })(this);
node_modules / agnular,利斯特:
node_modules不应该存在,因为您已经告诉SystemJS签入该文件夹.只需编辑它:
import { ListerAppComponent } from './angular-lister/app/app.component'
请记住,您不能只导入项目,您必须创建一个npm包并导出正确的东西. this tutorial是理解其工作原理的一个很好的入口点.