Question

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

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

但我需要从cshtml视图中仅加载一些模板，并且只有在我打开这些视图时才会加载额外的服务器请求。

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

但是我试图将其设置为加载模板

@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文件的Loader，但是这不应该解析字符串，因为最后没有.html： - /

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

Answer 1

关键是延迟加载和

angular2-load-children-loader

加载ts模板依赖项