Question

强调文字我有一个已经使用Nodejs开发的大型Web应用程序。我正在使用角度2向应用程序添加功能，并使用<selector-name>

在现有的ejs页面中使用它们

其中一个例子是 <project-details> 。当我加载具有angular2 coponents的页面时，我没有得到任何错误，但应用程序的其余部分在控制台中引发错误但是工作得很早。

我在控制台中看到的错误是这样的

选择器“project-details”与任何元素都不匹配

最佳做法是什么，只在必需的页面中包含angular2模块，并摆脱从其他页面获取此错误？

我使用angular2最新版本和webpack。

UPDATE1： 所有组件都正确呈现，并在我需要包含它们的页面上正常工作。我只是想在我不需要角度组件的页面上摆脱这个错误，即：没有<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

您的错误表示没有选择项目详情的组件。

可能的原因。

该选择器不存在任何组件。
可能会有拼写错误。
该组件可能不是该模块的一部分。
组件可能不在模块的声明中。

提供准确修复所需的更多信息。

更新：在团队查看器中已修复，我正在更新帖子。

在使用angular2的页面中包含脚本 bundle.js 组件不在页脚中的所有页面中。

在模块中添加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类添加到@NgModule declarations。

关于project-details ts文件本身project-details.component.ts，它必须将选择器定义为注释

例如

@Component({

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

如何在特定页面中的现有nodejs应用程序中使用angular 2

2 个答案: