Question

问题

我需要做些什么才能让我的Angular应用程序允许我使用templateUrl装饰器的Component属性？当您创建一个新的Rails 5.1应用程序并使用标志--webpack=angular时，它会为您提供Angular应用程序的概念验证，但是当我开始创建更多组件时，我开始认识到我不知道如何请参阅模板正在提供的正确路径。老实说，我甚至不确定他们是否得到了服务。

我尝试了什么

尝试了许多不同的路径变体，从文件名一直到应用程序的根目录，一次只有一个文件夹。
搜索遇到同样问题的其他人。
在我CommonModule的导入中加入app.module.ts。

背景

我真的习惯使用Angular CLI，我不记得使用templateUrl属性时遇到问题。在配置影响模板方面，在Rails 5.1应用程序中为您提供的Angular CLI项目有何不同？我是否可以在Rails 5.1应用程序中使用Angular CLI而无需更改Rails应用程序本身的大部分内容？

Answer 1

可以做到。但这需要一个不同的webpack加载器设置和几个小调整。

但首先：购物！

$ yarn add \
    html-loader \
    awesome-typescript-loader \
    angular2-template-loader \
    @types/node \
    --dev

安装所有必需的软件包后，将config/webpack/loaders/angular.js替换为：

const {env} = require('../configuration.js');
isProd = env.NODE_ENV === 'production';
module.exports = {
    test: /\.ts$/,
    use: [
        {
            loader: 'awesome-typescript-loader',
            options: { useCache: !isProd }
        },
        'angular2-template-loader'
    ]
};

angular2-template-loader扫描组件装饰器以查找templateUrl参数，并将其替换为template: require('...')'之类的内容。 require()电话是顺便安装@types/node的原因。 awesome-typescript-loader比默认ts-loader更优化（这可能也适用于此，但我没有对其进行测试）。

到目前为止一切顺利。接下来我们需要告诉webpack如何实际加载HTML文件。添加config/webpack/loaders/html.js以及以下内容：

module.exports = {
    test: /\.html$/,
    loader: 'html-loader',
};

这里没有什么模糊不清的。继续前进。

在您的Javascript应用中，将* .html文件的类型信息添加到app/javascript/hello_angular/html.d.ts：

declare module "*.html" {
  const content: string
  export default content
}

这告诉TypeScript编译器require('template.html')返回一个字符串。

最后但并非最不重要的是，您已将.html添加到config/webpacker.yml中的已识别扩展程序：

default: &default
  # ...
  extensions:
    # ...
    - .html
    # ...

现在你应该好好去：

import { Component } from '@angular/core';

@Component({
  selector: 'hello-angular',
  templateUrl: './template.html'
})
export class AppComponent {
  name = 'Angular!';
}

不要忘记重新启动bin/webpack-dev-server。

从理论上讲，你可以为styleUrls做同样的事情。但是这与rails / webpacker更加纠结，你会失去它的一些功能。

Rails 5.1 Angular templateUrl

问题

我尝试了什么

背景

1 个答案: