如何在特定頁面中只在現有nodejs應用程序中使用角度2

Question

強調文本我有一個已經使用Nodejs開發的大型Web應用程序。 我使用角2添加功能到應用程序並與<selector-name>

一個這樣的示例使用它們的exisisting EJS頁面內是<project-details>。 當我加載包含angular2組件的頁面時，我沒有收到任何錯誤，但應用程序的其餘部分在控制檯中拋出錯誤，但是早期工作正常。

我在控制檯得到的錯誤看起來像

選擇器「項目詳細信息」並沒有只在需要的頁面匹配任何元素

什麼是最好的做法包括angular2模塊，並獲得擺脫從其他網頁獲取此錯誤？

我使用angular2最新版本的webpack。

更新1： 所有組件都呈現正確，並在我需要包含它們的頁面上正常工作。 我只是想擺脫在哪裏我不需要角分量的頁面這個錯誤的，即：頁面沒有<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：

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：

// 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. 包括腳本在使用angular2 成分並不是在所有的頁面中頁腳這些頁面bundle.js。

2. 你的模塊中添加Custom_Elements_Schema如下

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

Answer 2

隨着angular2，所有在app.module.ts被定義的組件（包括頁面和自定義標籤）和過濾器（管道）

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

如果你有一個組件project-details這將是一個網頁的一部分，那麼它的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 { 
... 
}