Question

我想在npm中使用Angular2组件（我的通用网格，我的通用按钮等）和模块（我的网格模块中的客户端）创建我的库，但我找不到任何在线工作示例（我确实找到了）虽然有一些，但它永远不会奏效......

index.js：

export { PortalGridComponent } from './src/portal-grid/portal-grid.component';

这是我的package.config.json：

{
  "name": "my-perso-components",
  "version": "1.0.13",
  "main": "index.js",
  "scripts": {
    "nbuild": "tsc index.ts --outDir ./lib",
    "build": "tsc -p src/",
    "build:watch": "tsc -p src/ -w",
    "build:e2e": "tsc -p e2e/",
    "serve": "lite-server -c=bs-config.json",
    "serve:e2e": "lite-server -c=bs-config.e2e.json",
    "prestart": "npm run build",
    "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
    "pree2e": "npm run build:e2e",
    "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
    "preprotractor": "webdriver-manager update",
    "protractor": "protractor protractor.config.js",
    "pretest": "npm run build",
    "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
    "pretest:once": "npm run build",
    "test:once": "karma start karma.conf.js --single-run",
    "lint": "tslint ./src/**/*.ts -t verbose"
  },
  "dependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",
    "@angular/forms": "~2.4.0",
    "@angular/http": "~2.4.0",
    "@angular/platform-browser": "~2.4.0",
    "@angular/platform-browser-dynamic": "~2.4.0",
    "@angular/router": "~3.4.0",
    "angular-in-memory-web-api": "~0.2.4",
    "systemjs": "0.19.40",
    "core-js": "^2.4.1",
    "rxjs": "5.0.1",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.35",
    "@types/jasmine": "^2.5.36",
    "@types/node": "^6.0.46",
    "canonical-path": "0.0.2",
    "concurrently": "^3.1.0",
    "jasmine-core": "~2.4.1",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "lite-server": "^2.2.2",
    "lodash": "^4.16.4",
    "protractor": "~4.0.14",
    "rimraf": "^2.5.4",
    "tslint": "^3.15.1",
    "typescript": "~2.0.10"
  },
  "license": "ISC"
}

我的tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "outDir": "./lib",
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "./node_modules/@types"
    ],
    "types": [
      "core-js"
    ]
  }
}

我的项目架构如下所示：

 - lib
 - node_modules
 - src
     - app
     - my-perso-grid
        - my-perso-grid.component.ts
        - my-perso-grid.html
        - my-perso-grid.scss
 - .npmignore
 - index.ts
 - package.json
 - tsconfig.json

然后我运行tsc index.ts --outDir ./lib并执行npm版本补丁，然后运行npm publish。

我的代码肯定是在npm，然后我可以将它安装在另一个文件夹中...但是，我总是遇到404问题：

错误：（SystemJS）XHR错误（404 Not Found）加载 http://localhost:3000/my-perso-components错误：XHR错误（未找到404）

这很奇怪，因为当我在另一个组件中导入并且没有显示错误时，我必须自动完成组件的名称！

有什么想法吗？我该怎么办？您是否有最近的工作教程来创建，发布和使用npm包？

非常感谢...会帮助很多

Answer 1

您是否已查看此http://blog.mgechev.com/2017/01/21/distributing-an-angular-library-aot-ngc-types/分发角化图书馆 - 简要指南

将angular2模块/组件发布为npm包

1 个答案: