Aktualizacja dla (2017-03-13):

Usunięto wszystkie wzmianki o moduleId. "Component relative paths" Cookbook deleted

Dodaliśmy nową wtyczkę SystemJS (systemjs-angular-loader.js) do zalecanej przez nas konfiguracji SystemJS. Ta wtyczka dynamicznie konwertuje ścieżki" component-relative "w templateUrl i styleUrls na" ścieżki absolutne".

Gorąco zachęcamy do Pisania tylko ścieżek względnych komponentów. To jest jedyna forma URL omówione w tych dokumentach. Nie musisz już pisać @Component({ moduleId: module.id }), ani nie powinieneś.

Źródło: https://angular.io/docs/ts/latest/guide/change-log.html

Definicja:

moduleId?: string

moduleId parametr wewnątrz adnotacji @Component przyjmuje wartość string, która jest;

"id modułu, który zawiera komponent."

Powszechne użycie js: module.id,

Użycie SystemJS: __moduleName

moduleId służy do rozwiązywania ścieżek względnych arkuszy stylów i szablonów zgodnie z Instrukcją w dokumentacji.

Identyfikator modułu, który zawiera komponent. Potrzebne, aby móc rozwiązać względne adresy URL dla szablonów i stylów. W Dart można to określić automatycznie i nie trzeba go ustawiać. W CommonJS zawsze można to ustawić na 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 stylów względem pliku klasy komponentu po prostu ustawiając właściwość moduleId metadanych @ komponentu

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 otrzymasz typescript error, po prostu declare zmienną 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 kluczowe module jest dostępne na node. Więc jeśli zainstalujesz @types/node, w Twoim projekcie, będziesz miał module słowo kluczowe automatycznie dostępne w plikach maszynopisu bez potrzeby declare.

npm install -D @types/node

W zależności od konfiguracji, możesz być może musisz to uwzględnić w pliku tsconfig.json, 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 wielkich wyjaśnień z echonax i Nishchit Dhanani chcę dodać, że naprawdę nienawidzę populacji składników z module.id. Szczególnie, jeśli masz wsparcie dla (Ahead-of-Time) AOT-compilation i dla realistycznego projektu to jest to, do czego powinieneś dążyć, nie ma miejsca na coś takiego jak module.id w metadanych komponentów.

Z Docs :

Skompilowane aplikacje JIT, które używają adresów URL SystemJS loader i component-relative musi ustawić właściwość @Component.moduleId na module.id. Obiekt modułu jest niezdefiniowany, gdy uruchomiona jest aplikacja skompilowana przez AOT. Aplikacja zawiedzie Z null błąd odniesienia, chyba przypisać globalną wartość modułu w indeksie.html jak ten:

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

Myślę, że posiadanie tej linii w wersji produkcyjnej pliku index.html jest absolutnie niedopuszczalne!

Dlatego celem jest posiadanie (Just-In-Time) kompilacji JiT dla rozwoju i wsparcia AOT dla produkcji z następującymi definicja metadanych składowych: (bez linii moduleId: module.id)

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

W tym samym czasie chciałbym umieścić style, jak my.component.css i pliki szablonów, jak my.component.html względne do komponentu my.component.ts ścieżki plików.

Aby to wszystko osiągnąć, rozwiązaniem, którego używam, jest hostowanie serwera www (lite-server lub browser-sync) w fazie rozwoju z wielu źródeł katalogów!

bs-config.json:

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

Proszę o odpowiedź dla mnie szczegóły.

Przykładowy projekt angular 2 quick start, który opiera się na tym podejściu jest hostowany tutaj .

Zgodnie z dokumentem Angular, nie powinieneś używać @ Component ({moduleId: module.id })

Proszę ref: https://angular.io/docs/ts/latest/guide/change-log.html

Oto odpowiedni tekst z tej strony:

Usunięto wszystkie wzmianki o moduleId. Książka kucharska" ścieżki względne komponentu " usunięta (2017-03-13)

Dodaliśmy nową wtyczkę SystemJS (systemjs-angular-loader.js) do naszej zalecanej konfiguracji SystemJS. Ta wtyczka dynamicznie konwertuje ścieżki "komponentowo-względne" w templateUrl i styleUrls do "ścieżek absolutnych" dla Ciebie.

Gorąco zachęcamy do Pisania tylko ścieżek względnych komponentów. Jest to jedyna forma adresu URL omawiana w tych dokumentach. Nie musisz już pisać @Component({ moduleId: module.id }), ani nie powinieneś.

Wygląda tak, 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 zbudowaniem komponentu.

Dodanie moduleId: module.id rozwiązuje kilka problemów, które mogą wystąpić podczas tworzenia aplikacji natywnych i aplikacji internetowych angular. To najlepsza praktyka, aby go używać.

Pozwala również komponentowi szukać plików w bieżącym katalogu zamiast w górnym folderze