Angular 5/ASP.NET - "ResourceLoaderの実装は提供されていません。 URLを読み取れません "

Question

私はVisual Studio 2017で新しいAngular5/ASP.NET SPAを構築しようとしています。そのため、.NET Core-> ASP.NET Core-Web ApplicationをAngularで作成しました。 Angular4サンプルアプリケーションを含むプロジェクトです。

このアプリケーションを実行すると問題はありません。問題は、このアプリケーションでAngular 5（5.0.1または5.0.0、重要ではありません）を実行しようとすると開始されます。

すべての必要な手順を実行した後、アプリはデバッグモードで正常に動作します。

An unhandled exception occurred while processing the request. 

NodeInvocationException: No ResourceLoader implementation has been provided. Can't read the url "app.component.html" 
Error: No ResourceLoader implementation has been provided. Can't read the url "app.component.html" 
at Object.get (E:\angular4_spielwiese\vs spielwiese\myAngularApp\myAngularApp\ClientApp\dist\vendor.js:98069:15) 
at DirectiveNormalizer.module.exports.DirectiveNormalizer._fetch (E:\angular4_spielwiese\vs spielwiese\myAngularApp\myAngularApp\ClientApp\dist\vendor.js:44087:43) 
at DirectiveNormalizer.module.exports.DirectiveNormalizer._preParseTemplate (E:\angular4_spielwiese\vs spielwiese\myAngularApp\myAngularApp\ClientApp\dist\vendor.js:44142:29) 
at DirectiveNormalizer.module.exports.DirectiveNormalizer.normalizeTemplate (E:\angular4_spielwiese\vs spielwiese\myAngularApp\myAngularApp\ClientApp\dist\vendor.js:44122:36) 
at CompileMetadataResolver.module.exports.CompileMetadataResolver.loadDirectiveMetadata (E:\angular4_spielwiese\vs spielwiese\myAngularApp\myAngularApp\ClientApp\dist\vendor.js:55794:75) 
at E:\angular4_spielwiese\vs spielwiese\myAngularApp\myAngularApp\ClientApp\dist\vendor.js:74510:72 
at Array.forEach (native) 
at E:\angular4_spielwiese\vs spielwiese\myAngularApp\myAngularApp\ClientApp\dist\vendor.js:74509:72 
at Array.forEach (native) 
at JitCompiler.module.exports.JitCompiler._loadModules (E:\angular4_spielwiese\vs spielwiese\myAngularApp\myAngularApp\ClientApp\dist\vendor.js:74506:75) 
Microsoft.AspNetCore.NodeServices.HostingModels.HttpNodeInstance+<InvokeExportAsync>d__7.MoveNext() 

何私がAngular5への移動のために行うことです：すべての角度-モジュールのpackage.jsonで の変更バージョンが、ビルドおよびリリースでそれを起動（または紺碧に展開）しようとすると、次のエラーにつながります5.0.1に、またtypescriptです、rxjs、角度/ CLIおよび@ ngtools/WebPACKのための新しいバージョンに行く（1.5.0 - > 1.8.0） だから私の新しいpackage.jsonは次のようになります。

{ 
    "name": "myAngularApp", 
    "private": true, 
    "version": "0.0.0", 
    "scripts": { 
    "test": "karma start ClientApp/test/karma.conf.js" 
    }, 
    "dependencies": { 
    "@angular/animations": "^5.0.1", 
    "@angular/common": "^5.0.1", 
    "@angular/compiler": "^5.0.1", 
    "@angular/core": "^5.0.1", 
    "@angular/forms": "^5.0.1", 
    "@angular/http": "^5.0.1", 
    "@angular/platform-browser": "^5.0.1", 
    "@angular/platform-browser-dynamic": "^5.0.1", 
    "@angular/platform-server": "^5.0.1", 
    "@angular/router": "^5.0.1", 
    "@types/webpack-env": "^1.13.0", 
    "angular2-template-loader": "^0.6.2", 
    "aspnet-prerendering": "^3.0.1", 
    "aspnet-webpack": "^2.0.1", 
    "awesome-typescript-loader": "^3.2.1", 
    "bootstrap": "^3.3.7", 
    "css": "^2.2.1", 
    "css-loader": "^0.28.7", 
    "es6-shim": "^0.35.3", 
    "event-source-polyfill": "0.0.9", 
    "expose-loader": "^0.7.3", 
    "extract-text-webpack-plugin": "^3.0.2", 
    "file-loader": "^1.1.5", 
    "html-loader": "^0.5.1", 
    "html-webpack-plugin": "^2.30.1", 
    "isomorphic-fetch": "^2.2.1", 
    "jquery": "^3.2.1", 
    "json-loader": "^0.5.4", 
    "preboot": "^5.1.7", 
    "raw-loader": "^0.5.1", 
    "reflect-metadata": "^0.1.10", 
    "rxjs": "^5.5.2", 
    "style-loader": "^0.19.0", 
    "to-string-loader": "^1.1.5", 
    "typescript": "^2.6.1", 
    "zone.js": "^0.8.18" 
    }, 
    "devDependencies": { 
    "@angular/cli": "1.5.0", 
    "@angular/compiler-cli": "^5.0.1", 
    "@ngtools/webpack": "1.8.0", 
    "@types/chai": "4.0.1", 
    "@types/jasmine": "2.6.3", 
    "chai": "4.0.2", 
    "jasmine-core": "2.6.4", 
    "karma": "1.7.0", 
    "karma-chai": "0.1.0", 
    "karma-chrome-launcher": "2.2.0", 
    "karma-cli": "1.0.1", 
    "karma-jasmine": "1.1.0", 
    "karma-webpack": "2.0.3", 
    "url-loader": "0.6.2", 
    "webpack": "3.8.1", 
    "webpack-hot-middleware": "2.20.0", 
    "webpack-merge": "4.1.1" 
    } 
} 

次に、webpack.config.jsのAotPluginをAngularCompilerPluginに変更します。 これは私のwebpack.config.jsです：

const path = require('path'); 
const webpack = require('webpack'); 
const merge = require('webpack-merge'); 
const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin; 
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin; 

module.exports = (env) => { 
    // Configuration in common to both client-side and server-side bundles 
    const isDevBuild = !(env && env.prod); 
    const sharedConfig = { 
     stats: { modules: false }, 
     context: __dirname, 
     resolve: { extensions: [ '.js', '.ts' ] }, 
     output: { 
      filename: '[name].js', 
      publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix 
     }, 
     module: { 
      rules: [ 
       { test: /\.ts$/, include: /ClientApp/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },// '@ngtools/webpack' }, 
       { test: /\.html$/, use: 'html-loader?minimize=false' }, 
       { test: /\.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] }, 
       { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' } 
      ] 
     }, 
     plugins: [new CheckerPlugin()] 
    }; 

    // Configuration for client-side bundle suitable for running in browsers 
    const clientBundleOutputDir = './wwwroot/dist'; 
    const clientBundleConfig = merge(sharedConfig, { 
     entry: { 'main-client': './ClientApp/boot.browser.ts' }, 
     output: { path: path.join(__dirname, clientBundleOutputDir) }, 
     plugins: [ 
      new webpack.DllReferencePlugin({ 
       context: __dirname, 
       manifest: require('./wwwroot/dist/vendor-manifest.json') 
      }) 
     ].concat(isDevBuild ? [ 
      // Plugins that apply in development builds only 
      new webpack.SourceMapDevToolPlugin({ 
       filename: '[file].map', // Remove this line if you prefer inline source maps 
       moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk 
      }) 
     ] : [ 
      // Plugins that apply in production builds only 
      new webpack.optimize.UglifyJsPlugin(), 
      new AngularCompilerPlugin({ 
       tsConfigPath: './tsconfig.json', 
       entryModule: path.join(__dirname, 'ClientApp/app/app.module.browser#AppModule'), 
       exclude: ['./**/*.server.ts'] 
      }) 
     ]) 
    }); 

    // Configuration for server-side (prerendering) bundle suitable for running in Node 
    const serverBundleConfig = merge(sharedConfig, { 
     resolve: { mainFields: ['main'] }, 
     entry: { 'main-server': './ClientApp/boot.server.ts' }, 
     plugins: [ 
      new webpack.DllReferencePlugin({ 
       context: __dirname, 
       manifest: require('./ClientApp/dist/vendor-manifest.json'), 
       sourceType: 'commonjs2', 
       name: './vendor' 
      }) 
     ].concat(isDevBuild ? [] : [ 
      // Plugins that apply in production builds only 
      new AngularCompilerPlugin({ 
       tsConfigPath: './tsconfig.json', 
       entryModule: path.join(__dirname, 'ClientApp/app/app.module.server#AppModule'), 
       exclude: ['./**/*.browser.ts'] 
      }) 
     ]), 
     output: { 
      libraryTarget: 'commonjs', 
      path: path.join(__dirname, './ClientApp/dist') 
     }, 
     target: 'node', 
     devtool: 'inline-source-map' 
    }); 

    return [clientBundleConfig, serverBundleConfig]; 
}; 

私は今、私は上記のスタックトレースを取得VS2017の外に放出-config設定で（NPM --env.prodスイッチでのWebPACK実行し、インストールを実行）アプリケーションを起動します。 Azureにアプリケーションをデプロイするときも同じことが起こります。

ローカルホストの場合、数秒待ってブラウザを強制的にリロードすると、アプリケーションが突然動作します。これは私にはちょっと奇妙なAzureでは動作しません。

あなたは私が間違っていたかもしれない何か、あるいは私が逃していることを示唆していますか？

Answer 1

私は数日間同じ問題を抱えていましたが、私はwebpack.config.jsをコピーしたGitHub（正確なURLはありません）でVS2017-Angular 5プロジェクトを見つけました。 私も更新しました（または 'dotnet publish -c Release'） 私が直面した（そしてまだ直面している）唯一の問題は、複雑化中です。コンパイラはメインサーバを壊します.jsなので、回避策として、問題の前にmain-server.jsをコピーしました（10MB vs 2MB）。 'dotnet mydll.dll'を実行しているときにうまくいきます。

webpack.config.js：

/* 
* Webpack (JavaScriptServices) with a few changes & updates 
* - This is to keep us inline with JSServices, and help those using that template to add things from this one 
* 
* Things updated or changed: 
* module -> rules [] 
* .ts$ test : Added 'angular2-router-loader' for lazy-loading in development 
* added ...sharedModuleRules (for scss & font-awesome loaders) 
*/ 

const path = require('path'); 
const webpack = require('webpack'); 
const merge = require('webpack-merge'); 
const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin; 
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin; 
//const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; 

module.exports = (env) => { 
    // Configuration in common to both client-side and server-side bundles 
    const isDevBuild = !(env && env.prod); 
    const sharedConfig = { 
     stats: { modules: false }, 
     context: __dirname, 
     resolve: { extensions: ['.js', '.ts'] }, 
     output: { 
      filename: '[name].js', 
      publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix 
     }, 
     module: { 
      rules: [ 
       { test: /\.ts$/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] : '@ngtools/webpack' }, 
       { test: /\.html$/, use: 'html-loader?minimize=false' }, 
       { test: /\.css$/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize'] }, 
       { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }   ] 
     }, 
     plugins: [new CheckerPlugin()] 
    }; 

    // Configuration for client-side bundle suitable for running in browsers 
    const clientBundleOutputDir = './wwwroot/dist'; 
    const clientBundleConfig = merge(sharedConfig, { 
     entry: { 'main-client': './ClientApp/boot.browser.ts' }, 
     output: { path: path.join(__dirname, clientBundleOutputDir) }, 
     plugins: [ 
      new webpack.DllReferencePlugin({ 
       context: __dirname, 
       manifest: require('./wwwroot/dist/vendor-manifest.json') 
      }) 
     ].concat(isDevBuild ? [ 
      // Plugins that apply in development builds only 
      new webpack.SourceMapDevToolPlugin({ 
       filename: '[file].map', // Remove this line if you prefer inline source maps 
       moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk 
      }) 
     ] : [ 
       // new BundleAnalyzerPlugin(), 
       // Plugins that apply in production builds only 
       new webpack.optimize.UglifyJsPlugin(), 
       new AngularCompilerPlugin({ 
        tsConfigPath: './tsconfig.json', 
        entryModule: path.join(__dirname, 'ClientApp/app/app.module.browser#AppModule'), 
        exclude: ['./**/*.server.ts'] 
       }) 
      ]), 
     devtool: isDevBuild ? 'cheap-eval-source-map' : false, 
     node: { 
      fs: "empty" 
     } 
    }); 

    // Configuration for server-side (prerendering) bundle suitable for running in Node 
    const serverBundleConfig = merge(sharedConfig, { 
     // resolve: { mainFields: ['main'] }, 
     entry: { 'main-server': './ClientApp/boot.server.ts' }, 
     plugins: [ 
      new webpack.DllReferencePlugin({ 
       context: __dirname, 
       manifest: require('./ClientApp/dist/vendor-manifest.json'), 
       sourceType: 'commonjs2', 
       name: './vendor' 
      }), 
      new webpack.ContextReplacementPlugin(
       // fixes WARNING Critical dependency: the request of a dependency is an expression 
       /(.+)?angular(\\|\/)core(.+)?/, 
       path.join(__dirname, 'src'), // location of your src 
       {} // a map of your routes 
      ), 
      new webpack.ContextReplacementPlugin(
       // fixes WARNING Critical dependency: the request of a dependency is an expression 
       /(.+)?express(\\|\/)(.+)?/, 
       path.join(__dirname, 'src'), 
       {} 
      ) 
     ].concat(isDevBuild ? [] : [ 
      new webpack.optimize.UglifyJsPlugin({ 
       compress: false, 
       mangle: false 
      }), 
      // Plugins that apply in production builds only 
      new AngularCompilerPlugin({ 
       tsConfigPath: './tsconfig.json', 
       entryModule: path.join(__dirname, 'ClientApp/app/app.module.server#AppModule'), 
       exclude: ['./**/*.browser.ts'] 
      }) 
     ]), 
     output: { 
      libraryTarget: 'commonjs', 
      path: path.join(__dirname, './ClientApp/dist') 
     }, 
     target: 'node', 
     // switch to "inline-source-map" if you want to debug the TS during SSR 
     devtool: isDevBuild ? 'cheap-eval-source-map' : false 
    }); 

    return [clientBundleConfig, serverBundleConfig]; 
}; 

EDIT - webpack.config.js上の変更に加えて、私は、インデックスでは私の問題!: を解決し、以下の2つの変更を行いました。 CSHTML： 変更から

<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app> 

へ：

<app>Loading...</app> 

boot.serverにあります。TS： 変更から：

const zone = moduleRef.injector.get(NgZone); 

へ：

const zone: NgZone = moduleRef.injector.get(NgZone); 

詳細は読むhttp://www.talkingdotnet.com/upgrade-angular-4-app-angular-5-visual-studio-2017/。