Angular 4: importing a javascript module gives multiple errors - visual-studio

I have a javascript module (ie IIFE file) that I wish to use in Angular 4
I have done this:
declare var DataRequestsToHost: any;
import * as DataRequestsToHost from '../../../../hostScripts/DataRequestsToHost';
but the import statement errors with:
Build:Module '../../../../hostScripts/DataRequestsToHost' was resolved to 'hostScripts/DataRequestsToHost.js', but '--allowJs' is not set.
So I add allowJs = true to tsconfig.json
Then in Visual studio I get 2 errors:
Build:Cannot write file 'D:/VS2017Projects/ThirdPartyExam1/ThirdPartyExam1/systemjs.config.js'
because it would overwrite input file.
Build:Cannot write file 'D:/VS2017Projects/ThirdPartyExam1/ThirdPartyExam1/hostScripts/DataRequestsToHost.js'
because it would overwrite input file.
both "hostsscripts" and "systemjs.config" are in the tsconfig.json's exclude section
How can I get around this issue ?
regards
GregJF

Related

Unable to import node_module in stencil components's .tsx file

I am importing eventsource object from node_module in stencil-components component.tsx file.
import {NativeEventSource, EventSourcePolyfill} from 'event-source-polyfill/src/eventsource.js'
so in above code if i do ctrl+click on eventsource.js it should go to the refrence but it is not showing anything. It is also not responding any error in visual studio editor.
this is my directory structure.
But it shows error at building that its not exported by eventsouce.js
> [ ERROR ] TypeScript: src/dxp-notification.tsx:51:20
> Cannot find name 'NativeEventSource'.
>
> L50: {
> L51: var EventSource = NativeEventSource || EventSourcePolyfill
Am I missing any required configuration?
Thanks.
I actually just tried to import it like this :
import eventsource from 'event-source-polyfill/src/eventsource.js'
And then use it like this
eventsource.NativeEventSource or eventsource.EventSourcePolyfill
This one seems working for me

Flow module not found with .scss file

I have a file using scss with css-modules like so:
import styles from './Login.scss';
The webpack build works fine but i'm getting a flow error: Required Module Not Found
In my .flowconfig I have
[ignore]
.*/node_modules/fbjs/.*
.*/app/main.js
.*/app/dist/.*
.*/release/.*
.*/git/.*
[include]
[libs]
[options]
esproposal.class_static_fields=enable
esproposal.class_instance_fields=enable
esproposal.export_star_as=enable
module.name_mapper.extension='css' -> '<PROJECT_ROOT>/flow/CSSModule.js.flow'
module.name_mapper.extension='styl' -> '<PROJECT_ROOT>/flow/CSSModule.js.flow'
module.name_mapper.extension='png' -> '<PROJECT_ROOT>/flow/WebpackAsset.js.flow'
module.name_mapper.extension='jpg' -> '<PROJECT_ROOT>/flow/WebpackAsset.js.flow'
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue
I've also seen https://github.com/facebook/flow/issues/338 but it doesn't really have any solution.
Has anyone found a workaround for this issue?
A better solution for this error is to use the css-modules-flow-types webpack plugin to generate flow types for your CSS modules.
Flow doesn't know about the scss extension, so you need to add the following to your .flowconfig, in the [options] section:
; Extensions
module.file_ext=.js
module.file_ext=.jsx
module.file_ext=.json
module.file_ext=.css
module.file_ext=.scss
You should also add *.scss.flow to your .gitignore. These files shouldn't be checked in because they are automatically generated during the webpack build.
added all the file types I wanted flow to recognize in .flowconfig file
[options]
module.file_ext=.js
module.file_ext=.json
module.file_ext=.jsx
module.file_ext=.css
module.file_ext=.scss
This error can be fixed by assigning .scss files to an empty module. I just npm installed empty and added this to the .flowconfig :
module.name_mapper.extension='scss' -> 'empty/object'
We can use module.name_mapper.extension to replace types for imported module on Object
module.name_mapper.extension - Specify a file extension to match, and a replacement module name,
separated by a ->.
add option to .flowconfig file
// .flowconfig
[options]
module.name_mapper.extension='scss' -> '<PROJECT_ROOT>/flowconfig.mock-module.js'
create new file
// flowconfig.mock-module.js
export default Object;

How to distribute .d.ts file in npm package

I am trying to include a .d.ts file in my npm package for my (non-TypeScript) library.
I have the following in my package.json:
"typings": "./src/iter.d.ts",
But no matter what I put in ./src/iter.d.ts, whenever I try to use it in Visual Studio, I always get a "Cannot find module 'iterjs'" message.
To reproduce, create a new TypeScript app in VS (I'm using 2015 with TS 1.8.4), do an npm install iterjs, and add the following to app.ts:
import iter from 'iterjs';
I've tried modifying the local copy of iter.d.ts (under node_modules) in a desperate attempt to get anything working at all; my local copy currently has only the following content:
export declare function bob(object: Object, property: string): boolean;
export default bob;
I can verify that Visual Studio is finding and reading the iter.d.ts file (I can see it being read in Process Monitor every time VS opens app.ts); however, there's apprently something in the .d.ts file it doesn't like. I have read about a dozen blog posts, gone through the Handbook, and a half-dozen TypeScript issues on the subject, and have tried about 20 different ways of exporting anything from the .d.ts file, but VS always just gives the same error (Cannot find module 'iterjs').
Node-like resolution of .d.ts files in NPM packages only works for type definitions in proper external module format. The .d.ts in your repository is in ambient module format, to convert it to the correct format remove declare module "iter" and prefix every symbol you wish to export with export declare, oh, and replace export = iter with export default iter. You can find additional info at https://github.com/Microsoft/TypeScript/wiki/Typings-for-npm-packages

Can't find variable: StageWebViewBridge

I use the development tools:Adobe Flash Builder 4.6;
When I move the 'ExampleCallBackFuncions?.html' to an online server and try to load it using:
webView.loadURL("http://192.168.1.101/MapTest/ExampleBasic.html");
The html page appears but when I press the callAS3Function button I get the following error:
ReferenceError?: Can't find variable: StageWebViewBridge? callAs3Funciton at http://www.myserver.com/ExampleCallBackFuncions.html : 14
onclick at http://www.myserver.com/ExampleCallBackFuncions.html : 27
Create flex mobile project is how to interact with , and I can not always interact?
Thanks;
You need to include the project:
http://code.google.com/p/stagewebviewbridge/
It seems the file StageWebViewBridge.js is missing.
When we use stagewebviewbridge, we should include StageWebViewBridge.js file in our .html file, because, though the .js file we can make communication between as3 and js. So you could include the .js file location in your .html file.
You better to have the .js file as part of your [ MapTest ] directory, or refer .js from http://code.google.com/p/stagewebviewbridge/

How can I include ui and image files while using py2exe?

I am working on a project using Python 2.7 and PySide 1.1.2. My code is working without any problem on my GNU/Linux but I want to distribute for Windows ( 7 and 8 ) as well. I can't expect users to install Python and PySide, so I decided to use py2exe (I also tried cx_freeze and pyinstaller).
First of all, here is my file tree: My Project on GitHub
I created a setup.py, here it is:
# -*- coding: utf-8 -*-
from distutils.core import setup
import py2exe
setup(
console=['bin/metusuite.py'],
name='metusuite',
version='0.1',
author='H. Gökhan Sarı',
author_email='me#th0th.me',
packages=['metusuite_libs'],
package_dir={'metusuite_libs': 'metusuite_libs'},
package_data={'metusuite_libs': ['ui/*', 'images/*']},
scripts=['bin/metusuite.py'],
url='https://github.com/th0th/metusuite/',
license='LICENSE.txt',
description='METU Suite.',
long_description=open('README.md').read(),
)
When I run
setup.py py2exe
it successfully builds metusuite.exe in 'dist' folder, however, since application depends on external user interface files -created with Qt Designer- and it can't find them, I get an error:
Designer: An error has occurred while reading the UI file at line 1, column 0: Premature end of document.
Traceback (most recent call last):
File "metusuite.py", line 38, in <module>
File "metusuite_libs\msCafeteriaMenu.pyc", line 37, in __init__
File "metusuite_libs\msCafeteriaMenu.pyc", line 17, in __init__
RuntimeError: Unable to open/read ui device
And I couldn't figure out how am I supposed to add *.ui files (also there are some .png icons) into that structure. I was thinking of converting .ui files to Python code, then I would have encounter same issue when I need to add some icons.
Hence, how can I add my ui and png files in py2exe structure? Or is there any alternative method for what I am trying to accomplish?
Well, I think you could do one of two realistic things:
Compile your .ui files to .py files using pyside-uic and modify your code to do conditional loading of the py files for the user interface and place the png files in a Qt Resource file
Create a Qt Resource file with your ui files inside of it, compile that with pyside-rcc, and then load the ui files using QtUiTools or some similar process
pyside-uic
I greatly prefer using the pyside-uic method for loading ui files because it is the most straightforward way of loading ui files into a program that correlates with my knowledge of Qt in C++. pyside-uic is included with the PySide applications and for me it is found in the Scripts directory of my Python installation, e.g. C:\Python27\Scripts\pyside-uic.exe. Taking a note from how C++ compilation handles ui files, I typically compile my ui files to have a name like ui_[Name of the ui file].py:
C:\Python27\Scripts\pyside-uic mainwindow.ui > ui_mainwindow.py
Inside of that resulting .py file, pyside-uic creates a class named the same name as the base class of the ui file prepended with Ui_. So, for instance, if you created a mainwindow.ui that contained the definition for a class named MainWindow, the created class would be Ui_MainWindow. If the ui file defined a class named SourceWindow, the class within the .py file Ui_SourceWindow. In Qt Designer you set the class name by setting objectName in the root element of the object tree (in the upper right of the window).
With your files cafeteria_menu,ui and dialog_login.ui, you would get derived classes Ui_cafeteria_menu and Ui_dialog_login.
Once you have the .py file generated, it can be used by importing it into the definition file for your widget and used using the setupUi method of the class in the Ui file
from PySide import QtCore, QtGui
from ui_mainwindow import Ui_MainWindow
class MainWindow(QtGui.QMainWindow):
def __init__(self, parent=None):
super(MainWindow, self).__init__(parent)
self.ui = Ui_MainWindow()
self.ui.setupUi(self)
Once you have ui defined for the class, all of the connections and ui elements for the widget need to be accessed through self.ui
self.ui.lineEdit.textChanged[str].connect(self.processText)
Since you would have to put your .png files in a Qt Resource File, I'll talk about it in the next section.
pyside-rcc
Like pyside-uic, pyside-rcc is included with the PySide application, although mine is in the site-packages directory of Python instead of in Scripts (if it's in the same place for you, you can always copy it).
C:\Python27\lib\site-packages\PySide\pyside-rcc.exe
Before you can compile the Qt Resource File, you have to first create it using one of the Qt Tools. I use Qt Creator since it can perform almost all of the functions related to Qt in one application. The documentation for the Qt Resource System shows that the resource file is really just an XML file that defines file paths and internal paths for the resource system. You can set up and organize the files however you want but when it comes to compile, all of the files defined in the Resource File must be in the same directory or a sub-directory of the file. Once you have the Resource File defined, you need to use pyside-rcc.exe to compile it into a .py file. I typically name the resource file the same as the project and keep everything in one resource file to make dealing with the resources more concise.
C:\Python27\lib\site-packages\PySide\pyside-rcc.exe -py2 MyProject.qrc > MyProject_Resources.py
The -py2 switch defines that the output from the file should be formatted for Python 2.x. If you are using Python 3.x or plan to use it in the future, you can use the -py3 switch and the outcome will be compatible with Python 3.x.
Putting it all together
Since you are already loading the ui files directly QUiLoader, you just need to refactor your QUiLoader statements to load a QFile that opens the ui resource from the resource system. To use the files from the resource system, all you need to do is import your Resource .py file, the one generated from pyside-rcc, into the main script file of your program and the last line in the resource file is a call to qInitResources() which initializes the resources to be used in the entire program. To load a file using QFile, use a path that starts with ":" and then references the paths that were defined in the Resource File. You could create a file msResources.qrc that has ui and images that has your ui and png files defined as sub categories.
So, if your resource file looks something like this
/ui
cafeteria_menu.ui
dialog_login.ui
/images
cafeteria-menu.png
exit.png
logo.png
mail-fetch.ong
And, if you want to load those files, you just need to create a QIcon or QFile like so:
cafeteriaMenuIcon = QtGui.QIcon(":/images/cafeteria-menu.png")
cafeteriaMenuUi = QtCore.QFile(":/ui/cafeteria_menu.ui")
In use in your code for GUICafeteriaMenu in msCafeteriaMenu, I would just change the __init__ method for GuiCafeteriaMenu to load and use the ui file from the resources:
uiFile = QFile(":/ui/cafeteria_menu.ui")
uiFile.open(QFile.ReadOnly)
UiLoader.load(uiFile, self)
uiFile.close()
I would probably place the output from pyside-rcc into the metsuite_libs package into something like msResources.py and import the msResources file in the __init__.py file as part of your package. That way, once you have the .py files created and imported into your program, the extra file would be encapsulated in your package and you will not need to change your setup.py file. Before you do the py2exe conversion, running the refactored program should work just fine normally. Additionally, no matter how you handle the ui files, you will always need to use a Resource File to be able to package icons into the program. For portability reasons, using resource files for icons is probably a good habit to get in to.

Resources