There seems to be alot of questions and answers about this problem but so far most answers I have found have been for Windows / Visual Studio. I'm using OSX and IntelliJ for a Angular2 with TypeScript project I am working on and I am currently getting warnings / errors (those little red squiggly lines) under the "from" locations when I import from the angular2 library, for example in my app.ts I have:

/// <reference path="node_modules/angular2/ts/typings/node/node.d.ts"/>
/// <reference path="node_modules/angular2/typings/browser.d.ts"/>

import { bootstrap } from "angular2/platform/browser";
import { Component } from "angular2/core";
import { ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteConfig} from 'angular2/router';

All 3 import statements have warnings under the from locations (where we have "angular2/...."). I tried to correct this by editiing the typescript-compiler.xml in Intellij:

<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
  <component name="TypeScriptCompiler">
    <option name="isCompilerEnabled" value="true" />
    <option name="typeScriptServiceDirectory" value="$USER_HOME$/node_modules/typescript/bin" />
    <option name="typeScriptCompilerParams" value="-m amd -t ES5" />
    <option name="versionType" value="SERVICE_DIRECTORY" />
  </component>
</project>

All other modules I import are fine (like the components I write myself) but those I import from Angular2 have the warning? Has anyone managed to over come this error / problem as I've been trying for a while now to remove the problem. I currently have Version 1.7.5 of TypeScript installed.

Please note that I have no typings.json file or npm typings installed in my dev-dependancies.

This is my tsconfig.json file:

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "files": [
    // there is an array of files here
  ],
  "filesGlob": [
    "app/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "atom": {
    "rewriteTsconfig": true
  }
}

and this is my tslint.json file:

{
  "rules": {
   "align": [true,
        "parameters",
        "arguments",
        "statements"],
    "class-name": true,
    "comment-format": [true, "check-space"],
    "curly": true,
    "eofline": true,
    "forin": true,
    "indent": [true, "spaces"],
    "interface-name": true,
    "label-position": true,
    "label-undefined": true,
    "jsdoc-format": true,
    "max-line-length": [true, 80],
    "member-ordering": [true,
        "public-before-private",
        "static-before-instance",
        "variables-before-functions"
    ],
    "no-arg": true,
    "no-bitwise": true,
    "no-console": [true,
      "debug",
      "info",
      "time",
      "timeEnd",
      "trace"
    ],
    "no-construct": true,
    "no-debugger": true,
    "no-duplicate-key": true,
    "no-duplicate-variable": true,
    "no-empty": true,
    "no-eval": true,
    "no-require-imports": true,
    "no-shadowed-variable": true,
    "no-string-literal": true,
    "no-switch-case-fall-through": true,
    "no-trailing-comma": true,
    "no-trailing-whitespace": true,
    "no-unused-expression": true,
    "no-unused-variable": true,
    "no-unreachable": true,
    "no-use-before-declare": true,
    "no-var-keyword": true,
    "one-line": [true,
      "check-open-brace",
      "check-catch",
      "check-else",
      "check-whitespace"
    ],
    "quotemark": [true, "single"],
    "radix": true,
    "semicolon": true,
    "sort-object-literal-keys": false,
    "triple-equals": [true, "allow-null-check"],
    "typedef": [true,
        "call-signature",
        "parameter",
        "property-declaration",
        "variable-declaration",
        "member-variable-declaration"
    ],
    "typedef-whitespace": [true, {
        "call-signature": "nospace",
        "index-signature": "nospace",
        "parameter": "nospace",
        "property-declaration": "nospace",
        "variable-declaration": "nospace"
    }],
    "variable-name": [true,
      "allow-leading-underscore"],
    "whitespace": [true,
      "check-branch",
      "check-decl",
      "check-operator",
      "check-separator",
      "check-type"
    ]
  }
}
share|improve this question
    
Which version of Angular 2 did you use? – Thomas May 3 at 13:50
    
"angular2": "2.0.0-beta.16" – Mike Sav May 3 at 13:51
    
Upgrading to beta.17 makes no difference – Mike Sav May 3 at 14:01

For me it was fixed by using relative paths, i.e. (depending on the location of your .ts file):

///<reference path="../../node_modules/angular2/typings/browser.d.ts"/>

Also, in your Intellij Settings make sure to enable "Use tsconfig.json". My settings file looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
  <component name="TypeScriptCompiler">
    <option name="isCompilerEnabled" value="true" />
    <option name="typeScriptCompilerParams" value="--module &quot;amd&quot; --target &quot;ES5&quot; --experimentalDecorators" />
    <option name="useConfig" value="true" />
  </component>
</project>

Please also note thate since a few hours angular2 rc.1 was released (https://github.com/angular/angular/blob/3229bf16656749427d1def38ced0e1d1d2ae1fa4/CHANGELOG.md)

This introduces some breaking changes regarding how to import modules (e.g. "angular/core" gets "@angular/core").

You don't need the ///<reference path=".."/> stuff anymore if you are using the rc version. System.js automatically finds the corresponding index.d.ts in the node_modules directory (if set up correctly: https://github.com/angular/quickstart/blob/master/systemjs.config.js)

I also had to change the target to ES6 otherwise I got error messages that e.g. Map or Promise was undefined. If you still want to keep the ES5 target you need to include es6-shim (.js and .d.ts)

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.