【发布时间】：2017-10-25 09:18:47
【问题描述】：
我目前正在尝试在 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)
我觉得这是因为由于 package.json 或 tsconfig.json 中的配置，webpack 找不到依赖项，但我对 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"
]
}
非常感谢。
【问题讨论】：