角4：“无法找到名为‘需要’

Question

我建立一个应用程序与角4和的WebPack

我曾经在我的组件之一以下。

ngOnInit() { 
    require('/assets/js/regular-expresions.js'); 
} 

当我尝试编译，我得到：

ERROR在 C：/SRC/Sandbox/eat-sleep-code.com/src/app/content.component.ts（21.9）： 找不到名字'require'。

我已经跑npm install @types/node --save-dev并更新了tsconfig.json的样子：

{ 
    "compileOnSave": false, 
    "compilerOptions": { 
    "outDir": "./dist/out-tsc", 
    "baseUrl": "src", 
    "sourceMap": true, 
    "declaration": false, 
    "moduleResolution": "node", 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "target": "es5", 
    "types": [ 
     "node" 
    ], 
    "typeRoots": [ 
     "node_modules/@types" 
    ], 
    "lib": [ 
     "es2016", 
     "dom" 
    ] 
    } 
} 

但很可惜，同样的错误状态越来越抛出。有任何想法吗？

---

这里是我的package.json：

{ 
    "name": "eat-sleep-code.com", 
    "version": "0.0.0", 
    "license": "MIT", 
    "scripts": { 
    "ng": "ng", 
    "start": "ng serve", 
    "build": "ng build", 
    "test": "ng test", 
    "lint": "ng lint", 
    "e2e": "ng e2e" 
    }, 
    "private": true, 
    "dependencies": { 
    "@angular/animations": "^4.0.1", 
    "@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": "^2.0.0-beta.3", 
    "@angular/platform-browser": "^4.0.0", 
    "@angular/platform-browser-dynamic": "^4.0.0", 
    "@angular/router": "^4.0.0", 
    "@types/node": "^6.0.69", 
    "angularfire2": "^2.0.0-beta.8", 
    "core-js": "^2.4.1", 
    "firebase": "^3.7.8", 
    "jquery": "^3.2.1", 
    "jquery-validation": "^1.16.0", 
    "ng2-gist": "^1.0.0", 
    "promise-polyfill": "^6.0.2", 
    "requirejs": "^2.3.3", 
    "rxjs": "^5.1.0", 
    "typescript": "^2.2.2", 
    "web-animations-js": "^2.2.4", 
    "webpack": "^2.4.1", 
    "zone.js": "^0.8.4" 
    }, 
    "devDependencies": { 
    "@angular/cli": "1.0.0", 
    "@angular/compiler-cli": "^4.0.0", 
    "@types/jasmine": "2.5.38", 
    "@types/node": "^6.0.69", 
    "codelyzer": "~2.0.0", 
    "jasmine-core": "~2.5.2", 
    "jasmine-spec-reporter": "~3.2.0", 
    "karma": "~1.4.1", 
    "karma-chrome-launcher": "~2.0.0", 
    "karma-cli": "~1.0.1", 
    "karma-coverage-istanbul-reporter": "^0.2.0", 
    "karma-jasmine": "~1.1.0", 
    "karma-jasmine-html-reporter": "^0.2.2", 
    "protractor": "~5.1.0", 
    "ts-node": "~2.0.0", 
    "tslint": "~4.5.0", 
    "typescript": "^2.2.2", 
    "webpack": "^2.4.1" 
    } 
} 

Answer 1

require()是不可取的几个原因。其一，它会“打破”webpack 2和webpack 2中抖动的效果，它会阻止正确的代码分裂。

一个更好的替代方法是使用的WebPack的实施System.import：

System.import('/assets/js/regular-expresions.js').then(file => { 
    // perform additional interactions after the resource has been asynchronously fetched 
}); 

为了满足打字稿编译器（如你发现），你需要告诉它System是一个可以接受的变量由它声明：

declare var System: any;  

您可以将此行添加到您的组件，如果你只打算一次引用它，或者你可以把它添加到typings.d.ts类型定义文件，以使其使用贯穿你的应用。请注意，如果您更改打印文件，则需要重新启动ng serve会话。

这满足在构建时编译器和它能够在通过构建系统运行时被劫持，修补成的WebPack的System.import呼叫通过。

Webpack反过来会检查它是否有满足请求文件的块，如果不满足，它将动态创建一个脚本标记并将其插入头部，加载具有async属性的文件，这是发生在这种情况下。

一旦文件加载，它将被解析并执行。但是，如果你想通过异步.then()回调的任何部分进行交互，你的文件将需要导出任何你想调用，如：

export function test() { 
    console.log('we called test'); 
} 

这将会使.test()功能，以您的回调处理程序：

System.import('/assets/js/regular-expresions.js').then(file => { 
    file.test(); 
}); 

Answer 2

尝试下面，

<any>require('/assets/js/regular-expresions.js') 

希望这有助于！

Answer 3

尝试

compilerOptions: { 
    ... 
    "typeRoots": [ "../node_modules/@types" ], 
    ... 
} 

在tsconfig.json

Answer 4

尝试在顶部添加declare var require: any;。