0

我正在为 Angular 开发一个小型 npm 包，它基本上是一个指令，可以在您放置的元素上进行拖动/移动。我昨天确实设法发布了它（甚至认为这需要一段时间，因为这是我第一次将 angular 包发布到 npm）。我用来ngc编译 Angular 的代码。用于捆绑的汇总和用于缩小的 unglify。

现在，我想修复我发现的几个错误。我修复了它们，运行了编译器，运行了汇总等。但是汇总一直向我显示@angular/core未定义的内容，因此它将其视为外部依赖项，并且 - 我无法解决的问题 -this is undefined在我的两个文件中（https： //github.com/rollup/rollup/wiki/Troubleshooting#this-is-undefined）。无论如何，模块已经构建，我能够发布并使用它。问题是，当我尝试ng build --prod --aot使用包含该软件包的应用程序时，它会大喊：

ERROR in Unexpected value 
    'DragOnlyModule in .../ng-dragonly-demo/node_modules/ng-dragonly/index.d.ts' 
imported by the module 
    'AppModule in .../ng-dragonly-demo/src/app/app.module.ts'. 
Please add a @NgModule annotation.

我猜这是因为我上面写的警告。所以我试图修复它们，但没有成功。我至少能够通过添加到文件中来修复@angular/core警告，但仍然存在。我还意识到我编译的文件与昨天的不同。exports: ['@angular/core']rollup.config.jsthis is undefined

在几次提交之前编译的文件等：

import { NgModule } from "@angular/core";
import { DragOnlyDirective } from "./dragonly.directive";
var DragOnlyModule = (function () {
    function DragOnlyModule() {
    }
    DragOnlyModule.decorators = [
        { type: NgModule, args: [{
                declarations: [DragOnlyDirective],
                exports: [DragOnlyDirective]
            },] },
    ];
    /** @nocollapse */
    DragOnlyModule.ctorParameters = function () { return []; };
    return DragOnlyModule;
}());
export { DragOnlyModule };
//# sourceMappingURL=dragonly.module.js.map

今天编译的文件：

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { NgModule } from "@angular/core";
import { DragOnlyDirective } from "./dragonly.directive";
var DragOnlyModule = (function () {
    function DragOnlyModule() {
    }
    DragOnlyModule = __decorate([
        NgModule({
            declarations: [DragOnlyDirective],
            exports: [DragOnlyDirective]
        })
    ], DragOnlyModule);
    return DragOnlyModule;
}());
export { DragOnlyModule };
//# sourceMappingURL=dragonly.module.js.map

看起来装饰器的创建方式不同，我真的不知道我是否更改了tsconfig.json文件或任何其他配置文件中的任何内容。

我正在执行构建模块的步骤是：

  1. node_modules/.bin/ngc -p tsconfig.json
  2. node_modules/.bin/rollup -c
  3. node_modules/.bin/uglify ... (that's a long one)

我的文件结构是：

app
 |
 - src/
    - dragonly.directive.ts
    - dragonly.module.ts
 - index.ts
 - package.json
 - tsconfig.json
 - rollup.config.js

...我正在将输出编译到dist/应用程序根目录中的目录中。

包.json

{
  ...
  "main": "dragonly.bundle.js",
  "module": "dragonly.module.js",
  "jsnext:main": "dragonly.module.js",
  "types": "dragonly.module.d.ts",
  ...
  "devDependencies": {
    "@angular/compiler": "^4.3.3",
    "@angular/compiler-cli": "^4.3.3",
    "@angular/core": "^4.3.3",
    "rollup": "^0.45.2",
    "rollup-plugin-commonjs": "^8.1.0",
    "rollup-plugin-node-resolve": "^3.0.0",
    "typescript": "^2.4.2",
    "uglify-js": "^3.0.27",
    "uglifyjs": "^2.4.11"
  },
  "dependencies": {
    "@angular/compiler-cli": "^4.3.3",
    "@angular/platform-server": "^4.3.3"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "lib": [
      "es2015",
      "dom"
    ],
    "rootDir": ".",
    "baseUrl": ".",
    "target": "es5",
    "sourceMap": true,
    "outDir": "./dist",
    "module": "es2015",
    "declaration": true,
    "skipLibCheck": true,
    "inlineSources": true,
    "stripInternal": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "typeRoots": [
      "./node_modules/@types/"
    ],
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "suppressImplicitAnyIndexErrors": true,
    "paths": {
      "@angular/core": ["node_modules/@angular/core"]
    }
  },
  "files": [
    "index.ts"
  ],
  "angularCompilerOptions": {
    "skipMetadataEmit": true      }
}

rollup.config.js

export default {
    entry: 'dist/index.js',
    dest: 'dist/bundles/dragonly.umd.js',
    sourceMap: false,
    format: 'umd',
    moduleName: 'ng.dragonly',
    external: ['@angular/core'],    
    globals: {
        '@angular/core': 'ng.core',
    }
}

如果有人阅读了所有内容并知道可能导致问题的原因，我将不胜感激。谢谢你。

4

1 回答 1

0

问题是我一直缺少"skipTemplateCodegen": truein 的选项tsconfig.json。

该文件的最终版本如下所示（tsconfig.json）：

...
"angularCompilerOptions": {
    "skipTemplateCodegen": true,
    "skipMetadataEmit": true
}

这也是我的代码看起来不同的原因。

于 2017-08-10T00:10:53.113 回答