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?

score 0 · Answer 1 · answered Aug 25 '16 at 21:14

0

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

 declare var module: { id: string };

Hope this helps!!

answered Aug 25 '16 at 21:14

Madhu Ranjan

15,386
7
54
64

Thank you Madhu, it did resolve the issue and I have seen it on other posts as well, but I was wondering is it the best way to fix this error? – Naveed Ahmed Aug 25 '16 at 21:54
yes, this is required by the Typescript compiler, either you provide like the answer or you may include type definition file for SystemJS. But both are just a way to say Typescript compiler that hey look, I know what module and module.id is and it will be available at the runtime. Cheers!! – Madhu Ranjan Aug 25 '16 at 21:58

score 0 · Answer 2 · answered Jan 12 '17 at 21:08

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.

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

2 Answers2