У меня есть следующие файлы и коды:
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 use the imported HTML template string
template,
// Tell Angular to ignore view encapsulation
encapsulation: ViewEncapsulation.None
})
export class App {}
и мой app.html
файл:
<div>Hello World!</div>
И 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/[email protected]^2.4.7",
"@angular/compiler": "npm:@angular/[email protected]^2.4.7",
"@angular/core": "npm:@angular/[email protected]^2.4.7",
"@angular/platform-browser-dynamic": "npm:@angular/[email protected]^2.4.7",
"rxjs": "npm:[email protected]^5.1.0",
"text": "github:systemjs/[email protected]^0.0.9"
},
"devDependencies": {
"typescript": "npm:[email protected]^2.0.7"
}
}
}
Но в браузере отображается следующая ошибка:
Я обыскал и обнаружил, что каждый основной компонент находится внутри NgModule
, но, согласно книге, которую я читаю, для этого нет никакого модуля и не упоминается для создания этого. Так в чем проблема с этим, и я должен создать файл модуля?
За любую помощь и благодарность за руководство.