Angularの小さなnpmパッケージで作業しています。基本的には、配置した要素をドラッグ/移動できるディレクティブの1つです。私は昨日出版することができました（私がnpmに角度パッケージを公開したのは初めてです）。私は、Angularのコードをコンパイルするのにngcを使用しました。バンドルして解凍するためのロールアップ。角度コンパイラは、定義されていないthisを含むスクリプトを出力します。
今、私は私が見つけたいくつかのバグを修正したかったです。私は、それらを固定コンパイラを実行した、ロールアップを実行し、それが外部依存関係として扱いますので、などしかし、ロールアップは、@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.
私はので、私は上記に書いた警告の起こっていると思います。だから私はそれらを修正しようとしましたが、成功しませんでした。私は、少なくとも、rollup.config.jsファイルにexports: ['@angular/core']を追加することにより、@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
デコレーターが異なって作成されているように見えますし、私ならば、私は本当にOのアイデアを持っていますtsconfig.jsonファイルまたは他の設定ファイルの中の何かを変更しました。
私は私のモジュールを構築するためにやっているの手順は次のとおりです。
node_modules/.bin/ngc -p tsconfig.jsonnode_modules/.bin/rollup -cnode_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',
}
}
誰もがそのことを読んで、何が問題を引き起こしているのか知っていれば、本当に感謝しています。ありがとうございました。