it-swarm.com.de

Winkel 4: "Name 'Require' nicht gefunden

Ich baue eine App mit Angular 4 und Webpack .

Ich habe folgendes in einer meiner Komponenten:

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

Wenn ich versuche zu kompilieren, bekomme ich:

Fehler in C: /SRC/Sandbox/eat-sleep-code.com/src/app/content.component.ts (21,9): Kann den Namen 'required' nicht finden.

Ich habe npm install @types/node --save-dev ausgeführt und meine tsconfig.json folgendermaßen aktualisiert:

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

Aber leider wird der gleiche Fehler immer wieder geworfen. Irgendwelche Ideen?


Hier ist meine 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"
  }
}
15
eat-sleep-code

require() ist aus einigen Gründen nicht ratsam. Zum einen "brechen" sie die Effektivität des Baumschüttelns in Webpack 2 und zum anderen wird die korrekte Codeaufspaltung verhindert.

Eine weitaus bessere Alternative ist die Verwendung von webpacks Implementierung von System.import:

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

Um den TypeScript-Compiler zu befriedigen (wie Sie gefunden haben), müssen Sie ihm mitteilen, dass System eine akzeptable Variable ist, indem Sie sie deklarieren:

declare var System: any;    

Sie können diese Zeile entweder zu Ihrer Komponente hinzufügen, wenn Sie nur einmal darauf verweisen möchten, oder Sie können sie der Typdefinitionsdatei typings.d.ts hinzufügen, um die Verwendung in der gesamten App zu ermöglichen. Beachten Sie, dass Sie die ng serve-Sitzung neu starten müssen, wenn Sie die Typisierungsdatei ändern.

Dies erfüllt den Compiler zur Erstellungszeit und wird zur Laufzeit vom Erstellungssystem gekapert, wobei der Aufruf in den Webcode System.import gepatcht wird.

Webpack prüft seinerseits, ob ein Block für die angeforderte Datei vorhanden ist. Wenn dies nicht der Fall ist, wird dynamisch ein Skripttag erstellt und in den Kopf eingefügt. Dabei wird die Datei mit dem Attribut async geladen in diesem Fall.

Sobald die Datei geladen ist, wird sie analysiert und ausgeführt. Wenn Sie jedoch über den async .then()-Rückruf mit einem Teil davon interagieren möchten, muss Ihre Datei alles exportieren, das Sie aufrufen möchten, z.

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

Dadurch wird die Funktion .test() für Ihren Callback-Handler verfügbar gemacht:

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

Versuchen Sie, declare var require: any; oben hinzuzufügen.

23
Ron FND

Versuchen Sie diese Schritte, um den Fehler zu beheben

  1. npm install --save-dev @ types/webpack-env

  2. Aktualisieren Sie Ihre Datei tsconfig.json unter compilerOptions wie folgt:

"types": ["webpack-env"]

3. Gehen Sie nun zu tsconfig.app.json und fügen Sie dies hinzu

"compilerOptions": {

"types": [
  "node"
]

}

0
abhinav

versuchen

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

in tsconfig.json

0
alokstar

versuche es unten,

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

Hoffe das hilft!!

0
Madhu Ranjan