Migrating an Angular Project to Use Liferay npm Bundler 2.x

Documentation Menu
Go Back

Migrating an Angular Project to Use Liferay npm Bundler 2.x

Follow these steps to migrate your Angular project to use liferay-npm-bundler 2.x. While liferay-npm-bundler 1.x relied on Babel to perform some transformation steps, these transformations are now automatically applied in version 2.x. Therefore, you should remove Babel from your project:

  1. Update the liferay-npm-bundler dependency in your package.json to version 2.x:

    {
  "devDependencies": {
    ...
    "liferay-npm-bundler": "^2.0.0",
    ...
  },
  ...
}

  2. Remove all liferay-npm-bundler-preset-* dependencies from your package.json because liferay-npm-bundler 2.x includes these by default.

  3. Remove any bundler presets you configured in your .npmbundlerrc file. liferay-npm-bundler 2.x includes one smart preset that handles all frameworks automatically.

  4. Open your tsconfig.json file and replace the "module": "amd" compiler option with the configuration shown below to produce CommonJS modules:

    {
  "compilerOptions": {
    ...
    "module": "commonjs",
    ...
  }
}

  5. Delete the .babelrc file to remove the Babel configuration.

  6. Remove Babel from your package.json build process so it matches the configuration below:

    {
  "scripts": {
    "build": "tsc && liferay-npm-bundler"
  },
  ...
}

  7. Remove the following Babel dependencies from your package.json devDependencies:

    "babel-cli": "6.26.0",
"babel-preset-liferay-amd": "1.2.2"

Great! Your project is migrated to use liferay-npm-bundler 2.x.

Not finding what you're looking for?

Pardon our dust as we revamp and transition our product documentation to this site. If something seems missing, please check Liferay Help Center documentation for Liferay DXP 7.2 and previous versions.

Try Liferay's Help Center