Angular2 & TypeScript импорт node_modules

У меня было очень простое приложение "hello world" Angular2. Я также сделал явно необоснованное решение работать с разными структурами каталогов между моим проектом dev и конечной папкой развертывания на моем сервере spring.

Из-за этой разницы у меня возникла проблема с импортом TypeScript, и эта строка закончила выпуск 404 ошибок (не удалось найти /angular2/​​core library), когда я попытался открыть фактическое приложение в своем браузере

import {Component, View} from 'angular2/core';

Короче говоря, я закончил тем, что добавил обратно папку /app, чтобы все работало, но в итоге я изменил свои инструкции импорта следующим образом:

import {Component, View} from '../node_modules/angular2/core';

Это, однако, оказалось причиной какого-то странного поведения. По какой-то причине указание ../node_modules в путях библиотеки приводит к тому, что JS фактически загружает файлы ALL Angular2 с нуля, используя вызовы ajax для извлечения каждого отдельного файла из папки npm_modules/angular2/, даже если это было частью моего заголовка HTML

<script src="/node_modules/angular2/bundles/angular2.dev.js"></script>

Когда я наконец понял, что происходит, я вернул оператор импорта обратно в

import {Component, View} from 'angular2/core';

и все это сработало. Angular2 теперь полностью загружен из тега script выше и не было файлов, загружаемых дополнительными вызовами ajax.

Может кто-нибудь объяснить, что это вызывает? Я предполагаю, что это нормальное поведение, но я не понимаю, как работает импорт, и почему указание более подробного пути делает такую ​​разницу.

Ответы

Ответ 1

Правила import TypeScript соответствуют тому же соглашению, что и node.js. Если импорт начинается с точки:

import {Something} from './some/path';

Затем он рассматривается как относительный путь из файла, объявляющего импорт. Если, однако, это абсолютный путь:

import {Component} from 'angular2/core';

Тогда предполагается, что это внешний модуль, поэтому TypeScript будет перемещаться по дереву, ищущему файл package.json, затем перейдите в папку node_modules и найдите папку с тем же именем, что и импорт, затем просматривает package.json модуля для основного файла .d.ts или .ts, а затем загружает его или будет искать файл с тем же именем, что и указанный, или index.d.ts или index.ts.

Ничего себе, кажется сложным, когда выписано, и там есть некоторые исключения... Но в целом, если вы работали с node.js до этого, это должно вести себя точно так же.

Следует отметить, что существует опция компилятора TypeScript, которая должна быть настроена для ввода разрешений для работы таким образом.

в tsconfig.json

"moduleResolution": "node"

Теперь вторая часть вашего вопроса заключалась в том, как это загружается без использования вызовов ajax. Это особенность System.js. Тег script, загруженный в файл index.html, импортирует пакет, который регистрирует пакет angular2 с помощью System. Как только это произошло, система знает об этих файлах и правильно назначает их своим ссылкам. Это довольно глубокая тема, но много информации можно найти либо в README systemjs, либо systemjs-builder.