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]
});

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

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

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

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
})

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

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 .

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

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

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.

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