Angular2 无法加载组件，尽管 Webstorm 正确解析了它

Question

我正在试验来自 https://github.com/NathanWalker/angular2-seed-advanced

的以下种子

我有以下 src 文件：

app.component.ts

import { ChangeDetectionStrategy } from 'angular2/core';
import { RouteConfig } from 'angular2/router';
import { NameListService } from '../../frameworks/app.framework/index';
import {
    RouteComponent, AnalyticsService
} from '../../frameworks/core.framework/index';
import { LangSwitcherComponent } from '../../frameworks/i18n.framework/index';
import { NavbarComponent } from './navbar.component';
import { ToolbarComponent } from './toolbar.component';
import { HomeComponent } from '../home/home.component';
import { AboutComponent } from '../about/about.component';
import { PatientComp } from '../../frameworks/epimss.framework/components/reg/patient/patient.comp';

@RouteComponent({
                  selector       : 'sd-app',
                  viewProviders  : [NameListService],
                  templateUrl    : './components/app/app.component.html',
                  directives     : [LangSwitcherComponent, NavbarComponent, ToolbarComponent],
                  // Everything else uses OnPush
                  changeDetection: ChangeDetectionStrategy.Default
                })
@RouteConfig([
               { path: '/', component: HomeComponent, as: 'Home' },
               {path: '/newPatient', component: PatientComp, as: 'NewPatient'},
               { path: '/about', component: AboutComponent, as: 'About' }
             ])
export class AppComponent {
  constructor(public analytics: AnalyticsService) {
  }
}

app.html

<sd-toolbar></sd-toolbar>
<sd-navbar></sd-navbar>
<router-outlet></router-outlet>

navbar.html

<nav>
  <md-content>
    <md-toolbar
                layout = "row">
      <!--<a [routerLink] = "['Home']">{{'HOME' | translate}}</a>-->
      <!--<a [routerLink] = "['About']">{{'ABOUT' | translate}}</a>-->
      <button md-button
              class = "md-icon-button"
              [routerLink] = "['Home']">
        <i md-icon>home</i>
      </button>
      <button md-button
              class = "md-icon-button"
              [routerLink] = "['NewPatient']">
        <i md-icon>person_add</i>
      </button>
      <button md-button
              class = "md-primary"
              [routerLink] = "['/About']">{{'ABOUT' | translate}}
      </button>
    </md-toolbar>
  </md-content>
</nav>

编辑1

patient.comp.ts

import { MATERIAL_DIRECTIVES } from 'ng2-material/all';
import { BaseComponent } from '../../../../../frameworks/core.framework/index';

//import { MdButton } from "ng2-material/components/button/button";

@BaseComponent({
                 selector   : 'epimss-patient',
                 templateUrl: './src/frameworks/epimss.framework/components/reg/patient/patient.comp.view.html',
                 directives : [MATERIAL_DIRECTIVES]
               })
export class PatientComp {


}

编辑1

patient.comp.view.html

<div>
  This is my parent component!

</div>

路由器-link 包括 'NewPatient' 显示在 UI 中，但是单击它会导致下面的堆栈跟踪：

angular2.js?1459467053962:21085 GET http://localhost:5555/src/frameworks/epimss.framework/components/reg/patient/patient.comp.view.html 404 (Not Found)XHRImpl.get @ angular2.js?1459467053962:21085TemplateNormalizer.normalizeTemplate @ angular2.js?1459467053962:20347TemplateCompiler.normalizeDirectiveMetadata @ angular2.js?1459467053962:24901(anonymous function) @ angular2.js?1459467053962:24975TemplateCompiler._compileComponentRuntime @ angular2.js?1459467053962:24974TemplateCompiler.compileHostComponentRuntime @ angular2.js?1459467053962:24928RuntimeCompiler_.compileInHost @ angular2.js?1459467053962:25279DynamicComponentLoader_.loadNextToLocation @ angular2.js?1459467053962:12417RouterOutlet.activate @ router.js?1459467053963:2135(anonymous function) @ router.js?1459467053963:3105ZoneDelegate.invoke @ angular2-polyfills.js?1459467053959:332NgZoneImpl.inner.inner.fork.onInvoke @ angular2.js?1459467053962:2216ZoneDelegate.invoke @ angular2-polyfills.js?1459467053959:331Zone.run @ angular2-polyfills.js?1459467053959:227(anonymous function) @ angular2-polyfills.js?1459467053959:576ZoneDelegate.invokeTask @ angular2-polyfills.js?1459467053959:365NgZoneImpl.inner.inner.fork.onInvokeTask @ angular2.js?1459467053962:2208ZoneDelegate.invokeTask @ angular2-polyfills.js?1459467053959:364Zone.runTask @ angular2-polyfills.js?1459467053959:263drainMicroTaskQueue @ angular2-polyfills.js?1459467053959:482ZoneTask.invoke @ angular2-polyfills.js?1459467053959:434
angular2.js?1459467053962:23740 EXCEPTION: Error: Uncaught (in promise): Failed to load src/frameworks/epimss.framework/components/reg/patient/patient.comp.view.html
angular2.js?1459467053962:23730 EXCEPTION: Error: Uncaught (in promise): Failed to load src/frameworks/epimss.framework/components/reg/patient/patient.comp.view.htmlBrowserDomAdapter.logError @ angular2.js?1459467053962:23730BrowserDomAdapter.logGroup @ angular2.js?1459467053962:23741ExceptionHandler.call @ angular2.js?1459467053962:1292(anonymous function) @ angular2.js?1459467053962:12674schedulerFn @ angular2.js?1459467053962:13078SafeSubscriber.__tryOrUnsub @ Rx.js?1459467053961:10775SafeSubscriber.next @ Rx.js?1459467053961:10730Subscriber._next @ Rx.js?1459467053961:10690Subscriber.next @ Rx.js?1459467053961:10667Subject._finalNext @ Rx.js?1459467053961:11191Subject._next @ Rx.js?1459467053961:11183Subject.next @ Rx.js?1459467053961:11142EventEmitter.emit @ angular2.js?1459467053962:13059NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ angular2.js?1459467053962:13477NgZoneImpl.inner.inner.fork.onHandleError @ angular2.js?1459467053962:2233ZoneDelegate.handleError @ angular2-polyfills.js?1459467053959:336Zone.runGuarded @ angular2-polyfills.js?1459467053959:244drainMicroTaskQueue @ angular2-polyfills.js?1459467053959:495ZoneTask.invoke @ angular2-polyfills.js?1459467053959:434
angular2.js?1459467053962:23730 STACKTRACE:BrowserDomAdapter.logError @ angular2.js?1459467053962:23730ExceptionHandler.call @ angular2.js?1459467053962:1294(anonymous function) @ angular2.js?1459467053962:12674schedulerFn @ angular2.js?1459467053962:13078SafeSubscriber.__tryOrUnsub @ Rx.js?1459467053961:10775SafeSubscriber.next @ Rx.js?1459467053961:10730Subscriber._next @ Rx.js?1459467053961:10690Subscriber.next @ Rx.js?1459467053961:10667Subject._finalNext @ Rx.js?1459467053961:11191Subject._next @ Rx.js?1459467053961:11183Subject.next @ Rx.js?1459467053961:11142EventEmitter.emit @ angular2.js?1459467053962:13059NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ angular2.js?1459467053962:13477NgZoneImpl.inner.inner.fork.onHandleError @ angular2.js?1459467053962:2233ZoneDelegate.handleError @ angular2-polyfills.js?1459467053959:336Zone.runGuarded @ angular2-polyfills.js?1459467053959:244drainMicroTaskQueue @ angular2-polyfills.js?1459467053959:495ZoneTask.invoke @ angular2-polyfills.js?1459467053959:434
angular2.js?1459467053962:23730 Error: Uncaught (in promise): Failed to load src/frameworks/epimss.framework/components/reg/patient/patient.comp.view.html
    at resolvePromise (angular2-polyfills.js?1459467053959:543)
    at angular2-polyfills.js?1459467053959:520
    at ZoneDelegate.invoke (angular2-polyfills.js?1459467053959:332)
    at Object.NgZoneImpl.inner.inner.fork.onInvoke (angular2.js?1459467053962:2216)
    at ZoneDelegate.invoke (angular2-polyfills.js?1459467053959:331)
    at Zone.run (angular2-polyfills.js?1459467053959:227)
    at angular2-polyfills.js?1459467053959:576
    at ZoneDelegate.invokeTask (angular2-polyfills.js?1459467053959:365)
    at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (angular2.js?1459467053962:2208)
    at ZoneDelegate.invokeTask (angular2-polyfills.js?1459467053959:364)BrowserDomAdapter.logError @ angular2.js?1459467053962:23730ExceptionHandler.call @ angular2.js?1459467053962:1295(anonymous function) @ angular2.js?1459467053962:12674schedulerFn @ angular2.js?1459467053962:13078SafeSubscriber.__tryOrUnsub @ Rx.js?1459467053961:10775SafeSubscriber.next @ Rx.js?1459467053961:10730Subscriber._next @ Rx.js?1459467053961:10690Subscriber.next @ Rx.js?1459467053961:10667Subject._finalNext @ Rx.js?1459467053961:11191Subject._next @ Rx.js?1459467053961:11183Subject.next @ Rx.js?1459467053961:11142EventEmitter.emit @ angular2.js?1459467053962:13059NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ angular2.js?1459467053962:13477NgZoneImpl.inner.inner.fork.onHandleError @ angular2.js?1459467053962:2233ZoneDelegate.handleError @ angular2-polyfills.js?1459467053959:336Zone.runGuarded @ angular2-polyfills.js?1459467053959:244drainMicroTaskQueue @ angular2-polyfills.js?1459467053959:495ZoneTask.invoke @ angular2-polyfills.js?1459467053959:434
angular2-polyfills.js?1459467053959:469 Unhandled Promise rejection: Failed to load src/frameworks/epimss.framework/components/reg/patient/patient.comp.view.html ; Zone: angular ; Task: Promise.then ; Value: Failed to load src/frameworks/epimss.framework/components/reg/patient/patient.comp.view.htmlconsoleError @ angular2-polyfills.js?1459467053959:469drainMicroTaskQueue @ angular2-polyfills.js?1459467053959:498ZoneTask.invoke @ angular2-polyfills.js?1459467053959:434
angular2-polyfills.js?1459467053959:471 Error: Uncaught (in promise): Failed to load src/frameworks/epimss.framework/components/reg/patient/patient.comp.view.html(…)

import { PatientComp } from '../../frameworks/epimss.framework/components/reg/patient/patient.comp'; 已在 WebStorm 中解析 - 单击 patient.comp.view.html 可立即返回源代码，但未在 link 中解析。

Answer 1

变化： templateUrl: './src/frameworks/epimss.framework/components/reg/patient/patient.comp.view.html',

收件人： templateUrl: './frameworks/epimss.framework/components/reg/patient/patient.comp.view.html',

它必须相对于您的服务器根目录，在 angular2-seed-advanced 开发中是 dist/dev。如果你在那里看，你会看到没有 src 文件夹，只有 frameworks 在根目录中。

Answer 2

我会简单地使用亲戚路径，如 Angular 2 文档中所述，您可以通过定义组件的字段 moduleId 来实现：

@Component({
  moduleId: module.id,
  selector: 'relative-path',
  templateUrl: 'some.component.html',
  styleUrls:  ['some.component.css']
})

Answer 3

请记住，选择器："relative-path" 与它使用相对路径而不是绝对路径这一事实无关。

"moduleId: module.id"定义它是相对的

当我看到它也写在选择器上时，我感到困惑。他们应该在 angular 文档中将其称为 some-component。

Angular2 无法加载组件，尽管 Webstorm 正确解析了它

Angular2 failing to load component, although Webstorm resolves it correctly

angular

angular2-routing

typescript1.8

编辑1

编辑1