如何在Angular 2中使用外部Web組件

我想弄清楚其他人開發的Web組件（我的應用程序外部）如何在我的應用程序中使用。我有一個UsefullComponent，我想在我的AppWithComponent中使用。 UsefullComponent（UsefullComponent.js）存儲在名爲'componentsLib'的目錄中，而我的應用程序代碼存儲在名爲'myApp'的目錄中。我也有我的index.html，它導入'myApp'。整個事情編譯（我使用TypeScript），但在運行時我得到一個錯誤'GET http://127.0.0.1:8080/componentsLib/UsefullComponent 404（未找到）'。任何想法我做錯了什麼？如何在Angular 2中使用外部Web組件

在這裏，代碼

UsefullComponent.ts

import {bootstrap, Component, FORM_DIRECTIVES, 
    CORE_DIRECTIVES, Input} from 'angular2/angular2'; 

@Component({ 
    selector: 'usefull-component', 
    providers: [], 
    template: ` 
     <div> 
      <h2>My manifesto</h2> 
      <h3>{{manifesto}}</h3> 
     </div> 
     `, 
    styleUrls: [], 
    directives: [FORM_DIRECTIVES, CORE_DIRECTIVES] 
}) 
export class UsefullComponent { 
    public manifesto: string = 'I am a very usefull component'; 
}

AppWithComponent.ts

import {bootstrap, Component, FORM_DIRECTIVES, 
     CORE_DIRECTIVES, provide} from 'angular2/angular2'; 
import {UsefullComponent} from '../../componentsLib/UsefullComponent'; 

@Component({ 
    selector: 'my-app-with-comp', 
    providers: [UsefullComponent], 
    template: ` 
     <div> 
      <h1>I use components</h1> 
      <usefull-component></usefull-component> 
     </div> 
     `, 
    styleUrls: [], 
    directives: [FORM_DIRECTIVES, CORE_DIRECTIVES, UsefullComponent] 
}) 
class AppWithComponent { 
    public niceComponent: UsefullComponent; 

    constructor(inComponent: UsefullComponent) { 
     this.niceComponent = inComponent; 
    } 
} 
bootstrap(AppWithComponent);

的index.html

<html> 
<head> 
<title>Components</title> 
<script src="../node_modules/es6-shim/es6-shim.js"></script> 
<script src="../node_modules/systemjs/dist/system.src.js"></script> 
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script> 

<script> 
System.config({ 
     packages: {'myApp': {defaultExtension: 'js'}} 
}); 
     System.import('myApp/myAppWithComp'); 
</script> 
</head> 
<body> 
<my-app-with-comp>loading...</my-app-with-comp> 
</body> 
</html>

來源

2015-12-22 Picci

我在代碼中看到的唯一錯誤就是組件庫的路徑。檢查您是否UsefullComponent.js被放置在/componentsLib/UsefullComponent.js

來源

2015-12-23 06:59:18 rajkiran

這並不提供答案的問題。要批評或要求作者澄清，在他們的帖子下留下評論 - 你總是可以評論你自己的帖子，一旦你有足夠的[聲譽]（http://stackoverflow.com/help/whats-reputation），你會能夠[評論任何帖子]（http://stackoverflow.com/help/privileges/comment）。 - [來自評論]（/評論/低質量帖/ 10660735） –

我是新手在這裏和StackOverflow說我沒有任何聲譽來評論:( – rajkiran

謝謝Rajiran。我已經檢查和UsefullComponent.js實際上位於/componentsLib/UsefullComponent.js;我會給出更多的嘗試，看看我能否找到錯誤 – Picci

按我的知識，我們應該增加以下文件對myApp/myAppWithComp 引導（AppWithComponent）兩條線;引導（UsefullComponent）;
並刪除bootstrap（AppWithComponent）;從文件AppWithComponent.ts

而且index.html文件中添加<div>標籤如下

<body><div><my-app-with-comp>loading...</my-app-with-comp></div></body>

來源

2016-02-17 10:39:50

如何在Angular 2中使用外部Web組件

回答

相關問題