在Angular 7+上动态导入 [英] Dynamic import on Angular 7+

问题描述

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

I'm trying to build project that contains some components with dynamic imports, like:

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 || {})
  }
}

构造函数上的动态导入似乎是问题所在.我收到以下错误:

The dynamic import on the constructor seems to be the problem. I'm getting the following error:

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();
|         });

据我研究，从Angular 4开始就支持这种导入，而我使用的是Angular 7.

As far as I researched, this kind of import is supported since Angular 4, and I'm using Angular 7.

有人知道可能是什么问题吗?

Does anyone have an idea on what could be the problem?

*更新*

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

As pointed by some answers, I was already using esnext on my tsconfig.app.file file:

{
  "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.

推荐答案

简而言之:

这是由于 npm问题随@angular-devkit/build-angular从0.12.x更新到0.13.x，相关的Webpack更新从4.28.x升级到4.29.x.

It's caused by npm issue appeared with @angular-devkit/build-angular update from 0.12.x to 0.13.x and related webpack update under the hood from 4.28.x to 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.
• 使用纱线(如果适用)

• use @angular-devkit/build-angular 0.12.x
• try workarounds mentioned here. One working for me is to add explicit latest acorn dependency (e. g. npm i --save acorn will add 6.1.1 at the time of writing). Another popular workaround is to run npm update acorn --depth 20 && npm dedupe.
• use yarn if applicable

详细信息:

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

Have recently stumbled upon similar issue after project update from Angular 7.2 to Angular 7.3. Before update build was fine, and esnext as target was already specified in tsconfig.json.

经过一些测试，我发现它与@angular-devkit/build-angular有关并发现了问题( 13767 ， 13793 )出人意料地被关闭了. 但是 alan-agius4 在问题13793中发表的评论揭示了真正的起源:对等物依赖的无效吊装；由 sokra 详细解释，在此评论中

After some tests I've revealed that it relates to @angular-devkit/build-angular and found issues (13767, 13793) in angular-cli that surprisingly were closed. But alan-agius4 comment in issue 13793 shed some light to real origin: invalid hoisting for peer dependencies; explained in details by sokra in this comment.

对于问题#4794，已经接受了请求147，但是随后它被还原为请求在撰写本文时，请求#152 和问题#4794仍处于打开状态.

There were already accepted pull request #147 for issue #4794, but then it was reverted in pull request #152 and issue #4794 remains opened at the time of writing.

动态导入

这篇关于在Angular 7+上动态导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！