Angular2.0 w podkatalogu, SystemJS może importować komponenty kątowe

Question

Zaczynam od Angular2.0. Śledziłem 5 minutowy start i wszystko działa dobrze, chociaż używam grunt do kompilacji mojego Maszynopisu i jakiegoś Sassa itp.

Mam tylko jeden problem, którego nie mogę rozwiązać samodzielnie. Chcę przenieść wszystkie pliki publiczne (wygenerowane Javascript i moduły węzłów produkcyjnych do podkatalogu.Muszę to mieć, ponieważ uruchamiam różne aplikacje na tym samym domenie.Funkcja zależy od typu użytkownika, który jest zalogowany. (Backend jest napisany z phalcon)

to mój folder publiczny (root serwera WWW za)

więc cały kątowe aplikacje powinny żyją wewnątrz katalogu "talent".

W "index.html" zawiera następujące:

<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 jest w stanie załadować moje app.js złożyć poprawnie, ale potem jakoś wpasować importować angular2:

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

Odpowiadająca Javascript:

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

Wysyła to żądanie do http://example.dev/talent/angular2/angular2 powodując błąd 404.

Po przeniesieniu folderu node_modules i folderu aplikacji do katalogu głównego serwera WWW i usunięcia baseURL: '/talent' działa on poprawnie.

Oto wnioski zarówno dla roztworu roboczego (wszystko w root) i ta część nie działa (wszystko pod/talentu)

pracy:

Nie działa:

Czy możesz mi pomóc, aby to zadziałało?

Answer 1

można ustawić ścieżki dla każdej biblioteki:

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

to działa dla Ciebie?

Answer 2

'angular2/angular2' została przestarzała. Twój kod powinien odnosić się do 'angular2/core' lub odpowiedniego modułu dla twojego importu.

Nie powinieneś również określać ścieżki importu kątowego2 w twoim System.config, ponieważ System załaduje je ze znacznika <script>, który posiadasz w kodzie HTML.

Jesteś najprawdopodobniej otrzymaniu błąd 404, ponieważ plik angular2.dev.js się ładuje 'angular2/core', 'angular2/common', 'angular2/platform/browser', etc ... i jesteś przedstawieniu 'angular2/angular2' który nie jest zarejestrowany i do nich SystemJS próbuje wyjść i znaleźć go.

Zmień również swój numer import {...} from 'angular2/angular2' na prawidłowy import modułu. Można je znaleźć na stronie podglądu interfejsu API w witrynie angular.io, lub mam nadzieję, że IDE znajdzie ją dla Ciebie.

Answer 3

nie wiem, która wersja Angular2 użyć ale teraz z wersji beta należy używać tych Angular2 moduły:

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

Następnie trzeba skonfigurować SystemJS jak opisano poniżej:

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

Przy tej konfiguracji, podczas próby załadowania modułu app/boot, SystemJS załaduje wcześniej skompilowany plik talent/app/boot.js z pliku talent/app/boot.ts. To zachowanie dotyczy wszystkich elementów w module app, ale nie innych.

Moduły takie jak angular2/* można znaleźć z plików talent/node_modules/angular2/bundles/[something].js, które zawierałeś przy użyciu tagów <script>.

Zrobiłem kilka testów i ta konfiguracja działa dla mnie ;-)

Thierry

Answer 4

Gdyby dokładnie ten sam problem, i tylko zorientowaliśmy się po kilku godzinach. Baza konfiguracji baseURL musi być ustawiona PRZED załadowaniem pliku angular2.dev.js. Wynika to z faktu, że wywołania System.register muszą być świadome bazy danych w momencie rejestracji.

np.

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

Sprytniejszym sposobem jest po prostu dodanie System.config ({baseURL: '/ talent'}) na samo dno pliku system.src.js.

Answer 5

Natknąłem się na to pytanie podczas próby przejścia ze środowiska lokalnego (dev) na serwer hostowany (CentOS), w którym rozmieszczone adresy URL różniły się od mojego hosta lokalnego. Jeśli jesteś w takiej sytuacji, a zaakceptowana odpowiedź nie rozwiązuje problemu (importowałem już zaktualizowany import z Angular2 Beta 15) i używając baseURL messes inne rzeczy (tak jak w mojej sytuacji), użyj:

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

widziałem to tu i pracował dla mnie (mimo że początkowo odpowiadając na pytanie środowisku MAMP): Troubles with importing classes from Angular 2 modules with Typescript 1.7

Answer 6

oto co pracował dla nas:

sprawiają, że punkt bazowy ref do podkatalogu zawierający projekt kątowy. Zapewni to, że zostaną znalezione wszystkie zależności node_module, itp. Skonfiguruj PathLocationStrategy z innym APP_BASE_HREF, aby tryb HTML5 nadal działał dla rzeczywistej aplikacji kątowej.

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

Answer 7

base href Większość aplikacji routingu należy dodać element do index.html jako pierwsze dziecko w tagu powiedzieć router, jak tworzyć adresy URL nawigacji.

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