小编dis*_*ame的帖子

我正在优化我的Angular应用程序并使用webpack-bundle-analyzer来检查bundle的大小.当我运行ng build --stats-json它时会创建bundle.js文件并创建一个webpack-bundle-analyzer解析的json文件.这可以按预期工作,但是有一种方法可以构建角度应用程序,而无需优化构建执行,即获取相同文件ng serve生成的文件.我想要这个,因为我的应用程序非常大,在开发过程中重新加载它需要15秒.所以我希望能够检查这些文件.

import { environment } from '@env/environment';

export const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'organisations',
        component: OrganisationListComponent,
        data: {
          [environment.router.data.resourceName]: 'ORGANISATION' // <- error
        }
      },
      {
        path: 'organisations/create',
        component: OrganisationCreateComponent,
        data: {
          [environment.router.data.resourceName]: 'ORGANISATION_LIST' // <- error
        },...
      }

这是我的路由模块文件之一的一部分。如您所见，我希望路由数据具有我在环境文件中定义的名称的属性。但这在使用--aot标志进行编译时将无法正常工作。这是错误：

ERROR in Error during template compile of 'AdminRoutingModule'
  Expression form not supported in 'routes'
    'routes' contains the error at app/admin/admin-routing.module.ts(30,11).

我的应用程序中大约有30条路由，并且所有路由都具有带有键“ resourceName”的data属性。而且我不想在我的应用程序中重复此字符串30次。

我不能创建具有resourceName属性的类并在数据中实例化它，因为在路由配置中也不允许使用函数表达式。

有没有解决的办法，还是使用AOT编译器根本无法实现？

编辑：这是environement.ts文件：

export const environment = {
  production: true,
  version: '1.0.0', …

从Window.sessionStorage 文档：

在同一 URL 上打开多个选项卡或窗口会为每个选项卡或窗口创建 sessionStorage

https://stackblitz.com/edit/session-storage?file=index.js

输入您的姓名并点击“商店”

您的姓名现在存储在 sessionStorage 中，并且页面视图已更新。

sessionStorage.setItem('name', nameInput.value);
nameSpan.innerHTML = nameInput.value;

现在点击“在新标签页中打开”

这将通过创建指向当前页面的链接元素并调用click()它来在新选项卡中打开页面

const link = document.createElement('a');
link.target = '_blank';
link.href = '/';
link.setAttribute('visibility', 'hidden');
document.body.appendChild(link);
link.click();
link.remove();

如你所见，你的名字还在

为什么会发生这种情况，有没有办法用空 sessionStorage 打开新选项卡（不清除当前选项卡 sessionStorage）？

在 Chrome 75 和 Firefox 66 上对此进行了测试

不，它与 stackblitz 无关，在 localhost 上的行为方式相同

在我的组件中，我定义了一个属性数组，如下所示：

array: number[] | string[] = ['1', '2'];

在模板中，我使用 ngFor 迭代该数组的元素：

<div *ngFor="let element of array">
  {{element}}
</div>

但编译器抛出这个错误：

error TS2322:
Type 'number[] | string[]' is not assignable to
type '(number[] & NgIterable<number>) | null | undefined'.

array我不明白 Angular 如何以及为何推断出这种情况下的属性类型number[] & NgIterable<number>。

$any()我知道我可以通过在模板内部使用或将angularCompilerOptions.strictTemplates内部设置tsconfig.json为 来消除错误false，但如果没有必要，我想避免这样做。

我也不喜欢将属性类型更改array为的想法(number | string)[]，因为这是错误的，我array只想包含数字或字符串。

我正在使用typescript在nodejs中编程。

我正在使用pdfmake， 并且为此库安装了打字稿定义文件（@ types / pdfmake）

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/pdfmake/index.d.ts

我正在从此文件导入一个枚举

import { PageSize } from "pdfmake/build/pdfmake";

并像这样使用 PageSize.A4

这样可以编译，但是当我尝试访问该枚举的值A4时，会发生运行时错误

TypeError：无法读取未定义的属性“ A4”

任何帮助将不胜感激

package.json：

{
  "name": "nodejs-pdf-make",
  "version": "1.0.0",
  "description": "",
  "main": "dist/app.js",
  "scripts": {
    "start": "tsc && node --inspect dist/app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/express": "^4.17.1",
    "tslint": "^5.19.0",
    "typescript": "^3.6.2"
  },
  "dependencies": {
    "@types/pdfmake": "^0.1.8",
    "express": "^4.17.1",
    "pdfmake": "^0.1.58"
  }
}

tsconfig.json：

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true, …

我以为我可以用与其他任何对象相同的方式克隆File对象： JSON.parse(JSON.stringify(file))

但是，JSON.stringify(file)始终计算为"{}"。除了创建空对象并遍历文件对象的所有属性并将其添加到该对象之外，还有其他解决方法吗？

还有什么原因不能将File对象转换为字符串？我虽然只在磁盘上存储有关文件的信息，例如名称和路径，但不存储文件内容。

一段时间以来，我一直在 Angular 中创建单页应用程序，现在我想创建一个单页应用程序，但不使用整个框架。

我想要一个 .html 文件和一个 javascript 文件，它们将被编译为打字稿文件，比如index.ts. 在里面index.ts我会从其他打字稿文件中导入东西。

网上是否有与我想要实现的项目类似的项目，是否有可能像这样设置 npm 项目？

编辑：

一段时间后，这就是我完成的：我的项目结构：

??? bundle.js
??? functions.ts
??? index.html
??? index.ts
??? package.json
??? style.css
??? tsconfig.json
??? webpack.config.js

包.json

{
  "name": "rxjs6-demo",
  "version": "1.0.0",
  "main": "index.ts",
  "scripts": {
    "start": "webpack-dev-server --open"
  },
  "devDependencies": {
    "ts-loader": "^5.3.1",
    "typescript": "^3.2.2",
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  },
  "dependencies": {
    "rxjs": "^6.4.0"
  }
}

配置文件

{
    "compilerOptions": {
      "outDir": ".",
      "noImplicitAny": false,
      "sourceMap": true,
      "module": "es6",
      "target": …

我正在学习Angular,因为CLI创建的100MB文件夹"node_modules",每次创建一个新项目需要5分钟.并且此文件夹中的文件始终相同(除非您添加一些我从未做过的依赖项).有没有办法为每个项目使用一个node_modules文件夹？

我正在学习 node.js 并使用 Visual Studio Code。在我的项目中，我安装了 underscore.js。所以我的 node_modules 文件夹看起来像这样：

node_modules/
??? underscore
    ??? LICENSE
    ??? package.json
    ??? README.md
    ??? underscore.js
    ??? underscore-min.js
    ??? underscore-min.js.map

这是我的 index.js 文件：

const _ = require('underscore');
console.log(_.contains([1, 2, 3, 4], 2));

现在，当我对containsindex.js 中的函数执行 Ctrl+Click 时，它在 Visual Studio Code 中的意思是“转到定义”，它不会显示包含在 .js 中的函数node_modules/underscore.js。相反，它打开文件/home/user/.cache/typescript/2.9/node_modules/@types/underscore/index.d.ts

这是一个打字稿文件，而不是 javascript，我不明白它来自哪里？我不认为它是从 javascript 文件自动生成的，因为 js 文件中不存在注释。我执行的时候有没有下载到我的电脑上npm install underscore？是否可以转到 js 文件中的函数定义而不是这个（在 VSCode 中）？