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.
2 Answers
Answers 1
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.
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 {}
0 comments:
Post a Comment