CODEWITHSUNDEEP
javascriptangular
BentOnCoding
BentOnCoding

Reputation: 28228

Angular 2.0 - How to import a child module?

I've been following the AngularJs 2.0 tutorials, and I'm stuck trying to import a child component. I'm new to angular in general so this may be a very amateur mistake.

I have this module which was working till I added the NavigationComponent directive and reference: 

/// <reference path="Navigation.ts" />
/// <reference path="../angular2/angular2.d.ts" />
import {Component, View, bootstrap, NgFor} from 'angular2/angular2';
import { NavigationComponent } from './Navigation'

// Annotation section
@Component({
  selector: 'roadmap'
})
@View({
  templateUrl : 'roadmap.html',
  directives: [NavigationComponent, NgFor]
})
// Component controller
export class Roadmap {

  herName: string;
  content: string
  names: Array<string>;

  constructor() {

    this.herName = 'Jessica';
    this.content = "test content";
    this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];

  }

  addName(name: string){
    this.names.push(name);
  }

  doneTyping($event) {
    if($event.which === 13) {
      this.addName($event.target.value);
      $event.target.value = null;
    }
  }
}

bootstrap(Roadmap)

And I have the NavigationComponent defined as such : 

/// <reference path="../angular2/angular2.d.ts" />
import {Component, View, bootstrap} from 'angular2/angular2';

@Component({
  selector: 'navigation'
})
@View({
  template: `<h1> tester </h1>`
})

export class NavigationComponent {

  message: string;

  constructor() {
    this.message = "I'm the navigation";
  }

}

I can't get the import statement correct. I have both the Roadmap.ts and the NavigationComponent.ts in the same folder.

There errors I'm seeing aren't communicating anything useful :

Uncaught ReferenceError: System is not defined

Any advice ?

Upvotes: 1

Views: 803

Answers (1)

haz111
haz111

Reputation: 764

I suppose you are using scripts from internet in your index.html and have problem to access them, becouse I have same problem now. I suggest replace it with local files.

In this solution I'm using jspm package manager (you can install it via npm install -g jspm).

In your project root folder run command:

jspm init

You can leave default configuration of jspm - just press Enter for every line. Now run:

jspm install traceur-runtime

You should have all required files in jspm_packages folder. Now replace this (or similar) lines from your index.html

<script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script>
<script src="https://jspm.io/[email protected]"></script>

with this:

<script src="jspm_packages/github/jmcriffey/[email protected]/traceur-runtime.js"></script>
<script src="jspm_packages/system.js"></script>

EDIT: It looks like everything is OK now - files are online again. If problem will be back in future remember to check version of files from jspm and replace outdated ones from this answer.

Upvotes: 1

Related Questions