Angular2智能配置错误。找不到模块“ @ angular / core”

Question

I am new to Angular2. I am following the Tutorial Angular2 by Example . This is the first simple tutorial called guess-the-number

I used the code exactly as described in github provided example https://github.com/chandermani/angular2byexample/tree/master/guessthenumber .

It loads fine in the browser. It is with IntelliJ setup where I'm having issues.

IntelliJ is returning the following error.. as seen in the screenshot. Cannot find module '@angular/core'

My properties file is as follows

systemjs.config.js

System.config({
map : {
    'app': 'app',
    'rxjs': 'https://unpkg.com/rxjs@5.0.0-beta.12',
    '@angular/common': 'https://unpkg.com/@angular/common@2.0.0',
    '@angular/compiler': 'https://unpkg.com/@angular/compiler@2.0.0',
    '@angular/core': 'https://unpkg.com/@angular/core@2.0.0',
    '@angular/platform-browser': 'https://unpkg.com/@angular/platform-browser@2.0.0',
    '@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/platform-browser-dynamic@2.0.0'
},
packages:{
    'app':  { main: 'main.ts',  defaultExtension: 'ts' },
    '@angular/common': { main: 'bundles/common.umd.js', defaultExtension: 'js' },
    '@angular/compiler': { main: 'bundles/compiler.umd.js', defaultExtension: 'js' },
    '@angular/core': { main: 'bundles/core.umd.js', defaultExtension: 'js' },
    '@angular/platform-browser': { main: 'bundles/platform-browser.umd.js', defaultExtension: 'js' },
    '@angular/platform-browser-dynamic': { main: 'bundles/platform-browser-dynamic.umd.js', defaultExtension: 'js' },
},
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: 'typescript',
typescriptOptions: {
    emitDecoratorMetadata: true
}
});

My thoughts on a potential solution?

1. currently loads the module from https://unpkg.com/@angular/core@2.0.0 but IntelliJ would prefer it to be loaded from a file on the computer? Should I host files locally?

2. Intellij does not know about the systemjs.config.js file? Do I need to create a tsconfig.json file? that Intellij can understand?

Answer 1

The errors come from TS compiler. And yes, just like Idea itself, it can't find @angular modules by CDN references in your system config: it needs modules being available locally in your project (installed via npm - see https://angular.io/docs/ts/latest/guide/setup.html , for example). Configuration like yours will only work when using browser based compilation

Answer 2

Yes, I think you need to create tsconfig.json,

And turn on typescript compiler in IntelliJ Settings

Also this answer can help you too