How does import work in Angular 2?

Question

I followed QuickStart with Angular2. And I made the folder structure compared to the tutorial. And I encounter an error that can not find the module ... .

I understand that the cause of the error is import .

My folder structure:

I exported the interface heroto the hero.ts file. And I want to import this interface into a file hero-detail.component.ts.

I tried:

import {Hero} from '../app/hero';
import {Hero} from './hero';
import {Hero} from './app/hero';

None of them work.

System configuration in index.html

My question is:

How does import work in Angular 2?

Answer 1

Then you probably need something like

import {Hero} from '../hero';

Answer 2

It must be associated with the SystemJS configuration.

SystemJS, HTML:

<script src="node_modules/systemjs/dist/system.src.js"></script>

SystemJS JS :

<script>
  System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
  (...)
</script>

, shoud !

, , Thierry

Answer 3

To go up:

import {Hero} from './../hero';