Rails 项目中的 Webpacker 使用 angular 无法从外部模板导入 .html.erb 和 .css

Question

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

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

在我的组件中 class:

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

这给出了错误并且不起作用。

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

Answer 1

请检查这个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

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

将 .html 添加到 config/webpacker.yml

  extensions:
    - .elm
    - .coffee
    - .html

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

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

相对于 app.component.ts

添加一个 template.html 文件

<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!'
}

Answer 2

关于 css，您在 webpakcer rpeo 中评论了相同的问题。 https://github.com/rails/webpacker/issues/963

声明一个模块

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

更新 style webpacker 中的加载器

config/webpack/environment.js

const { environment } = require('@rails/webpacker')

environment.loaders.set('style', {
    test: /\.(scss|sass|css)$/,
    use: [{
        loader: "to-string-loader"
    }, {
        loader: "css-loader"
    }, {
        loader: "postcss-loader"
    }, {
        loader: "resolve-url-loader"
    }, {
        loader: "sass-loader"
    }]
})

module.exports = environment

进口css

app/javascript/hello_angular/app/app.component.ts

import { Component } from '@angular/core';
import styleString from './app.component.css';

@Component({
  selector: 'hello-angular',
  template: `<h1>Hello {{name}}</h1>`,
  styles:[styleString]
})
export class AppComponent {
  name = 'Angular!';
}

Rails 项目中的 Webpacker 使用 angular 无法从外部模板导入 .html.erb 和 .css

Webpacker in Rails Project using angular cannot import .html.erb and .css from external template

webpack

ruby-on-rails-5

webpacker

angular