Angular2 Component Relative Paths Visual Studio 2015 module.id error - Cannot find name 'module'

Question

I am following the Component Relative Paths for templates and styles guide available at:

https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html

The guide suggests that if we build our application as commonjs modules and load those modules with a suitable package loader such as systemjs we can specify template and style locations relative to their component class file.

All we need to do is put component template and component-specific style files as siblings of their companion component class files. Having adopted this file structure convention, we can specify locations of the template and style files relative to the component class file simply by setting the moduleId property of the @Component metadata like this

@Component({
  moduleId: module.id,
  selector: 'relative-path',
  templateUrl: 'some.component.html',
  styleUrls:  ['some.component.css']
})

I am using Visual Studio 2015 TypeScript 2.0 Beta and below is my tsconfig file:

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

But when I try to compile my project it doesn't recognize module.id in @Component metadata and throws the error:

Severity    Code    Description Project File    Line    Suppression State
Error       Build:Cannot find name 'module'.

Can anyone please guide how to fix this?

Answer 1

you may fix it by including below in your typings.d.ts file,

 declare var module: { id: string };

Hope this helps!!

Answer 2

The previous suggested answer works: declare var module: { id: string };

It shouldn't be necessary. That and your tsconfig suggest that you're using old configuration. We stopped using typings a few months ago in favor of having npm load them. You should see something like this in your package.json

"devDependencies": { "@types/angular": "^1.5.16", "@types/angular-animate": "^1.5.5", "@types/angular-cookies": "^1.4.2", "@types/angular-mocks": "^1.5.5", "@types/angular-resource": "^1.5.6", "@types/angular-route": "^1.3.2", "@types/angular-sanitize": "^1.3.3", "@types/jasmine": "~2.5.36", "@types/node": "^6.0.45", ... It's also important to know if you are using webpack or systemjs. I'll explain later if that is an issue.