角度編譯器輸出包含未定義的腳本

我正在爲Angular創建一個小的npm包，這基本上是一個指令，可以拖放/移動您放置的元素。我確實設法在昨天發佈它（甚至認爲它需要一段時間，因爲這是我第一次發佈角度包到npm）。我使用ngc來編譯Angular的代碼。彙總捆綁和unlify縮小。角度編譯器輸出包含未定義的腳本

現在，我想修復我發現的一些錯誤。我修正了它們，運行了編譯器，跑起來了，等等。但是彙總顯示我沒有定義@angular/core，所以它將它視爲外部依賴項，以及我在解決問題時遇到的問題 - 即我的兩個文件中的this is undefinedhttps://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', 
    } 
}

如果有人閱讀並知道可能導致問題的原因，我會非常感激。謝謝。

來源

2017-08-09 Dawid Zbiński

問題是我一直在丟失"skipTemplateCodegen": true選項在tsconfig.json。

文件的最終版本看起來像（tsconfig.json）：

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

這也是我的代碼看起來不同的原因。

來源

2017-08-10 00:10:53

角度編譯器輸出包含未定義的腳本

回答

相關問題