Question

我试图在Visual Studio上构建自己的Angular 2 / ASP.NET SPA。您可以找到所有文件here。

我尝试做的很简单：在我按照说明设置应用程序here之后，我开始添加自己的文件以尝试进行一些基本路由，并删除了一些多余的文件。我有 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')]

有关此问题的更多详细信息，请访问：Unable to load assets without using require()

供参考，这是Angular在Github上的问题线程：track runtime styleUrls。他们建议使用angular2-template-loader。

Answer 2

我的问题是我是一个webpack noob，并尝试按照Steve Sanderson执行tsc命令：

导致VS在源目录中遍布垃圾.js文件......

修复是

清理所有*.js和*.js.map个文件
确保<TypeScriptCompileBlocked>

*.csproj

再次尝试运行项目

Answer 3

此问题发生在angular2-template-loader和SSR之间出现此问题的几个原因：

重要：检查angular2-template-loader是否是最新的。

通常，所有问题都与@Component有关。

正如将在组件名称中提到-。（已经修复）
@Component

Answer 4

检查您的webpack版本（在命令行窗口中运行webpack --version），如果它是1.XX，则安装最新版本的webpack 2（2.2.X）并在解决方案文件夹上运行它，然后尝试再次

Answer 5

我遇到了这个，在我的情况下，问题来自于angular2-templeate loader的升级。新版本“0.6.1”导致出现此错误。我介绍了以前的版本“0.6.0”，一切正常。

Answer 6

我有同样的问题，上面的解决方案都没有帮助。但是，我在Steve Sanderson YouTube video中看到提及 templateUrl：（和 styleUrls：）只能替换为模板： （和样式：）。所以，我在黑暗中拍了一枪。这对我来说是固定的，我能够进入下一个障碍。

Answer 7

在我的情况下，我通过从组件名称中删除连字符来解决问题： product-list.component =＆gt;错误 productlist.component =＆gt;行

Angular2 / ASP.NET - ＆＃34;未提供ResourceLoader实现。无法读取网址＆＃34;

7 个答案: