Kątowy - Jakie jest znaczenie module.id w komponencie?

221

W aplikacji Angular widziałem, że @Componentma właściwość moduleId. Co to znaczy?

A gdy module.idnigdzie 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]
});
Nishchit Dhanani
źródło
7
najlepsze znalezione do tej pory, dla samego schwarty.com/2015/12/22/…
Pardeep Jain

Odpowiedzi:

182

Wersja beta Angulara (od wersji 2-alpha.51) obsługuje względne zasoby komponentów, takie jak templateUrl i styleUrls w @Componentdekoratorze.

module.iddziała podczas korzystania z CommonJS. Nie musisz się martwić, jak to działa.

Pamiętaj : klucz tutaj jest ustawienie moduleId: module.id w dekoratorze @Component. Jeśli nie masz tego, Angular 2 będzie szukał twoich plików na poziomie root.

Źródło z postu Justina Schwartzenbergera , dzięki @Pradeep Jain

Aktualizacja 16 września 2016 r .:

Jeśli używasz WebPACK do wiązania wtedy nie trzeba module.idw dekoratora. Wtyczki Webpack automatycznie obsługują (dodają) module.idw końcowym pakiecie

Nishchit Dhanani
źródło
nie ma za co, proszę spojrzeć na to pytanie, mając nadzieję, że możecie mi pomóc. stackoverflow.com/q/36451917/5043867
Pardeep Jain
29
+1 za odniesienie do webpacka, nie miałem pojęcia, dlaczego rzeczy się psują, kiedy powinny działać, i działać, kiedy powinny się złamać ...
João Mendes
9
nie mogę wymyślić bardziej sprzecznej z intuicją rzeczy do wymyślenia
khusrav,
15
Jak to wyjaśnia, co to jest module.id?
gyozo kudor
1
@gyozokudor Jeśli tego nie masz, to Angular 2 będzie szukał twoich plików na poziomie głównym.
Nishchit Dhanani
89

Aktualizacja dla (2017-03-13) :

Wszystkie wzmianki o moduleID zostały usunięte. Książka kucharska „Ścieżki względne elementów” została usunięta

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: https://angular.io/docs/ts/latest/guide/change-log.html

Definicja:

moduleId?: string

moduleIdparametr w @Componentadnotacji przyjmuje stringwartość, która jest;

Identyfikator modułu zawierającego moduł ”.

CommonJS Wykorzystanie: module.id,

Wykorzystanie SystemJS: __moduleName


Powód użyciamoduleId :

moduleId służy do rozwiązywania ścieżek względnych dla arkuszy stylów i szablonów, jak napisano w dokumentacji.

Identyfikator modułu zawierającego komponent. Potrzebne do rozpoznania względnych adresów URL dla szablonów i stylów. W Dart można to ustalić automatycznie i nie trzeba go ustawiać. W CommonJS zawsze można ustawić wartość module.id.

ref (stary): https://angular.io/docs/js/latest/api/core/index/ComponentMetadata-class.html

możemy określić lokalizacje plików szablonów i plików stylów względem pliku klasy komponentu, po prostu ustawiając właściwość moduleId metadanych @Component

ref: https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html


Przykładowe użycie:

Struktura folderów:

RootFolder
├── index.html
├── config.js
├── app
│   ├── components
│   │   ├── my.component.ts
│   │   ├── my.component.css
│   │   ├── my.component.html


Bez module.id :

@Component({
  selector: 'my-component',
  templateUrl: 'app/components/my.component.html', <- Starts from base path
  styleUrls:  ['app/components/my.component.css'] <- Starts from base path
})

Z module.id :

tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs", <- need to change this if you want to use module.id property
...


@Component({
  moduleId: module.id,
  selector: 'my-component',
  templateUrl: 'my.component.html', <- relative to the components current path
  styleUrls:  ['my.component.css'] <- relative to the components current path
})
eko
źródło
8
Ale jak to działa, gdzie jest odniesienie do module.id
Nishchit Dhanani
1
@NishchitDhanani nie jest to konieczne, ale sugeruję sprawdzenie github.com/angular/angular/issues/6053 mapuje na twoje mapklucze wewnątrz twojej konfiguracji. Jak app.
eko
1
Link echonax do dokumentów obecnie nie działa - mimo że jest to link na stronie składnika Angular.io. Spróbuj: angular.io/docs/js/latest/api/core/index/…
John Pankowicz
1
Wygląda na to, że zapomniałeś podkatalogu „components” katalogu głównego „app” w podejściu bez modułu.id, prawda? Myślę, że powinno to być: templateUrl: 'app/components/my.component.html', styleUrls: ['app/components/my.component.css']
Ilker Cat
23

Jeśli tak typescript error, tylko declarezmienna w twoim pliku.

// app.component.ts
declare var module: {
   id: string;
}
//
@Component({
   moduleId: module.id,    // now it works without annoying Typescript
   ...
})

UPDATE - December 08, 2016

Słowo modulekluczowe jest dostępne w dniu node. Jeśli więc zainstalujesz @types/node, w swoim projekcie będziesz mieć modulesłowo kluczowe automatycznie dostępne w plikach maszynopisu bez potrzeby declare.

npm install -D @types/node

W zależności od konfiguracji może być konieczne dołączenie tego tsconfig.jsondo pliku, aby uzyskać narzędzia :

//tsconfig.json
{
   ...
   "compilerOptions": {
       "types" : ["node"]
   }
   ...
}

// some-component.ts
// now, no need to declare module
@Component({
   moduleId: module.id,    // now it works without annoying Typescript
   ...
})

Powodzenia

Akash
źródło
1
tak dużo! w końcu zacząłem ng build --prod --aotpracować npm install -D @types/nodepo długim
pobawieniu się
jeszcze jedną rzeczą, którą zrobiłem moduleId: 'module.id'(zwróć uwagę na pojedyncze cytaty wokół module.id)
Anand Rockzz,
@AnandRockzz Cieszę się, że ten post był dla Ciebie pomocny. Nie sądzę, że musisz dodać module.idjako ciąg. Jeśli zadziałało, coś wydaje się niepoprawne. Być może będziesz musiał to zbadać dalej.
Akash
3

Oprócz świetnych wyjaśnień echonaxi Nishchit Dhananichcę dodać, że naprawdę nienawidzę populacji składników module.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ś takiego module.idw metadanych komponentów.

Z Dokumentów :

Aplikacje kompilowane w JiT, które używają modułu SystemJSładującego i adresów URL zależnych od komponentu, muszą ustawić @Component.moduleIdwłaściwość na module.id. Obiekt modułu jest niezdefiniowany, gdy uruchomiona zostanie aplikacja skompilowana z użyciem AoT. Aplikacja kończy się niepowodzeniem z błędem odniesienia zerowym, chyba że przypisasz globalną wartość modułu w pliku index.html w następujący sposób:

<script>window.module = 'aot';</script>

Myślę, że posiadanie tej linii w produkcyjnej wersji index.htmlpliku 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.idwiersza)

@Component({      
  selector: 'my-component',
  templateUrl: 'my.component.html', <- relative to the components current path
  styleUrls:  ['my.component.css'] <- relative to the components current path
})

Jednocześnie chciałbym umieszczać style, my.component.csspliki podobne i szablony, takie jak my.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:

{
  "port": 8000,
  "server": ["app", "."]
}

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 .

Jewgienij Bobkin
źródło
3

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ś.

Prasanth Bendra
źródło
1
Dodam to również do mojej odpowiedzi jako wyłączenie odpowiedzialności, dzięki za aktualizację.
eko
1

Wygląda na to, że jeśli używasz „module”: „es6” w tsconfig.json, nie musisz tego używać :)

Steffan
źródło
czy jeśli to zrobimy, nie zostanie przeniesiony do ES6?
Akash
0

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.

Krishna Ganeriwal
źródło
-2

Dodanie moduleId: module.idrozwią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

mast3rd3mon
źródło