将 moment.js 排除在我的 Angular 构建输出之外

Question

我正在开发一个 Angular Spa（使用 Angular CLI），我想将 moment.js 作为外部脚本包含在页面中：

    <script src="/lib/moment.min.js"></script>

这是因为我只想将相关语言环境的加载移动到服务器端，第一步是 moment.js 退出构建。

因此，我需要使用此导入机制使构建的其余部分正常工作，理想情况下保持 Moment.js 打字工作正常。类似于：

declare const moment: moment.MomentType;
// or something like
interface Window {
  moment: moment.MomentType
}

这种语法（或我能想出的任何变体）让我不断收到类似 Cannot find namespace 'moment'.

的错误

我已经尝试删除所有 import { moment } from 'moment';，我尝试了 declare const moment: any; 的变体，但它们没有给我类型安全性，而且我找不到导入 [=] 的方法18=]，通过 tsconfig "files" 属性或在项目的 tsconfig.app.json "include" 属性.

有没有办法让它工作？

谢谢！

Answer 1

你可以像这样为 moment js 创建一个单独的构建文件

angular.json

"scripts": [
  {
    "inject": true,
    "bundleName": "moment-build",
    "input": "node_modules/moment/min/moment.min.js"
  }
]

inject :true this add a script element for moment-build.js in index.html

例如，此构建通过直接在主要组件中导入 moment

这是我创建单独构建文件时的构建结果moment-build.js

Answer 2

看来我终于找到了解决办法。

解决方法有两个：

暂时在页面中插入一个 script 标记，并为适当的语言环境插入一个标记。我在我的服务器生成的 MVC 视图中执行此操作。 index.html 页面中包含相同的两个标签，我使用 ng serve 进行 Angular 开发。
这在全局 window.

moment

<script src="/assets/lib/moment/moment.min.js"></script> <script src="/assets/lib/moment/locale/it.js"></script>

在 Angular 开发模式下，我删除了每个 import moment from 'moment'; 和 import * as moment from 'moment'; 或其变体。
相反，我使用本地 const moment = window['moment'];.
这不会给我任何类型安全，但我可以利用 Typescript 的新 import 语法（here for a nice presentation and here 作为参考）来访问 type moment模块：

// just importing the module for the type // will not add the module to the build output export const moment: typeof import('moment') = window['moment']; type Moment = import('moment').Moment; type LongDateFormatSpec = import('moment').LongDateFormatSpec; type DurationInputObject = import('moment').DurationInputObject; type Locale = import('moment').Locale;

而且，瞧，我们刚刚从构建中削减了约 300 KB，并且仍然可以编写类型安全的代码。

将 moment.js 排除在我的 Angular 构建输出之外

Keeping moment.js out of my Angular build output

momentjs

typescript

typescript-typings

angular