Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
18
rated 0 times [  25] [ 7]  / answers: 1 / hits: 20654  / 7 Years ago, wed, march 15, 2017, 12:00:00

I have an exported class in my working Angular2 app using ES6 module:



//File = init.todos.ts

export class Init {
load() {
...
}
}


I'm importing this class from another component via :



//File = todo.service.ts

import { Init } from './init.todos'


It works as expected.



However if I change the loading mechanism to commonjs :



//File = init.todos.ts
export class Init {
load() {
...
}
}
module.exports.Init = Init;


Requiring it:



//File = todo.service.ts
var Init = require(./init.todos);


— I get those errors :




...myApp/src/app/todo.service.ts
(4,13): Cannot find name 'require'.)
...myApp/src/app/todo.service.ts (12,14):
Property 'load' does not exist on type 'TodoService'.)




enter



Question:



How can I also load commonjs modules using require ?



Tsconfig.json:



{
compileOnSave: false,
compilerOptions: {
outDir: ./dist/out-tsc,
baseUrl: src,
module: system,
sourceMap: true,
declaration: false,
moduleResolution: node,
emitDecoratorMetadata: true,
experimentalDecorators: true,
target: es5,
typeRoots: [
node_modules/@types
],
lib: [
es2016,
dom
]
}
}


Here are the config files :



tslint.json



tsconfig.json



package.json



angular-cli.json



webpack.config.js


More From » angular

 Answers
109

Since version 1.5, Typescript has adopted the ES6 style of imports.



You can keep your code as is



//File = init.todos.ts

export class Init {
load() {
...
}
}

//File = todo.service.ts

import { Init } from './init.todos'


By moving the property module in tsconfig.json to commonjs, the transpiler will generate commonjs compatible javascript which will allow you to benefit from, and contribute to, the full nodeJS ecosystem.



compileOptions: {
...
module: commonjs
...
}


If you wish to import an existing NodeJS module in your typescript code, a few things may happen




  • the module ships with embedded Typescript Definition Files (there is a typings entry in package.json). In that case, import the module using the ES6 syntax and you are good to go (import * as blah from 'blah'). immutable.js is a good example of such a library


  • the module does not ship with Definition files but there is one available on DefinitelyTyped, simply




    • run npm install @types/blah to get the definitions in your project

    • and import the module as usual: import * as blah from 'blah'


  • the module does not have a definition file




    • you can craft one, simply add it to your project after naming it blah.d.ts. DefinitelyTyped has a guide on this

    • you can decide to go without typings, simply use NodeJS require() const blah = require('blah'), and blah will have type any (which really means that blah opted out of typing)




(for sake of completeness, I could add the allowJS compiler option available since 1.8, but that is a whole subject in itself)


[#58536] Monday, March 13, 2017, 7 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
dorothylorrainef

Total Points: 456
Total Questions: 102
Total Answers: 115

Location: El Salvador
Member since Sun, Sep 12, 2021
3 Years ago
;