使用 angular 2 和 asp.net mvc cshtml 作为模板的 Webpack 2答案

【问题标题】：Webpack 2 with angular 2 and asp.net mvc cshtml as template使用 angular 2 和 asp.net mvc cshtml 作为模板的 Webpack 2
【发布时间】：2017-06-23 22:36:54
【问题描述】：

我有一个使用 Angular 2 和 webpack 2 运行的项目，但目前我将所有模板直接加载到 js 文件中，而无需从服务器加载额外的模板。这很好用。

@Component({
selector: 'logmonitor',
styleUrls: [ './logmonitor.component.less' ],
templateUrl: './logmonitor.component.html'
}) ...

但我只需要从 cshtml 视图加载一些模板，并且当我打开这些视图时，这些视图应该只加载额外的服务器请求。

我在我的视图文件夹中创建了一个简单的 cshtml 视图，当在 url 中键入正确的控制器/操作时，我可以直接“显示”它。那“有效”

但我已尝试将其设置为加载模板

@Component({
  selector: 'testView',
  templateUrl: 'Logviewer/TestLogview',
}) ...

但是 webpack 不会编译它给出错误的视图

Module not found: Error: Can't resolve './Logviewer/TestLogview' in 'C:\SourceControl\WebLogViewer\App\Views\LogViewer'

没错，文件是在里面

C:\SourceControl\WebLogViewer\Views\LogViewer

但我不希望 webpack 尝试解析这个 url，Angular 本身需要在加载视图时调用这个 url。当我不在文件名前面写“./”时，我认为webpack不会尝试加载cshtml文件，但这不起作用。有什么解决方案可以防止 webpack 解析所有 templateUrl 吗？

这是我当前的 html 文件加载器，但这不应该解析字符串，因为末尾没有 .html :-/

{
   test: /\.html$/,
   use: ['raw-loader'],
   exclude: [helpers.root('App/index.html')]
},

【问题讨论】：

标签： asp.net-mvc angular razor webpack-2

【解决方案1】：

您可以在这个 repo 中找到一个工作示例。 https://github.com/timdows/webpages/tree/master/Angular2RazorViews

关键是延迟加载和

angular2-load-children-loader

在加载ts模板依赖

【讨论】：