在构建期间在 Angular 中加载静态文件答案

【问题标题】：Loading a static file in Angular during build在构建期间在 Angular 中加载静态文件
【发布时间】：2017-10-17 06:59:29
【问题描述】：

我想在构建时加载文件的内容并在 TypeScript 中将其作为字符串注入。我知道这段代码通常是服务器代码，但我想要的是有一个构建步骤来读取文件并将其内容作为字符串注入。

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

@Component({
  template: `<pre>${readFileSync('./example.code')}</pre>`
})
export class ExampleComponent { }

假设example.code 只有"Hello World" 我希望这个文件被构建为：

template: `<pre>"Hello World"</pre>`

我发现babel-plugin-static-fs 我认为应该允许我这样做，但我最初使用ng (angular-cli) 来构建项目。我已经完成了ng eject 并更新了 webpack：

module: {
  rules: [
    /* snip */
    {
      "test": /\.ts$/,
      "use": [
        {
          loader: "babel-loader",
          options: {
            plugins: ['babel-plugin-static-fs']
          }
        },
        {
          "loader": "@ngtools/webpack"
        }, ] } ] }

但是，当我运行 webpack 时，我仍然得到

Cannot find module 'fs'

如果我颠倒加载器的顺序，似乎 babael 不喜欢可能注释中使用的@，例如上面的@Component，因此加载器不起作用。

有没有办法在 Angular 项目构建期间将文件加载为静态内容？

【问题讨论】：

WebPack 将捆绑任何导入的内容。你试过import str from './example.code'吗？您可能需要为 *.code 规则分配一个 raw-loader。
@ThinkingMedia 这只是一个例子；这些文件本身可能是 TypeScript 文件。我想要这些文件的源代码，其中一些文件也可以用作项目源代码，所以我不能跳过它们。
您可以根据文件扩展名甚至文件本身的位置适当地配置您的加载程序。比较容易。
我想转译和字符串注入相同的文件；配置加载器不是问题
您是否通过运行此命令安装了软件包：npm install babel-plugin-static-fs --save-dev

标签： node.js angular typescript webpack babeljs

【解决方案1】：

这里的问题实际上与 Angular 为 AoT 创建和使用的 tsconfig.app.json 文件有关。这与用于实际构建项目的tsconfig.json 不同，该项目确实按预期加载@types/node。

如果您使用ng new 创建了一个项目，您可以更改tsconfig.app.json：

- "types": [],
+ "types": ["node"],

这将使 AoT 编译器使用来自 @types/node 的类型定义。

【讨论】：