Angular-编译器输出包含未定义 this 的脚本

Question

我正在为 Angular 开发一个小的 npm 包，它基本上是一个指令，可以在你放置它的元素上启用 dragging/moving。我昨天确实设法发布了它（甚至认为这花了一段时间，因为这是我第一次将 angular 包发布到 npm）。我使用 ngc 来编译 Angular 的代码。 Rollup 用于打包，unglify 用于缩小。

现在，我想修复我发现的几个错误。我修复了它们，运行编译器，运行 rollup，等等。但是 rollup 一直告诉我 @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.

我想这是因为我在上面写的警告。所以我试图修复它们，但没有成功。我至少可以通过将 exports: ['@angular/core'] 添加到 rollup.config.js 文件来修复 @angular/core 警告，但 this 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 文件或任何其他配置文件中的任何内容。

我构建模块的步骤是：

node_modules/.bin/ngc -p tsconfig.json
node_modules/.bin/rollup -c
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/ 目录中。

package.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',
    }
}

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

Answer 1

问题是我缺少 tsconfig.json 中的 "skipTemplateCodegen": true 选项。

文件的最终版本看起来像 (tsconfig.json):

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

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

Angular-编译器输出包含未定义 this 的脚本

Angular-compiler outputs script that contain undefined this

tsconfig

rollupjs

angular-compiler-cli

angular

angular-compiler