Góc thành phần chính 2 bootstrapping không làm việc

Tôi có những file sau và mã: index.html:Góc thành phần chính 2 bootstrapping không làm việc

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

và tôi tập app.html :

<div>Hello World!</div>

Và 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" 
    } 
    }

}

Nhưng trong trình duyệt của nó cho thấy các lỗi sau:

Tôi đã tìm kiếm và phát hiện ra rằng mỗi thành phần chính là sống bên NgModule , nhưng theo cuốn sách tôi đang đọc, không có bất kỳ mô-đun nào cho điều đó, và không phải là menti để tạo ra cái đó. Vì vậy, vấn đề với điều này là gì và tôi có nên tạo tệp mô-đun không? Để được trợ giúp và hướng dẫn cảm ơn.

Nguồn

2017-02-09 jones

câu trả lời bạn chọn không trả lời được câu hỏi của bạn. Nó thậm chí không có vẻ là tác giả đọc câu hỏi của bạn. Làm sao nó có thể giải quyết được vấn đề của bạn? –

Khi bạn chia sẻ tệp hoàn chỉnh. Sau đây là những sai lầm bạn đã thực hiện

Bạn đang sử dụng javascript tập tin thay vì file nguyên cảo
Bạn chưa cấu hình systemjs bạn đúng
Các tập tin khởi động có thể được lấy từ này post

Sự cố là phân cấp tham chiếu

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

Hãy cho tôi biết nếu có thêm những thứ cần thiết.

Nguồn

2017-02-09 04:46:42 Aravind

Vẫn còn vấn đề tương tự. – jones

không, tôi không có thư mục như vậy, tôi nghĩ nó là từ cdn. – jones

do u có tệp package.json không? nó là ứng dụng angular2 đầu tiên của bạn? – Aravind

Trước tiên, có vẻ như có sự không khớp giữa phiên bản giữa các polyf góc mà bạn đang tải thông qua thẻ tập lệnh và các phiên bản bạn đã cài đặt qua jspm.

Thứ hai tôi tin rằng nguyên nhân chính của vấn đề của bạn là logic bootstrap bạn có là không còn chính xác cho các phiên bản gần đây của góc 2.

Bạn có

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

Bạn cần

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

const platform = platformBrowserDynamic(); 

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

Điều này ngụ ý bạn cần phải tạo một AppModule và nhập và kết nối thành phần ứng dụng của bạn trong đó và sau đó chuyển nó vào bootstrap. Điều đó sẽ giống như thế này

app.module.ts

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

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

Nguồn

2017-02-12 02:14:42

Góc thành phần chính 2 bootstrapping không làm việc

Trả lời

Các vấn đề liên quan