Friday, February 17, 2017

Angular 2 bootstrapping main component not working

Leave a Comment

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.

2 Answers

Answers 1

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.

Answers 2

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 {} 
If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment