Angular2/ASP.NET - “沒有提供 ResourceLoader 實現。無法讀取 URL”

我正在嘗試在 Visual Studio 上建構自己的 Angular 2/ASP.NET SPA。您可以在此處找到所有文件。

我嘗試做的很簡單：按照說明在此處設置應用程序後，我開始添加自己的文件以嘗試進行一些基本路由，並刪除了一些多餘的文件。我有ClientApp/app/app.module.ts引導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 都是新手，所以我不知道這是編譯器問題還是人為錯誤。這是一些程式碼，如果您需要更多資訊，則指向 repo 的連結位於此問題的頂部。

ClientApp/app/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/components/app/app.component.ts

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

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

ClientApp/app/components/app/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";
   }
}

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

嘗試更改templateUrl: './test.component.html'為template: require('./test.component.html').

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

可以在此處找到有關此問題的更多詳細資訊：Unable to load assets without using require()

作為參考，這裡是來自 Angular 在 Github 上的問題執行緒：track runtime styleUrls。他們推薦使用 angular2-template-loader。

引用自：https://stackoverflow.com/questions/41797199