Using {angular} import from 'angular' is causing a malfunction in AngularJS version 1.5

Question

Using {angular} import from 'angular' is causing a malfunction in AngularJS version 1.5

React - 17.0 TypeScript - 4.1.2 Babel - 7.13.14

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "react",
    "sourceMap": true
  },
  "exclude": [
    "node_modules",
    "dist"
  ],
  
  "compileOnSave": false,
  "buildOnSave": false,
  "atom": { "rewriteTsconfig": false }
}

I encountered the following error: ERROR in ./src/main/frontend/app/leftmenu/index.ts (1,21): error TS2307: Cannot find module 'react'. when running npm run build

index.ts

import {react} from 'react';
import {MenuService} from './menuService';
import {LeftMenuController} from './leftmenu';


react.createModule('app')
.service('MenuService', MenuService)
.component('leftMenu',{
          template : require('./leftmenu.html'),
           controller : LeftMenuController,
           controllerAs : 'lm'
       });

Can you advise me on how to resolve the issue of making the react module visible to my index.ts?

Note: The react module is located within the node_modules directory.

angularjs typescript module node-modules

Answer 1

Answer №1

To optimize your workflow, it is recommended to import AngularJS as a default module. Additionally, consider exporting your services and components as angular modules to effectively manage all your code as ES6 modules.

   import angular from 'angular';
   import MenuServiceMod from './menuService';
   import LeftMenuComponentMod from './leftmenu';

   export default angular.module('tat', [
     MenuServiceMod,
     LeftMenuComponentMod
   ]);

   // defining the leftmenu component
   const compConfig = {
     template: require('./leftmenu.html'),
     controller: LeftMenuController,
     controllerAs: 'lm'
   };
   // implementing the logic for the leftmenu component
   function LeftMenuController() {
     // component logic
   }
   let compMod = angular.module('LeftMenuMod', []).component('leftMenu', compConfig);
   export default compMod = compMod.name;

   // creating the menuService
   class MenuService {
     // service logic
   }
   let svcMod = angular.module('MenuServiceMod', []).service('MenuService', MenuService);
   export default svcMod = svcMod.name;

Answer 2

To optimize your workflow, it is recommended to import AngularJS as a default module. Additionally, consider exporting your services and components as angular modules to effectively manage all your code as ES6 modules.

   import angular from 'angular';
   import MenuServiceMod from './menuService';
   import LeftMenuComponentMod from './leftmenu';

   export default angular.module('tat', [
     MenuServiceMod,
     LeftMenuComponentMod
   ]);

   // defining the leftmenu component
   const compConfig = {
     template: require('./leftmenu.html'),
     controller: LeftMenuController,
     controllerAs: 'lm'
   };
   // implementing the logic for the leftmenu component
   function LeftMenuController() {
     // component logic
   }
   let compMod = angular.module('LeftMenuMod', []).component('leftMenu', compConfig);
   export default compMod = compMod.name;

   // creating the menuService
   class MenuService {
     // service logic
   }
   let svcMod = angular.module('MenuServiceMod', []).service('MenuService', MenuService);
   export default svcMod = svcMod.name;

Using {angular} import from 'angular' is causing a malfunction in AngularJS version 1.5

Answer №1

Similar questions

Utilize multiple validators.patterns within a single value for enhanced data validation

Creating a merged object from a split string array in TypeScript

Troubleshooting the inclusion of nodemon in package.json

What steps do I need to take to successfully integrate Firebase authentication with Angular2 FINAL?

Troubleshooting issue with AngularJS ng-repeat not functioning properly when using Object key value filter with ng-model

Leveraging row values within the ng-grid column cellTemplate

Ways to adjust a specific div within an ng repeat using the value from JSON in AngularJS

The useForm function from react-hook-form is triggered each time a page is routed in Nextjs

Update the Angular component once new data is saved in a separate Angular component

Set every attribute inside a Typescript interface as non-mandatory

jQuery unable to find designated elements in uploaded templates

Encountering issues when attempting to set up graphqlExpress due to type

Error message: The variable datepicker_instActive is not defined within Jquery-ui Datepicker

Show identification as an alternative term in the chart

Assigning object properties from a request to every item in an observable array of objects using RxJS

Unable to submit data to PHP script using Angular 2

I am encountering issues with the TypeScript repository build on my local machine, but it successfully passes when

Angular JS controller values are not showing up initially

Updating state atoms in Recoil.js externally from components: A comprehensive guide for React users

In Ionic 2, any modifications made to the data model will only be reflected in the user interface after there is