Question

我目前正在尝试在Angular项目中调用Dojo，我有如下测试代码

 /// <reference path="../../../../node_modules/dojo-typings/dojo/1.11/index.d.ts" />
    /// <reference path="../../../../node_modules/dojo-typings/dojo/1.11/modules.d.ts" />

    import * as lang from 'dojo/_base/lang';
    import { Component, OnInit } from '@angular/core';
    import { MdCardModule} from '@angular/material';
    import { MdButtonModule } from '@angular/material';
    import { TaskService } from '../../services/task.service';
    import { Globals } from '../../global';

和我调用的组件中的某个地方

console.log(lang.extend);

但是在编译项目时，有很多警告，页面无法显示，错误如

WARNING in ./node_modules/dojo/_base/kernel.js
79:39-46 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
    at CommonJsRequireContextDependency.getWarnings (/Users/dongming/work/hallmark/desktop/node_modules/@angular/cli/node_modules/webpack/lib/dependencies/CommonJsRequireContextDependency.js:27:4)
    at Compilation.reportDependencyErrorsAndWarnings (/Users/dongming/work/hallmark/desktop/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:694:24)
    at Compilation.finish (/Users/dongming/work/hallmark/desktop/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:552:9)
    at applyPluginsParallel.err (/Users/dongming/work/hallmark/desktop/node_modules/@angular/cli/node_modules/webpack/lib/Compiler.js:512:17)
    at /Users/dongming/work/hallmark/desktop/node_modules/tapable/lib/Tapable.js:289:11
    at _addModuleChain (/Users/dongming/work/hallmark/desktop/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:498:11)
    at processModuleDependencies.err (/Users/dongming/work/hallmark/desktop/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:468:14)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)

我觉得这是因为webpack无法找到由于package.json或tsconfig.json中的配置而产生的依赖关系，但我对Angular很新，并且无法找出原因。有人可以对此有所了解吗？

这是package.json

    "dependencies": {
    "@angular/animations": "^4.0.0",
    "@angular/cdk": "github:angular/cdk-builds",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/material": "github:angular/material2-builds",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "brace": "^0.10.0",
    "dojo": "^1.10.4",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.4.1",
    "ibm-design-colors": "^2.0.3",
    "ibm-design-icons": "^2.1.2",
    "monaco-editor": "^0.10.0",
    "portfinder": "^1.0.13",
    "rxjs": "^5.1.0",
    "web-animations-js": "^2.2.5",
    "webpack": "^3.7.1",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "^1.4.3",
    "@angular/compiler-cli": "^4.4.3",
    "@angular/language-service": "^4.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.0.1",
    "dojo-util": "1.12.2",
    "dojo-loader": "^2.0.0-beta.7",
    "dojo-typings": "^1.11.9",
    "copy-webpack-plugin": "4.1.1",
    "dojo-webpack-plugin": "2.1.3",
    "gh-pages": "^1.0.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }

tsconfig.json

{

  "compilerOptions": {
    "baseUrl": "",
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es5", "dom", "scripthost"  ],
    "mapRoot": "./",
    "module": "and",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "allowJs": true,
    "typeRoots": [
      "../node_modules/@types"
    ]
  },
  "include": [
    "./src/**/*.ts",
    "../node_modules/*",
    "../node_modules/dojo-typings/dojo/1.11/modules.d.ts",
    "../node_modules/dojo-typings/dijit/1.11/modules.d.ts",
    "../node_modules/dojo-typings/dojox/1.11/modules.d.ts"
  ]
}

非常感谢。

Answer 1

我不确定我是否全部，但恕我直言，你似乎正在做一些你不应该这样做的事情。

我不会在文件顶部使用引用标记，因为你有打字稿＆gt; 2
尝试安装@types/dojo：npm i --save-dev @types/dojo或其他dojo @types
您可能不需要在tsconfig.json

在此之后应该更直接

Angular项目编译时出错：严重依赖：require函数的使用方式是无法静态提取依赖项

1 个答案: