Angular2 无法加载组件,尽管 Webstorm 正确解析了它
Angular2 failing to load component, although Webstorm resolves it correctly
我正在试验来自 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 中解析。
变化:
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
在根目录中。
我会简单地使用亲戚路径,如 Angular 2 文档中所述,您可以通过定义组件的字段 moduleId
来实现:
@Component({
moduleId: module.id,
selector: 'relative-path',
templateUrl: 'some.component.html',
styleUrls: ['some.component.css']
})
请记住,选择器:"relative-path" 与它使用相对路径而不是绝对路径这一事实无关。
"moduleId: module.id"定义它是相对的
当我看到它也写在选择器上时,我感到困惑。
他们应该在 angular 文档中将其称为 some-component。
我正在试验来自 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 中解析。
变化:
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
在根目录中。
我会简单地使用亲戚路径,如 Angular 2 文档中所述,您可以通过定义组件的字段 moduleId
来实现:
@Component({
moduleId: module.id,
selector: 'relative-path',
templateUrl: 'some.component.html',
styleUrls: ['some.component.css']
})
请记住,选择器:"relative-path" 与它使用相对路径而不是绝对路径这一事实无关。
"moduleId: module.id"定义它是相对的
当我看到它也写在选择器上时,我感到困惑。 他们应该在 angular 文档中将其称为 some-component。