Website-Suche

typescript - Angular 2, transpilierte mit tsickle, kann nicht vom google-closure-compiler verarbeitet werden

Ich habe ein Angular 2 TypeScript-Projekt, das ich zu einer einzigen JS-Datei bündeln möchte. Bootstrapper:

main.ts

import {platformBrowser} from '@angular/platform-browser';
import {AppModuleNgFactory} from '../aot/dev/app/app.module.ngfactory' //generated code
import {enableProdMode} from '@angular/core';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory).catch(e=>console.error(e));

Ich habe den Ahead-of-Time-Compiler von Angular 2 verwendet, um ngfactory.ts-Dateien zu erstellen. Anschließend habe ich tsickle ausgeführt, um meine Dateien in mit dem Google Closure Compiler kompatibles JS zu transformieren. Dies wurde problemlos abgeschlossen:

"node_modules/.bin/tsickle" -- -p ./

Hier ist das Ergebnis:

main.js

goog.module('C_.websites.learn.angular2.dev.main');var module = module || {id: 'C:/websites/learn/angular2/dev/main.js'};
import { platformBrowser } from '@angular/platform-browser';
var platformBrowser = platformBrowser; /* local alias for Closure JSDoc */
import { AppModuleNgFactory } from '../aot/dev/app/app.module.ngfactory';
var AppModuleNgFactory = AppModuleNgFactory; /* local alias for Closure JSDoc */ //generated code
import { enableProdMode } from '@angular/core';
var enableProdMode = enableProdMode; /* local alias for Closure JSDoc */
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory).catch(function (e) { return console.error(e); });

Schließlich verwende ich google-closure-compiler-js, um eine Gulp-Task zu erstellen, die alle JS in eine Datei bündelt.

gulpfile.js

const closureCompiler = require('google-closure-compiler-js').gulp();
gulp.task('closure-compiler', function() {
    return gulp.src('./dev/main.js')
        .pipe(closureCompiler({
            compilationLevel: 'SIMPLE',
            warningLevel: 'VERBOSE',
            outputWrapper: '(function(){\n%output%\n}).call(this)',
            jsOutputFile: 'build.js',
            createSourceMap: false
        }))
        .pipe(gulp.dest(appProd));
});

Die Aufgabe schlägt sofort mit vielen Fehlern fehl. Hier ist ein Beispiel:

dev\main.js:3 (JSC_REFERENCE_BEFORE_DECLARE) Variable vor der Deklaration referenziert: module$contents$C_$websites$learn$angular2$dev$main_platformBrowser

dev\main.js:5 (JSC_REFERENCE_BEFORE_DECLARE) Variable vor der Deklaration referenziert: module$contents$C_$websites$learn$angular2$dev$main_AppModuleNgFactory

dev\main.js:7 (JSC_REFERENCE_BEFORE_DECLARE) Variable vor der Deklaration referenziert: module$contents$C_$websites$learn$angular2$dev$main_enableProdMode

dev\main.js:10 (JSC_POSSIBLE_INEXISTENT_PROPERTY) Eigenschaft bootstrapModuleFactory niemals auf ? definiert

dev\main.js:3 (JSC_INTERNAL_ERROR_UNEXPECTED_TOKEN) Internaler Fehler: TypeCheck weiß nicht, wie man IMPORT behandelt

dev\main.js:3 (JSC_INTERNAL_ERROR_UNEXPECTED_TOKEN) Internaler Fehler: TypeCheck weiß nicht, wie IMPORT_SPECS zu verarbeiten sind ...

Ich verwende die neueste tsickle-Quelle, die am 10. Oktober 2016 von GitHub geklont wurde, zusammen mit "google-closure-compiler-js": "^20160916.0.0".

Fehlt mir ein Schritt?

Verwandte Artikel