web-dev-qa-db-fra.com

Angular 4: "Impossible de trouver le nom 'require'

Je construis une application avec Angular 4 et webpack .

J'ai l'un des composants suivants dans l'un de mes composants:

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

Lorsque je tente de compiler, je reçois:

Erreur dans C: /SRC/Sandbox/eat-sleep-code.com/src/app/content.component.ts (21,9):. Impossible de trouver le nom 'require'.

J'ai exécuté npm install @types/node --save-dev et mis à jour mon tsconfig.json pour qu'il ressemble à ceci:

{
  "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"
    ]
  }
}

Mais hélas, la même erreur continue de se produire. Des idées?

Voici mon 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"
  }
}
angularwebpack
15
eat-sleep-code

require() n'est pas conseillé pour quelques raisons. Premièrement, cela "cassera" l'efficacité de la gestion d'arborescence dans le Webpack 2 et deux, cela empêchera le fractionnement correct du code.

Une alternative bien meilleure consiste à utiliser la mise en œuvre de System.import par webpack:

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

Afin de satisfaire le compilateur TypeScript (comme vous l'avez trouvé), vous devrez lui dire que System est une variable acceptable en le déclarant:

declare var System: any;

Vous pouvez soit ajouter cette ligne à votre composant si vous souhaitez uniquement la référencer une fois, soit l'ajouter au fichier de définition de type typings.d.ts pour en permettre l'utilisation dans l'ensemble de votre application. Notez que si vous modifiez le fichier de frappe, vous devrez redémarrer la session ng serve.

Cela satisfait le compilateur au moment de la construction et il est piraté au moment de l'exécution par le système de génération, corrigeant l'appel via le System.import de Webpack.

Webpack à son tour vérifiera s'il a un bloc qui satisfait le fichier demandé et, s'il ne le fait pas, créera dynamiquement une balise de script et l'insérera dans l'en-tête, en chargeant le fichier avec l'attribut async. dans ce cas.

Une fois le fichier chargé, il sera analysé et exécuté. Toutefois, si vous souhaitez interagir avec une partie quelconque de celle-ci via le rappel async .then(), votre fichier devra exporter tout ce que vous souhaitez appeler, tel que:

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

Ceci exposera la fonction .test() à votre gestionnaire de rappel:

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

Essayez d'ajouter declare var require: any; en haut.

23
Ron FND

essayer

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

dans tsconfig.json

0
alokstar

essayez ci-dessous,

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

J'espère que cela t'aides!!

0
Madhu Ranjan