Rails 5.1 Angular templateUrl [英] Rails 5.1 Angular templateUrl

问题描述

问题

我该怎么做才能使我的Angular应用程序允许我使用 Component 装饰器的 templateUrl 属性?当您创建一个新的Rails 5.1应用程序并使用标记-webpack = angular 时，它为您提供了Angular应用程序的概念证明，但是当我开始创建更多组件时，我就开始意识到我不知道如何引用提供模板的正确路径.老实说，我什至不确定他们是否会被送达.

我尝试过的

• 尝试了多种不同的路径，从文件名一直到应用程序的根目录，一次只有一个文件夹.
• 搜索正在遇到相同问题的其他人.
• 在我的导入中的 app.module.ts 中包括 CommonModule .

背景

我真的很习惯使用Angular CLI，而且我不记得使用 templateUrl 属性时遇到过任何问题.就影响模板的配置而言，Angular CLI项目与Rails 5.1应用程序中给您的内容有何不同?我是否可以在Rails 5.1应用程序中使用Angular CLI，而不必更改许多Rails应用程序本身?

解决方案

可以完成.但这需要不同的webpack加载程序设置和一些小的调整.

但首先:购物！

  $纱线添加\html-loader \很棒的脚本加载器angular2-template-loader \@ types/node \--dev 

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

  const {env} = require('../configuration.js');isProd = env.NODE_ENV ==='生产';module.exports = {测试:/\.ts $/，采用: [{loader:"awesome-typescript-loader"，选项:{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 = {测试:/\.html $/，loader:"html-loader"，}; 

这里没有什么晦涩的地方.继续前进.

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

 声明模块"* .html" {const内容:字符串导出默认内容} 

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

最后但并非最不重要的一点是，您已将.html添加到 config/webpacker.yml 中的可识别扩展名中:

 默认值:& default#...扩充功能:#...-.html#... 

现在，您应该可以参加:

 从'@ angular/core'导入{组件};@零件({选择器:"hello-angular"，templateUrl:"./template.html"})导出类AppComponent {name ='Angular！';} 

别忘了重新启动 bin/webpack-dev-server .

理论上，您可以对 styleUrls 执行相同的操作.但这与rails/webpacker更加纠结，您将失去一些功能.

Question

What do I need to do to get my Angular application to allow me to use the templateUrl property of the Component decorator? When you create a new Rails 5.1 application and use the flag --webpack=angular, it gives you a proof of concept Angular application, but as soon as I started creating more components, I began to recognize that I don't know how to refer to the correct path that the templates are being served. I'm not even sure if they are being served, to be honest.

What I've tried

• Tried many different variations of the path, from just the file name all the way to the root of the application, one folder at a time.
• Googling for someone else running into the same problem.
• include the CommonModule in my imports in app.module.ts.

Background

I'm really used to using the Angular CLI and I don't remember ever having an issue using the templateUrl property. What is different about an Angular CLI project to what's given to you in a Rails 5.1 app in terms of configuration affecting templates? Would I be able to use Angular CLI in a Rails 5.1 app without having to change much of the Rails app itself?

解决方案

Can be done. But this needs a different webpack loader setup and several minor tweaks.

But first: shopping!

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

With all required packages installed replace config/webpack/loaders/angular.js with this:

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 scans your Component decorators for the templateUrl argument and replaces it with something like template: require('...')'. The require() call is the reason for installing @types/node by the way. awesome-typescript-loader is a bit more optimized than the default ts-loader (which will probably work here as well, but I didn't test it).

So far so good. Next we need to tell webpack how to actually load HTML files. Add config/webpack/loaders/html.js with the following content:

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

Nothing obscure here. Moving on.

In your Javascript app add type informations for *.html files to app/javascript/hello_angular/html.d.ts:

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

This tells the TypeScript compiler that require('template.html') returns a string.

Last but not least you have add .html to the recognized extensions in config/webpacker.yml:

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

Now you should be good to go:

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

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

Don't forget to restart bin/webpack-dev-server.

Theoretically you could do the same for styleUrls. But this is more tangled with rails/webpacker and you would loose some of it's features.

这篇关于Rails 5.1 Angular templateUrl的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！