[英]Cannot find name module in Angular2 app
I'm using angular-cli for running my typescript powered angular2 app. 我正在使用angular-cli运行我的打字稿驱动的angular2应用程序。 I have an
AppComponent
defined like this: 我有一个像这样定义的
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 can't compile this file, because it complains with an error mentioned in topic of this question in the line moduleId: module.id
. angular-cli无法编译该文件,因为它在
moduleId: module.id
行中抱怨此问题的主题中提到的错误。
My tsconfig.json
file is defined as below: 我的
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"
]
}
To be able module.id
, your project must be a commonjs module, ie the module
attribute set to commonjs
in the tsconfig.json file. 为了能够
module.id
,您的项目必须是commonjs模块,即在tsconfig.json文件commonjs
module
属性设置为commonjs
。 Is it the case: 是这样吗?
{
"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"
]
}
A possible work-around could be to add a app.d.ts file like this 可能的解决方法是像这样添加一个app.d.ts文件
https://github.com/johnpapa/pbp-a2-ward/blob/010523471e70677ba2493eb615c8e6316e3d4ee8/app/app.d.ts https://github.com/johnpapa/pbp-a2-ward/blob/010523471e70677ba2493eb615c8e6316e3d4ee8/app/app.d.ts
Since angular migrated to using webpack there is no longer a need to declare moduleId
as webpack plugins auto handle (add it) module.id
in the final bundle. 由于angular已迁移到使用webpack,因此不再需要将
moduleId
声明为webpack插件自动处理(添加)最终包中的module.id
。
As of 13.03.2017 Angular has removed all references to moduleId
as it is now deprecated due to the inclusion of webpack. 自2017年3月13日起, Angular删除了对
moduleId
所有引用,因为由于包含webpack而已弃用它。
We added a new SystemJS plugin (systemjs-angular-loader.js) to our recommended SystemJS configuration.
我们在建议的SystemJS配置中添加了一个新的SystemJS插件(systemjs-angular-loader.js)。 This plugin dynamically converts "component-relative" paths in templateUrl and styleUrls to "absolute paths" for you.
该插件为您动态地将templateUrl和styleUrls中的“相对于组件”的路径转换为“绝对路径”。
We strongly encourage you to only write component-relative paths.
我们强烈建议您仅编写组件相对路径。 That is the only form of URL discussed in these docs.
这是这些文档中讨论的URL的唯一形式。 You no longer need to write @Component({ moduleId: module.id }), nor should you.
您不再需要编写@Component({moduleId:module.id}),也不需要。
I had the same problem today when creating a first component in a feature folder using the angular-cli. 今天,在使用angular-cli在特征文件夹中创建第一个组件时,我遇到了同样的问题。 As Maxime said, you can do this without a module id.
正如Maxime所说,您可以在没有模块ID的情况下执行此操作。 But you have to use a relative path for your template and your styles, like inside the initially generated app.component:
但是您必须为模板和样式使用相对路径,例如在最初生成的app.component内部:
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.