角7+的动态导入

Question

我正在尝试构建包含一些具有动态导入的组件的项目，例如：

import {Directive, Input, ElementRef} from '@angular/core';

@Directive({
  selector: '[saKnob]'
})
export class KnobDirective {

  @Input() saKnob: any;
  constructor(private el: ElementRef) {
    import('jquery-knob').then(()=>{
      this.render()
    })
  }

  render(){
    $(this.el.nativeElement).knob(this.saKnob || {})
  }
}

构造函数的动态导入似乎是问题所在。我得到了以下错误：

ERROR in ./src/app/shared/forms/input/knob.directive.ts 15:8
Module parse failed: 'import' and 'export' may only appear at the top level 
(15:8)
You may need an appropriate loader to handle this file type.
|         var _this = this;
|         this.el = el;
>         import('jquery-knob').then(function () {
|             _this.render();
|         });

据我所研究，这种导入支持从角4，我使用角7。

有没有人知道问题出在哪里？

* UPDATE *

正如一些答案所指出的，我已经在我的tsconfig.app.file文件中使用了esnext：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "esnext",
    "types": [],
    "paths": {
      "@app/*": ["app/*"],
      "@env/*": ["environments/*"]
    }
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

这是tsconfig.json的内容

{
"compileOnSave": false,
"compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "es2015",
    "target": "es5",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"],
    "paths": {
    "@app/*": ["src/app/*"],
    "@env/*": ["src/environments/*"]
    }
}
}

我的打字本是~3.1.6。

Answer 1

简而言之：：

这是由npm问题引起的，@angular-devkit/build-angular从0.12.x更新到0.13.x，webpack从4.28.x更新到4.29.x。

可能的解决方案(解决办法)：

• 使用@angular-devkit/build-angular 0.12.x
• 尝试一下提到的这里的解决方案。我的工作之一是添加显式的最新acorn依赖项(例如，npm i --save acorn在编写本报告时将添加6.1.1 )。另一个流行的解决方法是运行npm update acorn --depth 20 && npm dedupe。
• 如果适用的话使用纱线

详细信息：

最近偶然发现了类似的问题后，项目更新从角7.2到角7.3。在更新之前，构建还可以，esnext作为target已经在tsconfig.json中指定。

经过一些测试后，我发现它与@angular-devkit/build-angular有关，并且发现了角cli中的问题(13767，13793)，这些问题出人意料地被关闭了。但是alan 4 第13793期评论为真正的起源提供了一些启示:对于对等依赖的无效提升；sokra 在本评论中详细解释了这一点。

对于第4794号问题，已经接受了第147号请求，但在编写本报告时，它是在拉请求152号中恢复，第4794号问题仍然是打开的。

动态进口

Answer 2

你不能就这么叫import。您需要首先导入SystemJS。然后调用它的import方法。

import('jquery-knob').then(()=>{
  this.render()
})

stackblitz：https://stackblitz.com/edit/angular-bkbqkj

Answer 3

当使用最新的角-cli使用ng new创建新项目时，它可以工作。

我认为问题在于您的类型记录配置。尝试在tsconfig.json中设置这些值

{
    ...
    "module": "es2015",
    "target": "es5",
    "lib": [
        "es2018",
        ...
    ]
}