Angular2.0 в подкаталоге SystemJS cant импорт angular компонентов

Я начинаю с Angular2.0. Я слежу за 5 Min Quickstart, и все работает нормально, хотя я использую grunt для компиляции моих Typescript и некоторых Sass и т.д.

У меня только одна проблема, которую я не могу решить самостоятельно. Я хочу переместить все общедоступные файлы (сгенерированные модули Javascript и production node) в подкаталог. Мне нужно это, потому что я запускаю разные приложения, чтобы удалить один и тот же domian. Интерфейс зависит от типа пользователя, который вошел в систему. записывается с помощью phalcon)

Это моя общая папка (корневой веб-сервер)

общая папка

Таким образом, все приложения Angular должны жить внутри каталога "талант".

"index.html" содержит следующее:

<script type="text/javascript" src="/talent/node_modules/systemjs/dist/system.src.js"></script>
<script type="text/javascript" src="/talent/node_modules/angular2/bundles/angular2.dev.js"></script>

<script>
    System.config({
        baseURL: '/talent',
        packages: {'app': {defaultExtension: 'js',}}
    });
    System.import('app/app');
</script>

SystemJs может правильно загрузить файл app.js, но затем попытается импортировать angular2:

import {bootstrap, Component} from 'angular2/angular2';

Соответствующий Javascript:

var angular2_1 = require('angular2/angular2');

Отправляет запрос на http://example.dev/talent/angular2/angular2, что приводит к ошибке 404.

Когда я перемещаю папку node_modules и папку приложения в корневой каталог веб-сервера и удаляю baseURL: '/talent', она работает нормально.

Вот запросы, сделанные как для рабочего решения (все в корне), так и для нерабочей части (все под/талант)

Рабочий: Рабочий пример

Не работает: не работает

Можете ли вы помочь мне заставить это работать?

Ответы

Ответ 1

Если бы эта точно такая же проблема, и просто вычислил ее через несколько часов. Системная конфигурация baseURL должна быть установлена ​​до загрузки angular2.dev.js. Это связано с тем, что вызовы System.register должны быть осведомлены о baseURL во время регистрации.

например.

System.config({baseURL: '/talent'});

Более чистый способ - просто добавить System.config({baseURL: '/talent'}) в самую нижнюю часть файла system.src.js.

Ответ 2

Вы можете установить пути для каждой библиотеки:

System.paths = {
    'angular2/*': '/talent/node_modules/angular2/*',
    'app/*': '/talent/app/*'
};

Это работает для вас?

Ответ 3

'angular2/angular2' устарел. Ваш код должен ссылаться на 'angular2/core' или соответствующий модуль для вашего импорта.

Вам также не нужно указывать путь для импорта angular2 в System.config, поскольку система загрузит их из тега <script>, который у вас есть в HTML.

Скорее всего, вы получаете ошибку 404, потому что файл angular2.dev.js загружается 'angular2/core', 'angular2/common', 'angular2/platform/browser' и т.д.... и вы ссылаетесь на 'angular2/angular2', который не регистрируется, и поэтому SystemJS пытается выйти и найти его.

Измените все ваши import {...} from 'angular2/angular2' на правильный импорт модуля. Вы можете найти их на странице предварительного просмотра API angular.io, или, надеюсь, ваша IDE найдет его для вас.

Ответ 4

Я не знаю, какую версию Angular2 вы используете, но теперь с бета-версиями вы должны использовать эти модули Angular2:

import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';

Затем вам нужно настроить SystemJS, как описано ниже:

<script>
  System.config({
    map: {
      app: 'talent/app'
    },
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
  System.import('app/boot')
        .then(null, console.error.bind(console));
</script>

В этой конфигурации при попытке загрузить модуль app/boot SystemJS загрузит файл talent/app/boot.js, который был скомпилирован ранее из файла talent/app/boot.ts. Это относится ко всем элементам модуля app, но не к другим.

Модули типа angular2/* будут найдены из файлов talent/node_modules/angular2/bundles/[something].js, которые вы использовали с тегами <script>.

Я сделал несколько тестов, и эта конфигурация работает для меня; -)

Тьерри

Ответ 5

Я наткнулся на этот вопрос, пытаясь перейти от локальной (dev) среды к размещенному серверу (CentOS), где развернутые URL-адреса были разными для моего локального хоста. Если вы находитесь в этой ситуации, и принятый ответ не решает вашу проблему (я уже импортировал обновленный импорт с помощью Angular2 Beta 15), и используя baseURL messes другие вещи (как это было в моей ситуации), используйте:

map: {
    app: 'path/to/app/folder'
},

Я видел это здесь, и это сработало для меня (хотя оно первоначально отвечало на вопрос о среде MAMP): Проблемы с импортированием классов из Angular 2 модулей с Typescript 1.7

Ответ 6

Вот что сработало для нас:

Сделайте базовую точку ref в подкаталоге, содержащем проект angular. Это обеспечит обнаружение всех зависимостей node_module и т.д. Настройте PathLocationStrategy с другим APP_BASE_HREF, чтобы режим html5 по-прежнему работал для фактического приложения angular.

bootstrap(AppComponent, [..... bind(APP_BASE_HREF).toValue("/yardmap/planning")

ref: https://angular.io/docs/ts/latest/api/common/index/APP_BASE_HREF-let.html

ref: https://angular.io/docs/ts/latest/guide/router.html

Ответ 7

base href Большинство приложений маршрутизации должны добавить элемент в index.html в качестве первого дочернего элемента в теге, чтобы сообщить маршрутизатору, как составлять URL-адреса навигации.

<!DOCTYPE html>
<html>
 
<head lang="en">
    <base href="/talent/">
    ......
</head>