Search code examples
angulartypescriptsystemjsbootstrapping

Angular 2 bootstrapping main component not working

I have the following files and codes: index.html:

<!doctype html>
  <html>
    <head lang="en">
      <title>Angular 2 Components</title>
    </head>
    <body>
      <ngc-app></ngc-app>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/angular2-polyfills.js"></script>
      <script src="jspm_packages/system.js"></script>
      <script src="config.js"></script>
      <script>
        System.import('lib/bootstrap.js');
      </script>
    </body>
  </html>

bootstrap.js: 

// Import Angular bootstrap function
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
// Import our main app component
import {App} from  './app';
// We are bootstrapping Angular using our main application component
bootstrap(App);

app.js:

// We need the Component annotation as well as the
// ViewEncapsulation enumeration
import {Component, ViewEncapsulation} from '@angular/core';
// Using the text loader we can import our template
import template from './app.html!text';
// This creates our main application component
@Component({
  // Tells Angular to look for an element <ngc-app> to create this component
  selector: 'ngc-app',
  // Let's use the imported HTML template string
  template,
  // Tell Angular to ignore view encapsulation
  encapsulation: ViewEncapsulation.None
})
export class App {}

and my app.html file:

<div>Hello World!</div>

And package.json:

{
  "name": "taskmanagement",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "jspm": "^0.16.52"
  },
  "jspm": {
    "dependencies": {
      "@angular/common": "npm:@angular/common@^2.4.7",
      "@angular/compiler": "npm:@angular/compiler@^2.4.7",
      "@angular/core": "npm:@angular/core@^2.4.7",
      "@angular/platform-browser-dynamic": "npm:@angular/platform-browser-dynamic@^2.4.7",
      "rxjs": "npm:rxjs@^5.1.0",
      "text": "github:systemjs/plugin-text@^0.0.9"
    },
    "devDependencies": {
      "typescript": "npm:typescript@^2.0.7"
    }
  }

}

But in browser it shows the following error: enter image description here

I have searched and found that each main component is live inside NgModule, but according to the book that i'm reading, there is not any module for that, and not mentioned to create that one. So what is the problem with this, and should i create module file? For any help and guide thanks.

Solution

  • As you shared the complete files. The following are the mistakes you have made

    1. You are using javascript files instead of typescript files
    2. You have not configured your systemjs properly
    3. The starter files can be taken from this post

    The problem is the hierarchy of references 

    <body>

    <ngc-app></ngc-app>
    <script src="jspm_packages/system.js"></script>         
    <script src="config.js"></script>
    <script>
        System.import('lib/bootstrap.js');
    </script>        

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/angular2-polyfills.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>

</body>

    Let me know if there are further things needed.