特定のページのみのexsisting nodejsアプリケーションでangular2を使用する方法

Question

テキストを強調私はすでにNodejsを使用して開発された大規模なWebアプリケーションを持っています。 私は、角度2を使用して、アプリケーションに機能を追加し、<selector-name>

その一例は、<project-details>あるとexisistingのEJSページ内でそれらを使用しています。 私はangular2 coponentsを持っているページを読み込むとき、私はエラーは表示されませんが、アプリケーションの残りの部分でコンソールにエラーがスローされますが、早めに正常に動作します。私はコンソールに入るエラーが

のように見えます

セレクタ「プロジェクトの詳細は、」任意の要素

と一致しませんでしたベストプラクティスは何にのみ必要なページでangular2モジュールを含むとgetこのエラーを他のページから取り除くのはどうですか？

私はwebpackでangular2最新バージョンを使用しています。

更新1： すべてのコンポーネントが正しくレンダリングされ、それらを含める必要があるページで正常に動作します。 私はちょうど私が角度成分すなわち必要はありませんページにこのエラーを取り除きたい：

import "core-js"; 
import "reflect-metadata"; 
import "zone.js/dist/zone" 

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

platformBrowserDynamic().bootstrapModule(ProjectModule); 

project.module.ts：<project-details></project-details>

module.exports= { 
    entry : "./main.ts", 
    output : { 
     path:__dirname, 
     filename : "./dist/bundle.js" 
    }, 
    resolve: { 
     extensions : ['.js','.ts'] 
    }, 
    module: { 
     loaders : [{ 
      test : /\.ts/, 
      loaders: ['ts-loader'], 
      exclude :/node_modules/ 
     }] 
    } 
} 

main.tsずにページを

// core 
import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { FormsModule } from '@angular/forms'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { HttpModule } from '@angular/http'; 
import { ProjectComponent } from './project.component'; 
import { ProjectService } from './project.service'; 

@NgModule({ 
    imports: [ 
    CommonModule, 
    BrowserModule, 
    HttpModule, 
    FormsModule 
    ], 
    declarations: [ 
    ProjectComponent 
    ], 
    bootstrap: [ 
    ProjectComponent 
    ], 
    providers : [ 
    ProjectService 
    ] 
}) 

export class ProjectModule { } 

project.component.ts：

import { Component } from '@angular/core'; 
import { Project } from './project.model'; 
import { ProjectService } from './project.service'; 

@Component({ 
    selector: 'project-details', 
    templateUrl: '/app/project.component.html' 
}) 
export class ProjectComponent { 

    constructor(private projectService: ProjectService){ 

    } 
} 

footer.ejs：

<script src="/app/dist/bundle.js"></script> 

注：このセットアップは、すでに何の問題もなく正常に動作しています。 私は角度のある部品が必要ないページ、つまり<project-details></project-details>のないページと他のangular2コンポーネントを持つページでこのエラーを取り除きたいだけです。

Answer 1

あなたのエラーは、セレクタプロジェクト詳細のコンポーネントがないことを意味します。

考えられる理由

1. いいえそのセレクタにはコンポーネントがありません。
2. タイプミスがある可能性があります。
3. コンポーネントがそのモジュールの一部ではない可能性があります。
4. コンポーネントがモジュール内で宣言されていない可能性があります。

正確な修正が必要な場合は、さらに詳しい情報が必要です。

更新： チームビューアで修正されたとおり、私は投稿を更新しています。

1. スクリプトbundle.jsフッターのようではないすべてのページにangular2 コンポーネントを使用して、それらのページでを含めます。

2. app.module.tsで定義されており、フィルタ（パイプ）（ページとカスタムタグを含む）

   angular2で

   import{ CUSTOM_ELEMENTS_SCHEMA } from '@angular/core' 
   @NgModule({ 
        declarations: [ ... ], 
        exports: [ ... ], 
        imports: [ ... ], 
        schemas: [ CUSTOM_ELEMENTS_SCHEMA ] 
   }) 
   

Answer 2

、すべてのコンポーネント以下のようにモジュールでCustom_Elements_Schemaを追加

あなたはページの一部となるコンポーネント project-detailsをお持ちの場合は

@NgModule({ 
    declarations: [ 
    AppComponent, 
    ProjectDetails, 
    SomeFilter,SomeComponent, 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule 
    ], 
    providers: [HttpModule, Core], 
    bootstrap: [AppComponent] 
}) 

は、そのTSクラスが@NgModuledeclarationsに追加する必要があります。

project-details tsがproject-details.component.tsファイル自体に関しては、たとえば

@Component({ 

    selector: 'project-details', 
    templateUrl: 'project-details.component.html', 
    styleUrls: ['project-details.component.css'], 
}) 
export class PRojectDetails { 
... 
}