Question

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

现在，我想解决我发现的一些错误。我修复了它们，运行了编译器，运行汇总等等。但汇总一直向我显示@angular/core未定义，所以它将其视为外部依赖项 - 我遇到的问题是解决问题 - 我的两个文件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.js来修复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/

...我正在将输出编译到应用程序根目录的{ ... "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" } }目录中。

的package.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      }
}

tsconfig.json

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

rollup.config.js

a*b

如果有人读到这一切，并知道可能导致问题的原因，我真的很感激。谢谢。

Answer 1

问题是我在"skipTemplateCodegen": true中遗漏了tsconfig.json选项。

该文件的最终版本看起来像（tsconfig.json）：

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

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

Angular-compiler输出包含未定义的脚本

1 个答案: