Webpack + Angular2 AOT: Uncaught SyntaxError: Неожиданный импорт токена

в этой настройке, как вы транспилируете библиотеку angular2, импортируемую из сгенерированных файлов ngfactory?

текущее приложение представляет собой комбинацию веб-пакета + кулинарная книга aot на основе документов angular.

angular.io/docs/ts/latest/cookbook/aot-compiler.html
angular.io/docs/ts/latest/guide/webpack.html

У меня есть рабочий POC, где вы можете воспроизвести проблему из этого репо:

https://github.com/jetlogs/Angular2-AOT-Localization

после того, как вы сделали компиляцию/связку, вы можете открыть 2 файла:

non-aot.html – это не-aot-версия того же приложения, и она загружается нормально
aot.html – этот файл завершается с ошибкой:

ng_module_factory.js?95b1:13 Uncaught SyntaxError: Неожиданный импорт токена

Ожидаемое поведение
ожидаемое поведение заключается в том, что aot.html и не-aot.html должны вести себя одинаково

Минимальное воспроизведение задачи с инструкциями

клонируйте репо, затем запустите эти команды в рабочем каталоге:

npm install
npm postinstall
npm run build

затем откройте aot.html, чтобы воспроизвести проблему

Есть ли способ исправить операторы импорта из импортированных библиотек angular2? Спасибо

ОБНОВЛЕНИЕ:

Я попытался перенести исходные файлы angular2, которые находятся в ES2015, с помощью загрузчика babel:

{
            test: /\.js$/,
            loader: 'babel',
            include: [
                /node_modules(\\|\/)@angular/
            ],
            exclude: [
                /\.umd\.js$/
            ],
            query: {
                presets: ['es2015']
            }
        },

теперь он компилируется без проблем с несовместимостью с ES6, однако теперь он обнаруживает новую ошибку только для aot.html:

core.umd.js?e2a5:3272Uncaught Ошибка: нет провайдера для NgZone!

любая причина, по которой транспилированные исходные коды angular2, на которые ссылается компилятор AOT, вызывают проблемы с NgZone?

Я обновил репозиторий выше, чтобы отразить мои последние изменения

ОБНОВЛЕНИЕ 2: 13.10.16

Обновлен до Angular 2.1
все та же проблема


webpack angular angularjs angular2-aot
person Jet Fontanilla    schedule 12.10.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Синтаксис System.import, используемый в ng_module_factory.js, представляет собой загрузку модуля в стиле ES6. Webpack 1, который вы, вероятно, используете, не поддерживает этот синтаксис.

Обходной путь может заключаться в переносе модулей Angular ES6 в ES5 с помощью синтаксиса require(), но вы уже пробовали это безуспешно.

Однако вы можете подумать о переходе на Webpack 2, который полностью поддерживает импорт в стиле ES6 и очень близок к стабильной версии. У меня компиляция работала таким образом, ничего не меняя, кроме конфигурации веб-пакета, которая использует новый синтаксис для некоторых частей.

person Marcus Krahl    schedule 27.10.2016
comment
удалось решить эту проблему давно, переключившись на webpack2. - person Jet Fontanilla; 04.01.2017

arrow_upward
0
arrow_downward

Для меня это был неправильный импорт, сгенерированный IDE:

import { Component, Output } from "@angular/core/src/metadata/directives";

Вместо:

import { Component, Output } from "@angular/core";

person Vitali Carbivnicii    schedule 18.10.2016