Угловое 2 самонастройки основной компонент не работает

У меня есть следующие файлы и коды: index.html:Угловое 2 самонастройки основной компонент не работает

<!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 {}

и мой 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 , но согласно книге, которую я читаю, для этого нет никакого модуля, а не менти чтобы создать этот. Так в чем проблема с этим, и я должен создать файл модуля? За любую помощь и руководство.

источник

2017-02-09 jones

Ваш выбранный ответ не отвечает на ваш вопрос. Даже не кажется, что автор прочитал ваш вопрос. Как он мог решить ваши проблемы? –

Как вы делились файлами. Ниже перечислены ошибки, которые вы сделали

Вы используете JavaScript файлы вместо машинопись файлов
Вы не настроили свой systemjs правильно
Файлы пускатели могут быть взяты из этого post

Проблема заключается в иерархии ссылок

<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>

Сообщите мне, если есть необходимость в дополнительных вещах.

источник

2017-02-09 04:46:42 Aravind

По-прежнему имеет ту же проблему. – jones

нет, у меня нет такой папки, я думаю, что она из cdn. – jones

do u есть упаковка.json файл? это ваше первое приложение angular2? – Aravind

Во-первых, похоже, что существуют несоответствия версии между угловыми полиполками, которые вы загружаете с помощью тегов скриптов и версий, которые вы установили через jspm.

Во-вторых, я считаю, что основная причина вашей проблемы является то, что бутстраповская логика у вас есть больше не верна для последних версий углового 2.

Вы

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

Вам нужны

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

const platform = platformBrowserDynamic(); 

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

Это означает, что вам необходимо создать AppModule и импортировать и подключить к нему компонент приложения, а затем передать его в загрузочный файл. Это будет выглядеть так:

app.module.ts

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

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

источник

2017-02-12 02:14:42

Угловое 2 самонастройки основной компонент не работает

ответ

Смежные вопросы