How to use angular 2 in exsisting nodejs application only in specific pages

Question

emphasized textI have a large web application which is already developed using Nodejs. I am adding features to the application using angular 2 and use them inside the exisisting ejs pages with the <selector-name>

One such example is <project-details>. When I load pages which has angular2 coponents, I dont get any errors, but the rest of the application throws error in the console but works fine as early.

The error which I get in the console looks like

The selector "project-details" did not match any elements

What is the best practice include angular2 modules only in required pages and get rid of getting this error from other pages?

I use angular2 latest version with webpack.

Update1: All components are rendered correctly and work fine on the page I need to include them. I just want to get rid of this error on the pages where I don't need angular components ie: pages without <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>

NOTE: This setup is already working fine without any issues. I just want to get rid of this error on the pages where I don't need angular components ie: pages without <project-details></project-details> and having some other angular2 component.

Answer 1

Your error means that there is no component with selector project-details.

Possible Reasons.

1. No Component exists with that selector.
2. There might be a typo.
3. The component might not be a part of that module.
4. Component might not be in the declaration in the module.

More information needed to give exact fix.

Update: As fixed in team viewer, I am updating the post.

1. Include the scripts bundle.js in those pages which uses angular2 components not in all pages as in the footer.

2. Add Custom_Elements_Schema in your module as below

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

Answer 2

With angular2, all the components (including pages and custom tags) and filters (pipes) are defined in the app.module.ts

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

If you have a component project-details that will be part of a page, then its ts class has to be added to the @NgModule declarations.

Regarding the project-details ts file itself project-details.component.ts, it has to define the selector as annotation

for example

@Component({

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