Angular4のrequireエラー解決方法

Angular4における「Cannot find name 'require'」エラーの解決方法

問題
Angular4にアップグレードした後、TypeScriptコンパイラが「Cannot find name 'require'」というエラーを報告する。これは、CommonJSモジュールシステムのrequire関数が、Angular4のデフォルトのモジュールシステムであるES Modules（ESM）と互換性がないためです。

解決策

1. ES Modulesを使用する
   

   • Angular4のデフォルトのモジュールシステムはES Modulesです。これを使用することで、require関数を直接使用せずに、モジュールをインポートすることができます。

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent {
     ti   tle = 'My Angular App';
   }
   

2. @angular/compilerモジュールを使用する
   

   • @angular/compilerモジュールには、CommonJSモジュールをサポートする機能が含まれています。これを利用して、require関数を使用することができます。

   import { Component, NgModule } from '@angular/core';
   import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
   import { C   ommonModule } from '@angular/common';
   
   // CommonJSモジュールをインポート
   const myModule = require('./my-module');
   
   @NgModule({
     imports: [CommonModule, myModule],
     declarations: [AppComponent],
     bootstrap: [AppComponent]
   })
   export class AppModule {}
   
   platformBrowserDynamic().bootstrapModule(AppModule   );
   

注意

• require関数を使用する場合は、CommonJSのモジュールシステムに従う必要があります。
• @angular/compilerモジュールを使用する場合、ビルド時に--aotフラグを指定してAhead-of-Timeコンパイルを行う必要があります。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  ti   tle = 'My Angular App';
}

import { Component, NgModule } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { C   ommonModule } from '@angular/common';

// CommonJSモジュールをインポート
const myModule = require('./my-module');

@NgModule({
  imports: [CommonModule, myModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule   );

解説

• @angular/compilerモジュールを使用する
  

• ES Modulesを使用する場合は、モジュールをインポートする際にimportキーワードを使用します。

Webpackのresolve.extensionsオプションを使用する:

• Webpackのresolve.extensionsオプションを使用して、TypeScriptコンパイラにCommonJSモジュールを認識させることができます。

// webpack.config.js
module.exports = {
  resolve: {
    extensions: ['.ts', '.js', '.json']
  }
};

TypeScriptのpathsオプションを使用する:

• TypeScriptのtsconfig.jsonファイルのpathsオプションを使用して、CommonJSモジュールへのパスを指定することができます。

// tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "my-module": ["path/to/my-module.js"]
    }
  }
}

Angular CLIのangular.jsonファイルを使用する:

• Angular CLIを使用している場合は、angular.jsonファイルのprojectsセクションのarchitectプロパティのbuildターゲットのoptionsプロパティにextensionsを追加することができます。

// angular.json
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "extensions": [".ts", ".js", ".json"]
          }
        }
      }
    }
  }
}