2016-11-28 4 views
1

Использование TypScript 2.0 (tsc version 2.0.3).Анализ XML в машинописных текстах

Я безуспешно попытался использовать библиотеку узлов xml2js внутри приложения с угловым2/типом (см. https://www.npmjs.com/package/xml2js). Понятно, что я недостаточно знаком с тем, как SystemJS устанавливает библиотеку для потребления.

Для установки библиотеки xml2js я сделал следующее:

npm install --save xml2js 
npm install --save @types/xml2js 

Вот соответствующие файлы:

tsconfig.json:

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false, 
    "outDir" : "build" 
    } 
} 

systemjs.config.js

/** 
* 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: 'build', 
     // 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', 
     '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.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' : 'npm:lodash', 
     'xml2js' : 'npm:xml2js' 
    }, 
    // packages tells the System loader how to load when no filename and/or no extension 
    packages: { 
     app: { 
     main: './main.js', 
     defaultExtension: 'js' 
     }, 
     rxjs: { 
     defaultExtension: 'js' 
     }, 
     lodash: { 
     main : 'index.js', 
     defaultExtension: 'js' 
     }, 
     xml2js: { 
     defaultExtension: 'js' 
     } 
    } 
    }); 
})(this); 

Потребляющее файл:

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import 'rxjs/Rx'; 
import * as _ from 'lodash'; 
import * as xml2js from 'xml2js'; 
@Injectable() 
export class CatalogService { 
    constructor (private http:Http) { 
    } 
    getCatalog() { 
    //return Promise.resolve(['This', 'That']); 
    var xml = "<root>Hello xml2js!</root>" 
    xml2js.parseString(xml, function (err, result) { 
     alert(result); 
    }); 

    alert(_.indexOf([1, 2, 1, 2], 2)); 

    } 
} 

index.html файл

<html> 
    <head> 
    <title>Angular QuickStart</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="styles.css"> 
    <!-- 1. Load libraries --> 
    <!-- Polyfill for older browsers --> 
    <script src="node_modules/core-js/client/shim.min.js"></script> 
    <script src="node_modules/zone.js/dist/zone.js"></script> 
    <script src="node_modules/reflect-metadata/Reflect.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <!-- 2. Configure SystemJS --> 
    <script src="systemjs.config.js"></script> 
    <script> 
     System.import('app').catch(function(err){ console.error(err); }); 
    </script> 
    </head> 
    <!-- 3. Display the application --> 
    <body> 
    <dsa-app>Loading DSA App...</dsa-app> 
    </body> 
</html> 

С этой установки, я получаю ошибку следующим образом:

zone.js: 1382 ПОЛУЧИТЬ http://localhost:3000/node_modules/xml2js/ 404 (не найдено)

Библиотека lodash загружается отлично, поэтому я уверен, что проблема здесь связана с тем, как библиотека xml2js определена больше, чем моя настройка.

Ближайший решение, которое я видел за это немного от углового 2,0, но я положил его здесь для справки: Use JS library xml2js with Angular 2

Хотя вопрос конкретно рассматривается с помощью этой библиотеки, любые другие идеи о том, как разобрать/преобразования xml во что-то управляемое внутри TypeScript также пригодится.


Update:

Как предположил я начал добавлять "основные" определения в моей конфигурации systemjs. Тем не менее, я, хотя часть этого, заключалась в том, что зависимости будут загружаться/вычисляться из содержимого узла.

Таким образом, изменения в system.config.js иметь:

xml2js: { 
    main: 'lib/xml2js.js', 
    defaultExtension: 'js' 
    }, 

Переместить вопрос, где теперь я получаю 404 записей для саксофона и xmlbuilder.

Таким образом, я добавил следующее тоже:

sax: { 
    main: 'lib/sax.js', 
    defaultExtension: 'js'   
    }, 
    xmlbuilder: { 
    main: 'lib/index.js', 
    defaultExtension: 'js'   
    } 

Какой адрес на саксофоне и xmlbuilder, но больше ошибок всплывающий.

Я думал, что вся идея с использованием SystemJS и tsconfig будет заключаться в том, что они будут вычисляться из модулей узлов, добавив, что все зависимости от дерева на пакетах, по-видимому, побеждают цель.

+0

Нет, SystemJS - это только погрузчик. То, что вы описываете, можно решить с помощью jspm, webpack или браузера. – artem

ответ

1

Я думаю, что проблема здесь в вашей конфигурации systemjs - вы не определили main для xml2js. Из-за того, что systemjs не знает, какой файл загрузить, поэтому по какой-то причине пытается загрузить каталог NPM (загрузка/node_modules/xml2js в виде файла, который явно не сработает). Обратите внимание, что в вашей конфигурации lodash указано «index.js», предположительно приводящее к загрузке /node_modules/lodash/index.js при импорте lodash, поэтому это работает.

Если вы укажете «main» для xml2js в вашей конфигурации systemjs, указывающий на lib/xml2js.js, тогда systemjs должен быть в состоянии найти его правильно.

+0

Да, это было мое мышление изначально. Однако, когда я увидел определение lodash для «основного» файла, я не нашел ничего подобного в папке xml2js. Так изменить положение вещей к этому: xml2js: { главная: 'Lib/xml2js.js', defaultExtension: '' JS } удаляет 404 на файл xml2js, но добавляет кучу других. zone.js: 1382 GET http: // localhost: 3000/sax 404 (не найдено) zone.js: 1382 GET http: // localhost: 3000/events 404 (не найдено) и т. Д. –

+0

У вас есть есть конкретная причина для использования SystemJS? Более простой инструмент, который Just Works (более или менее) для модулей NPM может быть лучшим выбором (например, webpack, возможно, для браузера). Обратите внимание, что это не проблема с TypeScript, это просто SystemJS - вывод компиляции и JS прекрасен, так как он застрял вместе с другими модулями, это то, что ломается. –

+0

Не совсем. За другим комментарием SystemJS не то, что я думал, что это был, то есть инструмент полной зависимости, а вместо этого просто загрузчик. Единственная причина, по которой я использую SystemJS, - это то, что по умолчанию установлено для обучающих программ и демоверсий Angular 2. На этом этапе я изучаю использование JSPM. Ваш указатель был точным решением проблемы, т. Е. Я отправил элемент по деталям во всем дереве (занял некоторое время), чтобы доказать, что настройка пакетов вручную сделала бы трюк. –

0

Как отмечалось в @ tim-perry, проблема заключалась в том, как был определен пакет. Еще одна проблема в моей работе заключается в том, что я делал неправильные предположения о том, что SystemJS сделает для меня. Мне нужно заглянуть в другой инструмент (начиная с JSPM), который будет обрабатывать дерево при загрузке базового модуля. В моем примере lodash работал, потому что он самодостаточен. Однако у xml2js было много зависимостей, у которых было много зависимостей, у которых было много зависимостей ... таким образом, применение решения по добавлению определения пакета для каждой зависимости позаботилось об этой проблеме, хотя и очень громоздким способом.

Опять же, благодаря @ tim-perry и @artem, которые помогли с этим.

Смежные вопросы