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文件中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年中期更新

由于角度已迁移到使用webpack，因此不再需要声明moduleId，因为webpack插件会在最终捆绑中自动处理（添加）module.id。

从{{3}开始，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'],

在Angular2应用程序中找不到名称模块

4 个答案:

2017年中期更新