Angular 2 bootstrapping main component not working

Asked 9/2, 2017 at 4:40 Answered 12/2, 2017 at 2:14

Solved angular typescript systemjs bootstrapping

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:

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.

Aalst answered 9/2, 2017 at 4:40 Comment(1)

your selected answer doesn't answer your question. It doesn't even seem that the author read your question. How could it possibly have resolved your issues? – Koniology 18/2, 2017 at 7:20

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

You are using javascript files instead of typescript files
You have not configured your systemjs properly
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.

Dilate answered 9/2, 2017 at 4:46 Comment(10)

Still has the same problem. – Aalst 9/2, 2017 at 4:59

no, i have not such a folder, i think it is from cdn. – Aalst 9/2, 2017 at 5:2

do u have package.json file? is it your first angular2 application? – Dilate 9/2, 2017 at 5:3

Yeah. it is on root of my application. – Aalst 9/2, 2017 at 5:5

Is it your first angular2 app? Did u install all node module? Using npm install – Dilate 9/2, 2017 at 5:9

Yeah, i have installed. – Aalst 9/2, 2017 at 5:11

Then there should be a node_modules folder!!! Is this your first angular2 app??????? – Dilate 9/2, 2017 at 5:11

Let us continue this discussion in chat. – Aalst 9/2, 2017 at 5:15

@Dilate he is using JSPM – Koniology 12/2, 2017 at 2:0

I'm downvoting this answer because you're saying he has improperly configured SystemJS and then directing him to an npm based starter kit, which I might add is an arbitrary starter kit even with respect to other npm starters, when he is clearly using JSPM and is clearly importing config.js. JSPM automatically configures SystemJS. Furthermore, this implies you didn't even read the question. This should not be the accepted answer – Koniology 18/2, 2017 at 4:53

Firstly it appears there are version mismatches between the angular polyfills you are loading via script tags and the versions you have installed via jspm.

Secondly I believe the primary cause of your issue is that the bootstrap logic you have is no longer correct for recent versions of angular 2.

You have

// 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);

You need

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';

const platform = platformBrowserDynamic();

platform.bootstrapModule(AppModule, {
  useDebug: true
});

This implies you need to create an AppModule and import and wire up your app component in that and then pass it to bootstrap. That will look like this

app.module.ts

import {NgModule} from '@angular/core';
import {App} from './app';

@NgModule({
  declarations: [App],
  bootstrap: [App],
}) 
export class AppModule {}

Koniology answered 12/2, 2017 at 2:14 Comment(0)