使用 angular 的 Rails 项目中的 Webpacker 无法从外部模板导入 .html.erb 和 .css [英] Webpacker in Rails Project using angular cannot import .html.erb and .css from external template

问题描述

我的项目使用 angular 4.我想将 html.erb 和 .css 文件与 js 文件分开.我在 component.ts 文件中尝试了以下内容.我做了一些配置来使用 webpacker 文档加载外部 html.但它不允许我导入 .html.erb 文件.以及无法加载 css 文件.我也尝试加载 sass 文件但没有工作.

I am using angular 4 for my project. I want to keep my html.erb and .css files separate from js files. I tried the following in my component.ts file. I did some configuration to load external html using the webpacker docs. But it is not letting me import .html.erb file. As well as the css file cannot be loaded. I also tried to load sass file but not working.

import templateString from './templatestring.html.erb';
import styles from './styles.css';

在我的组件类中:

templateUrl: templateString,
styleUrls: ['./style.css']

这是给出错误而不是工作.

And this is giving the error and not working.

请告诉我如何解决这个问题，我不想使用内联模板和样式表.

Please tell me how to fix this issue, I don't want to use inline template and stylesheet.

推荐答案

请检查这个 https://github.com/rails/webpacker/blob/master/docs/typescript.md#html-templates-with-typescript-and-angular

yarn add html-loader

将 html-loader 添加到 config/webpack/environment.js

Add html-loader to config/webpack/environment.js

environment.loaders.set('html', {
  test: /\.html$/,
  use: [{
    loader: 'html-loader',
    options: {
      minimize: true,
      removeAttributeQuotes: false,
      caseSensitive: true,
      customAttrSurround: [ [/#/, /(?:)/], [/\*/, /(?:)/], [/\[?\(?/, /(?:)/] ],
      customAttrAssign: [ /\)?\]?=/ ]
    }
  }]
})

将 .html 添加到 config/webpacker.yml

Add .html to config/webpacker.yml

  extensions:
    - .elm
    - .coffee
    - .html

设置自定义 d.ts 定义//app/javascript/hello_angular/html.d.ts

Setup a custom d.ts definition // app/javascript/hello_angular/html.d.ts

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

添加一个与 app.component.ts 相关的 template.html 文件

Add a template.html file relative to app.component.ts

<h1>Hello {{name}}</h1>
Import template into app.component.ts
import { Component } from '@angular/core'
import templateString from './template.html'

@Component({
  selector: 'hello-angular',
  template: templateString
})

export class AppComponent {
  name = 'Angular!'
}

这篇关于使用 angular 的 Rails 项目中的 Webpacker 无法从外部模板导入 .html.erb 和 .css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！