moduleId unresolved variable in Angular2 components

Hi I, like to use relative path in Angular2 components. The proposed solution for this is specifying moduleId in the component annotation e.g.

@Component({
moduleId: module.id,
...
})

I specified CommonJs in the compiler options of my tsconfig.json

{
"compilerOptions": {
"module": "commonjs",
"moduleResolution": "node",
"target": "es5",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
}

Unfortunatly the variable "module" cannot be resolved. Is there a way to use moduleId with the internal compiler?

WebStorm 2016.2, Angular 2.0.0-rc4

5 comments
Comment actions Permalink

What do you mean by internal compiler? What error do you see exactly? Please attach a screenshot

1
Comment actions Permalink

With internal compiler I mean the WebStorm setting:
Languages & Frameworks > TypeScript > Compiler > Enable TypeScript Compiler

 

 

Btw. I'm referring to this document https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html 
quote >>
But if we follow the recommended guidelines and we write modules in commonjs format and we use a module loader that plays nice, then we — the developers of the application — know that the semi-global module.id variable is available and contains the absolute URL of the component class module file.
That knowledge enables us to tell Angular where the component file is by setting the moduleId:
<<

0
Comment actions Permalink

Thanks for your help.

I used the solution from the second link and put the module declaration in a file I called module.d.ts into my typing directory.

 

P.S. My typings.json already contained the ambientDependencies for node as proposed in the first link, but that did not work for me.

0
Comment actions Permalink

The solution in the second option will work because you're rewriting the declaration that is missing. You're best off figuring out why Webstorm doesn't consider the the Node declaration file part of the scope of your project in the first place otherwise you'll have to rewrite declarations for all of Node's feature. Check the following:

  • In Webstorm's Typescript settings check the "Scope" includes any declaration files you have manually installed.
  • If you're using Typings or Typescript 2.x Types check you have you tsconfig.json file setup correctly and within Webstorm's Typescript settings make sure you have selected "Use tsconfig.json".
0

Please sign in to leave a comment.