Angular Hybrid，如何加载templateUrl答案

【问题标题】：Angular Hybrid, how to load templateUrl'sAngular Hybrid，如何加载templateUrl
【发布时间】：2018-07-12 07:36:10
【问题描述】：

我有一个 AngularJS/Angular 混合版本。对于 templateUrl，我将 ngtemplate-loader 用于 AngularJS，将 angular2-template-loader 用于 Angular。我遇到的问题是根据 Angular 版本加载正确的模板。我可以通过命名约定来区分 html。 AngularJS 文件是 fileName.html，而 Angular 文件是 fileName.component.html。

对于 ngtemplate-loader 我有：

{
    test: /\.(html)$/,
    exclude: [/\.(^(?!.*\.component\.html).*.html$)/],
    use: [{
        loader: 'ngtemplate-loader',
        options: {
            prefix: '/',
            relativeTo: path.resolve(__dirname, './path/to/templates')
        }
    }, {
        loader: 'html-loader'
    }],
}

对于 angular2-template-loader 我有：

{
    test: /\.ts$/,
    exclude: path.resolve(__dirname, "node_modules"),
    loaders: [ 'ts-loader', 'angular2-template-loader']
}

当templateUrl匹配.component.html时，我怎么才能触摸它

我试过使用这个表达式，但没有运气。

/\.(component\.html)$/

【问题讨论】：

如果您提供一些您想要包含和排除的示例，我可以帮助您实现正则表达式

标签： angularjs angular webpack webpack-dev-server hybrid

【解决方案1】：

我并没有完全按照我想要的方式工作，但我确实找到了一个可用的解决方法，我必须将 require 与模板一起使用，而不是使用 templateUrl 属性。

对于 angularJS 模板，我的正则表达式有点偏离。

{
    test: /^(?!.*\.component\.html).*.html$/,
    use: [{
        loader: 'ngtemplate-loader',
        options: {
            prefix: '/',
            relativeTo: path.resolve(__dirname, '..', 'path/to/templates')
        }
    }, {
        loader: 'html-loader'
    }],
}

然后使用 ts 和 html loader 如下图。

{
    test: /\.ts$/,
    exclude: path.resolve(__dirname, '..', 'node_modules'),
    use: [
        {
            loader: 'ts-loader'
        },
    ]
},
{
    /**
     * This loads all Angular templates. Angular templates must be called
     * {FileName}.component.html
     */
    test: /\.(component\.html)$/,
    use: [
        {
            loader: 'html-loader'
        }
    ]
}

现在您可以在组件中加载模板。

@Component({
    selector: 'template-component',
    template: require('./template-component.html')
})

【讨论】：

【解决方案2】：

如果您使用 webpack，请查看此存储库 https://github.com/Zadvornyi/angular-hybrid-webpack

@Component({
    selector: 'ahw-accounts',
    styles: [require('./ahw-accounts.component.scss').toString()],
    templateUrl: './ahw-accounts.component.html'
})

【讨论】：