Angular2/ASP.NET - "没有提供ResourceLoader实现.无法读取URL"

Question

我正在尝试在Visual Studio上构建自己的Angular 2/ASP.NET SPA.你可以在这里找到所有文件.

我试图做的很简单:在我按照说明在这里设置应用程序后,我开始添加我自己的文件,试图做一些基本的路由,我删除了一些多余的文件.我有ClientApp/app/app.module.ts bootstrapping ClientApp/app/components/app/app.component.ts,唯一的路由是ClientApp/app/components/app/test.component.ts

不幸的是,我收到了这个错误:

An unhandled exception occurred while processing the request.

Exception: Call to Node module failed with error: Error: No ResourceLoader implementation has been provided. Can't read the url "app.component.html"
at Object.get (C:\Users\Student\Source\Workspaces\mvs\Test2\Test2\node_modules\@angular\compiler\bundles\compiler.umd.js:17454:17)
at DirectiveNormalizer._fetch (C:\Users\Student\Source\Workspaces\mvs\Test2\Test2\node_modules\@angular\compiler\bundles\compiler.umd.js:13455:45)
at DirectiveNormalizer.normalizeTemplateAsync (C:\Users\Student\Source\Workspaces\mvs\Test2\Test2\node_modules\@angular\compiler\bundles\compiler.umd.js:13498:23)
at DirectiveNormalizer.normalizeDirective (C:\Users\Student\Source\Workspaces\mvs\Test2\Test2\node_modules\@angular\compiler\bundles\compiler.umd.js:13473:46)
at RuntimeCompiler._createCompiledTemplate (C:\Users\Student\Source\Workspaces\mvs\Test2\Test2\node_modules\@angular\compiler\bundles\compiler.umd.js:16869:210)
at C:\Users\Student\Source\Workspaces\mvs\Test2\Test2\node_modules\@angular\compiler\bundles\compiler.umd.js:16807:43
at Array.forEach (native)
at C:\Users\Student\Source\Workspaces\mvs\Test2\Test2\node_modules\@angular\compiler\bundles\compiler.umd.js:16805:50
at Array.forEach (native)
at RuntimeCompiler._compileComponents (C:\Users\Student\Source\Workspaces\mvs\Test2\Test2\node_modules\@angular\compiler\bundles\compiler.umd.js:16804:45)

一切看起来都对我,但我是Angular 2和ASP.NET的新手,所以我不知道它是编译器问题还是人为错误.以下是一些代码,如果您需要更多信息,则回复此链接的链接位于此问题的顶部.

ClientApp /应用/ app.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { UniversalModule } from 'angular2-universal';
import { AppComponent } from './components/app/app.component';
import { TestComponent } from './components/app/test.component';

@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        TestComponent
    ],
    imports: [
        UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
        RouterModule.forRoot([
            { path: 'test', component: TestComponent },
            { path: '', redirectTo: 'test', pathMatch: 'full' },
            { path: '**', redirectTo: 'test' }
        ])
    ]
})
export class AppModule {
}

ClientApp /应用/组件/应用/ app.component.ts

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

@Component({
    selector: 'app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
}

ClientApp /应用/组件/应用/ test.component.ts

import {Component, Input, OnInit} from '@angular/core';

@Component({
    templateUrl: './test.component.html',
    styleUrls: ['./test.component.css']
})

export class TestComponent implements OnInit {
    testing: String;

    ngOnInit(): void {
        this.testing = "This Works";
    }
}

Answer 1

UniversalModule目前要求模板和样式的外部资源使用require().

尝试templateUrl: './test.component.html'改为template: require('./test.component.html').

而styleUrls: ['./test.component.css']到styles: [require('./test.component.css')]

有关此问题的更多详细信息,请参见此处:无法在不使用require()的情况下加载资产

作为参考,这里是Angular on Github上的问题线程:track runtime styleUrls.他们建议使用angular2-template-loader.