Question

ENV：

Angular2-webpack bolierplate：https://github.com/preboot/angular2-webpack
nodejs 6.3.1 / npm 3.10.3

当我进行业力测试时，会发生错误，但在服务器运行时似乎运行良好。

SUMMARY:
✔ 2 tests completed
✖ 1 test failed

FAILED TESTS:
  Home Component
    ✖ should ...
      Chrome 55.0.2883 (Mac OS X 10.12.2)
    Error: Template parse errors:
    'my-searchbar' is not a known element:
    1. If 'my-searchbar' is an Angular component, then verify that it is part of this module.
    2. If 'my-searchbar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("d="go_mypage" href="/mypage"><img src="/img/mypage-thin.png"></a>
    <div class="fold" id="wrapper">
      [ERROR ->]<my-searchbar></my-searchbar>
      <span>Home Works!</span>
    </div>"): HomeComponent@2:2

...

我查看了几个堆栈溢出问题或与此错误相关的其他网站，但它们并没有太大帮助。

app.module.ts

import { NgModule, ApplicationRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { MypageComponent } from './mypage/mypage.component';
import { HomeModule } from './home/home.module';
import { ApiService } from './shared';
import { routing } from './app.routing';

import { removeNgStyles, createNewHosts } from '@angularclass/hmr';

@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    routing,
    HomeModule
  ],
  declarations: [
    AppComponent,
    MypageComponent
  ],
  providers: [
    ApiService
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(public appRef: ApplicationRef) {}
  hmrOnInit(store) {
    console.log('HMR store', store);
  }
  hmrOnDestroy(store) {
    let cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement);
    // recreate elements
    store.disposeOldHosts = createNewHosts(cmpLocation);
    // remove styles
    removeNgStyles();
  }
  hmrAfterDestroy(store) {
    // display new elements
    store.disposeOldHosts();
    delete store.disposeOldHosts;
  }
}

app.component.html

<main>
  <router-outlet></router-outlet>
</main>

./家/ home.component.html

<a class="route" id="go_mypage" href="/mypage"><img src="/img/mypage-thin.png"></a>
<div class="fold" id="wrapper">
  <my-searchbar></my-searchbar>
  <span>Home Works!</span>
</div>

./家/ home.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { HomeComponent } from './home.component';
import { SearchbarComponent } from './searchbar.component';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        RouterModule
    ],
    declarations: [
        HomeComponent,
        SearchbarComponent
    ],
    exports: [
        HomeComponent,
        SearchbarComponent
    ]
})

export class HomeModule { }

- 更新 -

./家/ searchbar.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'my-searchbar',
templateUrl: './searchbar.component.html',
styleUrls: ['./style/searchbar.component.scss']
})

export class SearchbarComponent {
    searchWord: string;
    searchTag: string[];

    onKey(event: any) {
        console.log(event.key);
    }
}

home.component.spec.ts

// This shows a different way of testing a component, check about for a simpler one
import { Component } from '@angular/core';

import { TestBed } from '@angular/core/testing';

import { HomeComponent } from './home.component';

describe('Home Component', () => {
  const html = '<my-home></my-home>';

  beforeEach(() => {
    TestBed.configureTestingModule({declarations: [HomeComponent, TestComponent]});
    TestBed.overrideComponent(TestComponent, { set: { template: html }});
  });

  it('should ...', () => {
    const fixture = TestBed.createComponent(TestComponent);
    fixture.detectChanges();
    expect(fixture.nativeElement.children[0].textContent).toContain('Home Works!');
  });

});

@Component({selector: 'my-test', template: ''})
class TestComponent { }

Answer 1

错误/警告是解释性的，所以它在那里说的很多：

您已经创建了一个自定义元素<my-searchbar></my-searchbar>，它不是已知的Angular 2元素，并且要禁止警告将其添加到NgModule中的模式中，如下所示：

schemas: [ CUSTOM_ELEMENTS_SCHEMA ]

Angular2模板解析器错误

1 个答案: