Question

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

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

在我的组件类中：

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
}

在webpacker中更新style加载程序

配置/的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

应用程序/ JavaScript的/ hello_angular /应用程序/ 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!';
}

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

2 个答案: