Menu
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.
697
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 {}
As you shared the complete files. The following are the mistakes you have made
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.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
