Сборка Angular 4 AOT не работает с библиотекой Lodash

Сборка Angular 4 AOT не работает с библиотекой Lodash.

Мне удалось получить lodash для сборки и обслуживания в JIT. Но у меня проблемы со сборкой для AOT.

AOT отлично работает, когда у меня нет lodash, но я хочу, чтобы он работал с lodash.

Это команда, которую я использую:

"build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",

Ошибка, которую я получаю в git bash:

warning.indexOf не является функцией

Попытка устранения ошибки объединения:

Я обновил файл rollup-config.js следующим образом:

if (warning.message.indexOf("Ключевое слово this эквивалентно undefined") > -1) { return;

отсюда:

if (warning.indexOf("Ключевое слово this эквивалентно undefined") > -1) { return;

Результат:

Казалось, что накопительный пакет работает нормально, но затем, когда я выполняю «npm run serve:aot», я получаю следующую ошибку консоли с файлом build.js:

Ошибка: Uncaught (в обещании): TypeError: void 0 не является функцией.

Возможно, это связано с добавлением библиотеки lodash?

Это мой tsconfig:

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "../../node_modules/@types/"
    ]
  },
  "files": [
    "src/app/app.module.ts",
    "src/main.ts"
  ],
  "angularCompilerOptions": {
    "genDir": "aot",
    "skipMetadataEmit" : true
  }
}

Это мой файл systemjs.config:

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      'app': 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
      'lodash':                    'node_modules/lodash/lodash.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        defaultExtension: 'js',
        meta: {
          './*.js': {
            loader: 'systemjs-angular-loader.js'
          }
        }
      },
      rxjs: {
        defaultExtension: 'js'
      },
      lodash: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

Это моя сводная конфигурация:

import rollup      from 'rollup'
import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs    from 'rollup-plugin-commonjs';
import uglify      from 'rollup-plugin-uglify'
//paths are relative to the execution path
export default {
  entry: 'src/main.js',
  dest: 'aot/dist/build.js', // output a single application bundle
  sourceMap: true,
  sourceMapFile: 'aot/dist/build.js.map',
  format: 'iife',
  onwarn: function(warning) {
    // Skip certain warnings
    // should intercept ... but doesn't in some rollup versions
    if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }
    // intercepts in some rollup versions
    if ( warning.indexOf("The 'this' keyword is equivalent to 'undefined'") > -1 ) { return; }
    // console.warn everything else
    console.warn( warning.message );
  },
  plugins: [
    nodeResolve({jsnext: true, module: true}),
    commonjs({
      include: ['node_modules/rxjs/**']
    }),
    uglify()
  ]
}

Это мой index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart - aot</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>

  <script src="build.js"></script>

</html>

Примечание.

Я упоминаю, что использую lodash в своей карте для файла systemjs.config. И в разделе пакета этого файла.

Для этой сборки я использую исходное приложение для быстрого запуска angular.io: https://angular.io/docs/ts/latest/guide/setup.html

Снимок экрана с ошибкой git при запуске npm run build:aot с lodash, установленным на "'lodash':'npm:lodash/lodash/core.js" в файле systemjs.config.js:

введите здесь описание изображения


person AngularM    schedule 05.04.2017    source источник
comment
пожалуйста, удалите тег angularjs, так как это вопрос angular2, спасибо!   -  person kennypowers    schedule 05.04.2017
comment
вы объявили в зависимостях пакета json   -  person Aravind    schedule 05.04.2017


Ответы (2)


Измените эту строку в вашей системе.

 'lodash':                    'npm:lodash/lodash/core.js'

В качестве альтернативы вы можете использовать lodash cdn, что значительно упрощает работу.

person Aravind    schedule 05.04.2017
comment
Спасибо завтра попробую и дам знать - person AngularM; 05.04.2017
comment
Не могли бы вы помочь мне и с этим (это связано с идентификаторами модулей в компонентах при выполнении сборки aot): stackoverflow.com/questions/43210191/ - person AngularM; 05.04.2017
comment
Спасибо @Aravind - person AngularM; 05.04.2017
comment
Я сделал вышеуказанное изменение, но это не сработало. Я атаковал ошибку git, указанную выше - person AngularM; 06.04.2017
comment
Я добавил награду сейчас, потому что у меня все еще есть проблемы с этим. Не могли бы вы взглянуть? - person AngularM; 11.04.2017
comment
Я пытаюсь заставить стороннюю библиотеку работать в сборке aot - person AngularM; 11.04.2017

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

предупреждение: функция (предупреждение) {

// Skip certain warnings
// should intercept ... but doesn't in some rollup versions
if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }
// intercepts in some rollup versions
if ( warning.indexOf("The 'this' keyword is equivalent to 'undefined'") > -1 ) { return; }
// console.warn everything else
console.warn( warning.message );

}, из файла rollup-config и приложения AOT, скомпилированного без ошибок и в настоящее время работающего нормально, теперь я знаю, что это не рекомендуемый подход по разным причинам, но без вреда и без фола, я думаю, дайте мне знать, если это поможет. я всегда могу реализовать что-то локальное и поиграть, если вы все еще застряли.

person Brian Mc Donagh    schedule 14.04.2017