I have two modules in one folder, mod1.js:
'use strict';
export class MyClass {
constructor() {
}
lala() {
alert(1);
}
}
And mod2.js:
'use strict';
import {MyClass} from './mod1';
let c = new MyClass();
c.lala2(); //HERE I WANT TO SEE ERROR
The problem is that Visual Studio Code doesn't show error in mod2. How to make it show the error, if it is possible?
Related
I have a really simple question but I couldn't find any documentations for it.
I have 4 ts files.
/main.ts
/sub/forms.ts
/sub/validators.ts
/sub/location.ts
I'm using Visual Studio Code to code and when I save a TypeScript file, it auto compiles it and creates a JS file (ES5).
my problem is.. when I save main.ts file, how can I have forms.ts, validators.ts and location.ts in it as well?
In PHP, we simple use include('filename.php');
Is there way to do it in TypeScript?
main.ts;
import { Forms } from "./sub/forms";
import { Validators } from "./sub/validators";
import { Location } from "./sub/location";
let emp1 = new Validators('TEST');
emp1.greet();
/sub/validators.ts;
export class Validators {
employeeName: string;
constructor(name: string) {
this.employeeName = name;
}
greet() {
console.log(`Good morning ${this.employeeName}`);
}
}
main.js (after auto save compile)
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var validators_1 = require("./sub/validators");
var emp1 = new validators_1.Validators('TEST');
emp1.greet();
it doesn't import the validators.ts code into main.js
I'm working on a angular2 application written in TypeScript.
This works:
I have a module called plugin-map.ts which looks something like this:
import { Type } from '#angular/core';
import { SomeComponent } from './plugins/some.component';
export const PluginMap: { [key: string]: Type<any> } = {
'e690bec6-f8d1-46a5-abc4-ed784e4f0058': SomeComponent
};
It gets transpiled to a plugin-map.js which looks something like this:
"use strict";
var some_component_1 = require('./plugins/some.component');
exports.PluginMap = {
'e690bec6-f8d1-46a5-abc4-ed784e4f0058': some_component_1.SomeComponent
};
//# sourceMappingURL=plugin-map.js.map
And in other modules I'm importing my PluginMap like this:
import { PluginMap } from './plugin-map';
What I want:
Now I want to create plugin-map.js at runtime when my server starts. So I want to get rid of my plugin-map.ts and instead have only a (generated) plugin-map.js. And I don't want to have any transpile-time dependencies to that plugin-map.js.
What I tried:
In modules where I need to access the PluginMap I replaced the import statement with a declaration like this:
declare const PluginMap: { [key: string]: Type<any> };
Now of course at runtime I get a Error: (SystemJS) 'PluginMap' is undefined. So my next step was to load plugin-map.js explicitly from my index.html like this:
...
<script src="js/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./app/plugins/plugin-map.js').catch(function (err) { console.error(err); });
System.import('app').catch(function(err){ console.error(err); });
</script>
...
When I start my application I can see that the browser actually requests the plugin-map.js file. But I still get the Error: (SystemJS) 'PluginMap' is undefined.
Question:
How/where do I have to load my generated plugin-map.js so that this works?
I had to make sure that PluginMap is available in the global context. So the generated plugin-map.js has to look like this:
var some_component_1 = require('./plugins/some.component');
PluginMap = {
'e690bec6-f8d1-46a5-abc4-ed784e4f0058': some_component_1.SomeComponent
};
and not like this:
"use strict";
var some_component_1 = require('./plugins/some.component');
exports.PluginMap = {
'e690bec6-f8d1-46a5-abc4-ed784e4f0058': some_component_1.SomeComponent
};
//# sourceMappingURL=plugin-map.js.map
Now it seems to work.
I have a Typescript project, which calls a function from a module.js module. Here is my initial code:
//app.ts
import { MobileServiceUser, setCache, getCache } from "nativescript-azure-mobile-apps/user";
export function onLoginTap(args) {
console.log("tap");
ai.busy = true;
var cache = getCache();
}
if I use the VSCode "go to definition" feature, then getCache() goes to the import statement at the top, if I do this again, then I go to:
//module.ts
declare module "nativescript-azure-mobile-apps/user" {
export class MobileServiceUser {
mAuthenticationToken: string;
mUserId: string;
constructor(o: { userId: string; });
}
export function setCache(user: MobileServiceUser): void;
export function getCache(): MobileServiceUser;
}
When I execute the code and the var cache = user_1.getCache(); line is executed, my app crashes, throwing error:
TypeError: user_1.getCache is not a function
File: "/data/data/inc.tangra.azuremobileservicessample/files/app/main-page.js, line: 94, column: 23
app.ts looks like this compiled to js:
var user_1 = require("nativescript-azure-mobile-apps/user");
function onLoginTap(args) {
console.log("tap");
ai.busy = true;
var cache = user_1.getCache();
}
Why isn't the code recognising the imported function?
Update: this repo shows the project structure (the first page of code is in sample/main-page.ts
I'm trying to integrate ECMA6 into existing Angular project.
And I'm looking for a best practise for some issues we have.
All components (and we have a lot) have following file structure:
-app/
--components/
--somemodul/
--somemodul.mdl.js
--somemodul.drv.js
--somemodul.ctrl.js
--somemodul.srv.js
--somemodul.tmpl.html
-app.js
//somemodul.mdl.js
(function () {
angular.module('somemodul', []); //initiate module
})()
//somemodul.drv.js
(function () {
angular.module('somemodul')
.directive('someModuleDrv', someModuleDrv); //add to module
function someModuleDrv() {
// CODE
}
})()
//somemodul.ctrl.js
(function () {
angular.module('somemodul')
.controller('someModuleCtrl', someModuleCtrl); //add to module
function someModuleCtrl() {
// CODE
}
})()
//somemodul.srv.js
(function () {
angular.module('somemodul')
.service('someModuleSrv', someModuleSrv); //add to module
function someModuleSrv() {
// CODE
}
})();
On build, Gulp do concat and everything works fine.
With ECMA6 We need to import all these modules into app.js.
And now I see two options:
1) To concate myself all 'somemodul' files into single file:
//somemodul.js
export default angular.module('somemodul', [])
.directive('someModuleDrv', someModuleDrv)
.service('someModuleSrv', someModuleSrv)
.controller('someModuleCtrl', someModuleCtrl);
function someModuleDrv() { };
function someModuleSrv() { };
function someModuleCtrl() { };
2) Import all submodules into 'somemodule.mdl.js':
//somemodul.mdl.js
import someModuleDrv from './somemodul.drv.js'
import someModuleSrv from './somemodul.srv.js'
import someModuleCtrl from './somemodul.ctrl.js'
export default angular.module('somemodul', [
someModuleDrv.name,
someModuleSrv.name,
someModuleCtrl.name
]);
//somemodul.drv.js
export default angular.module('somemodul.drv', [])
.directive('someModuleDrv', someModuleDrv);
function someModuleDrv() {
// CODE
}
//somemodul.srv.js
export default angular.module('somemodul.srv', [])
.directive('someModuleSrv', someModuleSrv);
function someModuleSrv() {
// CODE
}
//somemodul.ctrl.js
export default angular.module('somemodul.ctrl', [])
.directive('someModuleCtrl', someModuleCtrl);
function someModuleCtrl() {
// CODE
}
Both options works.
Unfortunately both options requires a lot of hands-on work.
So I'm looking for possible other solution.....
Thanks.
Found solution is using require.context().
In my case it will looks like this:
//somemodul.js
export default angular.module('somemodul', [])
/**
* Requires all directives from subdirectories.
* #param requireContext
* #returns {*}
*/
function requireAll(requireContext) {
return requireContext.keys().map(requireContext);
}
requireAll(require.context(".", true, /^\.\/.*\.js$/));
I tried do not use require and stay only with (export/import), but looks like it's only one way.
I've got one file (app.js) with two named modules in it ("foo", and "bar" - where "bar" depends on "foo").
Question: How to I load "bar" it in the browser?
Disclaimer: I'm new to SystemJS and the docs look a little intimidating.
app.js
System.register("foo", [], function(exports_1) {
"use strict";
var App;
return {
setters:[],
execute: function() {
App = (function () {
function App() {
this.bar = 'Hello world.';
console.log(this.bar);
}
return App;
})();
exports_1("App", App);
;
}
}
});
System.register("bar", ["foo"], function(exports_1) {
"use strict";
var App;
return {
setters:[],
execute: function() {
App = (function () {
function App() {
this.bar = 'Mony a mickle maks a muckle.';
console.log(this.bar);
}
return App;
})();
exports_1("App", App);
;
}
}
});
Got the results I wanted by doing the following:
Added the <script src="app.js"> tag to my index file.
Also added System.import('bar'); to the page.
I wonder if this is the standard/recommended way of doing it.
Edit:
The issue with this approach is that I need two strategies for development and production.
In development I don't add the <script> tag and I import the module using System.import('path/app.js');
I think using a bare bones seed can help you out by showing a simple working example, this seed has a PRODUCTION and DEV MODE and you dont need to have 2 strategies, just choose between running it bundled or not
try:
npm i -g slush-jspm-react-seed