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

【问题标题】：Angular2 failing to load component, although Webstorm resolves it correctlyAngular2 无法加载组件，尽管 Webstorm 正确解决了它
【发布时间】：2016-07-20 15:56:06
【问题描述】：

我正在试验来自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>

包含“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 让我立即返回源，但链接中没有解析。

【问题讨论】：

标签： angular angular2-routing typescript1.8

【解决方案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。如果您查看那里，您会看到 no src 文件夹，只是在根目录中的 frameworks。

【讨论】：

当我按照样式指南进行重构并忘记更改 templateUrl 时发生这种情况，因为 typescript 没有显示错误
我有一个类似的问题，它失败的原因是 templateUrl 和它后面的冒号（:) 之间有一个空格。花很多时间试图弄清楚。希望此评论对某人有所帮助。它应该是 templateUrl: 而不是 templateUrl :

【解决方案2】：

我会简单地使用亲属路径，如 Angular 2 文档中所述，您可以通过定义组件的字段 moduleId 来做到这一点：

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

【讨论】：

在提供的链接上找不到404

【解决方案3】：

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

定义它是相对的是“moduleId：module.id”。

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

【讨论】：