Angular2/ASP.NET - "Нет реализации ResourceLoader. Не удается прочитать URL-адрес"

Я пытаюсь создать собственный Angular 2/ASP.NET SPA на Visual Studio. Здесь вы можете найти все файлы здесь.

То, что я пытался сделать, просто: после того, как я выполнил инструкции по настройке приложения здесь, я начал добавлять в свои собственные файлы в попытке сделать некоторую базовую маршрутизацию, и я удалил некоторые лишние файлы. У меня 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, поэтому я не знаю, является ли это проблемой компилятора или человеческой ошибкой. Вот некоторые из кода, если вам нужна дополнительная информация, ссылка на репо находится в верхней части этого вопроса.

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";
    }
}

Ответы

Ответ 1

В UniversalModule в настоящее время требуется, чтобы внешние активы для шаблонов и стилей использовали require().

Попробуйте изменить templateUrl: './test.component.html' на template: require('./test.component.html').

И styleUrls: ['./test.component.css'] до styles: [require('./test.component.css')]

Подробнее об этом можно узнать здесь: Невозможно загрузить активы без использования require()

Для справки, вот нить проблемы из Angular в Github: track runtime styleUrls. Они рекомендуют использовать angular2 -template-loader.

Ответ 2

Моя проблема заключалась в том, что я webpack noob и попытался выполнить команду tsc, которая согласно Стив Сандерсон:

заставляет VS выворачивать мусорные файлы .js по всем исходным каталогам...

Исправление составляет

Очистите файлы *.js и *.js.map
Убедитесь, что <TypeScriptCompileBlocked> истинно в *.csproj
Повторить запуск проекта

Ответ 3

Эта проблема возникает из angular2-template-loader с SSR, и есть несколько причин, почему эта проблема появляется:

Важно. Проверьте, обновлен ли angular2-template-loader.

Обычно все проблемы связаны с @Component.

Как будет упомянуто - в имени компонента. (это было исправлено)
Комментарии в @Component

Ответ 4

Проверьте версию webpack (в окне командной строки, запустите webpack --version), если она 1.XX, затем установите последнюю версию webpack 2 (2.2.X) и запустите ее в папке с решением и повторите попытку

Ответ 5

Я столкнулся с этим, и в моем случае проблема была связана с обновлением загрузчика angular2 -templeate. Новая версия "0.6.1" вызвала эту ошибку. Я представил предыдущую версию "0.6.0", и все сработало нормально.

Ответ 6

У меня была такая же проблема, и ни одно из вышеперечисленных решений не помогло. Тем не менее, я видел упоминание в видео YouTube Стив Сандерсон, что templateUrl: (и styleUrls:) можно заменить только шаблоном: (и стили:). Итак, я сделал выстрел в темноте. Это фиксированные вещи для меня, и я смог перейти к следующему препятствию.

Ответ 7

В моем случае я решил проблему, удалив дефис из имени компонента: product-list.component = > неправильный productlist.component = > OK