在Angular2應用中找不到名稱模塊

Question

我正在使用angular-cli運行我的打字稿驅動的angular2應用程序。 我有一個像這樣定義的AppComponent ：

import { Component } from '@angular/core';
import { ServersListComponent } from './servers-list/servers-list.component';

@Component({
    moduleId: module.id,
    selector: 'app',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    directives: []
})
export class AppComponent {

}

angular-cli無法編譯該文件，因為它在moduleId: module.id行中抱怨此問題的主題中提到的錯誤。

我的tsconfig.json文件定義如下：

{
    "compileOnSave": false,
    "compilerOptions": {
        "declaration": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "mapRoot": "",
        "module": "commonjs",
        "moduleResolution": "node",
        "noEmitOnError": true,
        "noImplicitAny": false,
        "outDir": "../dist/",
        "rootDir": ".",
        "sourceMap": true,
        "target": "es5",
        "inlineSources": true
    },
    "exclude": [
        "node_modules",
        "typings/main",
        "typings/main.d.ts"
    ]
}

Answer 1

為了能夠module.id ，您的項目必須是commonjs模塊，即在tsconfig.json文件commonjs module屬性設置為commonjs 。 是這樣嗎？

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs", // <-----
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

Answer 2

可能的解決方法是像這樣添加一個app.d.ts文件

https://github.com/johnpapa/pbp-a2-ward/blob/010523471e70677ba2493eb615c8e6316e3d4ee8/app/app.d.ts

Answer 3

2017年中更新

由於angular已遷移到使用webpack，因此不再需要將moduleId聲明為webpack插件自動處理（添加）最終包中的module.id 。

自2017年3月13日起， Angular刪除了對moduleId所有引用，因為由於包含webpack而已棄用它。

我們在建議的SystemJS配置中添加了一個新的SystemJS插件（systemjs-angular-loader.js）。 該插件為您動態地將templateUrl和styleUrls中的“相對於組件”的路徑轉換為“絕對路徑”。

我們強烈建議您僅編寫組件相對路徑。 這是這些文檔中討論的URL的唯一形式。 您不再需要編寫@Component（{moduleId：module.id}），也不需要。

Answer 4

今天，在使用angular-cli在特征文件夾中創建第一個組件時，我遇到了同樣的問題。 正如Maxime所說，您可以在沒有模塊ID的情況下執行此操作。 但是您必須為模板和樣式使用相對路徑，例如在最初生成的app.component內部：

templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],