W aplikacji Angular widziałem, że @Component
ma właściwość moduleId
. Co to znaczy?
A gdy module.id
nigdzie nie jest zdefiniowane, aplikacja nadal działa. Jak to może nadal działać?
@Component({
moduleId: module.id,
selector: 'ng-app',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
directives: [AppComponent]
});
angular
systemjs
angular2-components
Nishchit Dhanani
źródło
źródło
Odpowiedzi:
Wersja beta Angulara (od wersji 2-alpha.51) obsługuje względne zasoby komponentów, takie jak templateUrl i styleUrls w
@Component
dekoratorze.module.id
działa podczas korzystania z CommonJS. Nie musisz się martwić, jak to działa.Źródło z postu Justina Schwartzenbergera , dzięki @Pradeep Jain
Aktualizacja 16 września 2016 r .:
źródło
Aktualizacja dla (2017-03-13) :
Źródło: https://angular.io/docs/ts/latest/guide/change-log.html
Definicja:
moduleId
parametr w@Component
adnotacji przyjmujestring
wartość, która jest;„ Identyfikator modułu zawierającego moduł ”.
CommonJS Wykorzystanie:
module.id
,Wykorzystanie SystemJS:
__moduleName
Powód użycia
moduleId
:moduleId
służy do rozwiązywania ścieżek względnych dla arkuszy stylów i szablonów, jak napisano w dokumentacji.ref (stary): https://angular.io/docs/js/latest/api/core/index/ComponentMetadata-class.html
ref: https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html
Przykładowe użycie:
Struktura folderów:
Bez module.id :
Z module.id :
tsconfig.json:
źródło
map
klucze wewnątrz twojej konfiguracji. Jakapp
.templateUrl: 'app/components/my.component.html', styleUrls: ['app/components/my.component.css']
Jeśli tak
typescript error
, tylkodeclare
zmienna w twoim pliku.UPDATE - December 08, 2016
Słowo
module
kluczowe jest dostępne w dniunode
. Jeśli więc zainstalujesz@types/node
, w swoim projekcie będziesz miećmodule
słowo kluczowe automatycznie dostępne w plikach maszynopisu bez potrzebydeclare
.npm install -D @types/node
W zależności od konfiguracji może być konieczne dołączenie tego
tsconfig.json
do pliku, aby uzyskać narzędzia :Powodzenia
źródło
ng build --prod --aot
pracowaćnpm install -D @types/node
po długimmoduleId: 'module.id'
(zwróć uwagę na pojedyncze cytaty wokół module.id)module.id
jako ciąg. Jeśli zadziałało, coś wydaje się niepoprawne. Być może będziesz musiał to zbadać dalej.Oprócz świetnych wyjaśnień
echonax
iNishchit Dhanani
chcę dodać, że naprawdę nienawidzę populacji składnikówmodule.id
. Zwłaszcza, jeśli masz wsparcie dla kompilacji AoT (Ahead-of-Time) i dla realistycznego projektu jest to cel, do którego powinieneś dążyć, nie ma miejsca na coś takiegomodule.id
w metadanych komponentów.Z Dokumentów :
Myślę, że posiadanie tej linii w produkcyjnej wersji
index.html
pliku jest absolutnie niedopuszczalne!Dlatego celem jest posiadanie kompilacji JiT (Just-in-Time) do programowania i obsługa AoT w produkcji z następującą definicją metadanych komponentów: (bez
moduleId: module.id
wiersza)Jednocześnie chciałbym umieszczać style,
my.component.css
pliki podobne i szablony, takie jakmy.component.html
względemmy.component.ts
ścieżek plików składowych .Aby to wszystko osiągnąć, rozwiązaniem, którego używam, jest hostowanie serwera WWW (serwer Lite lub synchronizacja przeglądarki) podczas fazy programowania z wielu źródeł katalogów!
bs-config.json
:Proszę wziąć szczegóły tej odpowiedzi dla mnie.
Przykładowy projekt szybkiego startu kątowego 2, który opiera się na tym podejściu, znajduje się tutaj .
źródło
Zgodnie z dokumentem Angular nie powinieneś używać @Component ({moduleId: module.id})
Proszę sprawdzić: https://angular.io/docs/ts/latest/guide/change-log.html
Oto odpowiedni tekst z tej strony:
Wszystkie wzmianki o moduleID zostały usunięte. Książka kucharska „Ścieżki względne komponentów” usunięta (13.03.2017)
Dodaliśmy nową wtyczkę SystemJS (
systemjs-angular-loader.js
) do naszej zalecanej konfiguracji SystemJS. Ta wtyczka dynamicznie konwertuje ścieżki „zależne od komponentu” w templateUrl i styleUrls na „ścieżki bezwzględne”.Gorąco zachęcamy do pisania tylko ścieżek względnych komponentów. To jedyna forma adresu URL omówiona w tych dokumentach. Nie musisz już pisać
@Component({ moduleId: module.id })
, nie powinieneś.źródło
Wygląda na to, że jeśli używasz „module”: „es6” w tsconfig.json, nie musisz tego używać :)
źródło
Ta wartość moduleId jest używana przez procesy odbicia kątowego i komponent metadata_resolver do oceny w pełni kwalifikowanej ścieżki komponentu przed jego zbudowaniem.
źródło
Dodanie
moduleId: module.id
rozwiązuje kilka problemów, które mogą wystąpić podczas budowania aplikacji natywnych i kątowych aplikacji internetowych. Najlepszą praktyką jest używanie go.Umożliwia także komponentowi wyszukiwanie plików w bieżącym katalogu zamiast plików z górnego folderu
źródło