I am developing a project using Steve Sanderson's excellent template as a starting point (Angular Template for Visual Studio). I want to add Toastr functionality (Toastr) but every time I try and use it I get an error that "toastr is not defined".
I went about the following:
Added a dependency for "toastr": "2.1.2" to my package.json file.
Added both "toastr" (for the javascript) and "toastr/build/toastr.min.css" (for the css) to my webpack.config.vendor.json file.
From the command line ran webpack --config webpack.config.vendor.js.
I checked inside my vendor.css and could clearly see toastr styles. I checked inside my vendor.js and could see toastr methods. My application references both my vendor.css and vendor.js files. In fact Angular and Bootstrap styling all works fine so the references should be good.
To test Toastr functionality I wrote a very simple script
<script>toastr.success('Success')</script>
and placed it after the </body> but I got a console error in, Chrome F12, that toastr was not defined. I also tried to run the script within a click handler in an Angular component but received the same error.
Update
In my simple toastr.service.ts file which I created I added an import statement as follows: import * as toastr from "toastr"; and to prevent Typescript errors I then added: declare let toastr: any;.
The good news is My toastr service works. Frustratingly I have an error on my import statement saying "cannot find module toastr". Close.
Any suggestions why I am getting the warning and how to solve it very welcome.
Related
Mux is a video API service that has its own player: MUX Player
I am wanting to use this npm package in Angular 14/15 by importing it into a specific component only. The js should only be loaded when this component is loaded.
Import
The two methods of using the service are:
via a direct <script src="https://unpkg.com/#mux/mux-player"></script> import in the HTML (which I can do in angular's index.html file. This does however mean that the script is loaded for everyone, which is not what I want.
npm Package #mux/mux-player
Usage
Add the code to a component's HTML where the script or npm package has been imported.
<mux-player
stream-type="on-demand"
playback-id="FuJSYrK0014ec2LPnm11bzC2MAySAQPqA"
metadata-video-title="Tea and Cookies"
metadata-user-id="user-24601"
/>
Making sure to also include schemas: [CUSTOM_ELEMENTS_SCHEMA] in the module (or standalone component).
Problem
Angular can be a bit weird about untyped packages. I think that this package uses typescript, but in any case, importing the npm package gives me plenty of errors. Essentially, it's not being loaded because Angular is tree-shaking it out when I am not using the imported class in the components' ts. This means that on load, I am seeing:
Cannot find module '../../../types/mux' or its corresponding type declarations and Property 'error' in type 'MuxVideoElement' is not assignable to the same property in base type 'CustomVideoElement<HTMLVideoElement>'. Type 'MediaError' is missing the following properties from type 'MediaError': MEDIA_ERR_ABORTED, MEDIA_ERR_DECODE, MEDIA_ERR_NETWORK, MEDIA_ERR_SRC_NOT_SUPPORTED
What I've tried
To confirm that the <script> import and HTML code work together, I imported the script into the index.html, and this removed all errors and the player loaded fine.
I have tried importing the npm package import MuxPlayerElement from "#mux/mux-player";, and added declare module "#mux/mux-player"; to the typings.d.ts.
Import the package into the component, and tried to declare the #ViewChild template ref as a MuxPlayerElement, to get around any tree-shaking.
There is an Angular demo where it says "This player? It's an open book." at https://www.mux.com/player, however, this results in the error Only void and foreign elements can be self closed "mux-player". Easy solution to this is to close the tag with </mux-player> rather than .../>
I want to add some functionality to my existing website with React.
I followed this tutorial. I came to a point where I wanted to separate classes from single js file to one for each class.
Then I used
import InputField from './InputField';
Which gave me this error:
Uncaught SyntaxError: Unexpected token import
When I imported my classes the same way in an example which was created via this tutorial, it worked perfectly.
I also tried with require(), but that gave me an error message saying that require() is not defined.
So how to divide classes from single file to multiple files on an existing website that has React as an addition? Am I forced to write all code in one file, if I just add React to website? I suspect, that it does not compile as it somehow should. (I am just starting with React)
You either have to use native ES modules or use a bundler like webpack or Rollup
When I run ng build project1 --prod the build fails with the error message
ERROR in : Cannot determine the module for class MyComponent in .../project2/app/my.component.ts! Add MyComponent to the NgModule to fix it..
This seems pretty straight forward, BUT the mentioned Component is not part of the current Angular project. I defined two projects inside my angular.json and they are not dependent of each other (project1 & project2). I've got a separate shared module which both projects import and use.
The error appeared when I moved a component from project2 to my shared module. My project2 builds fine and the moved components also work fine. ng serve project1 works without problems. But for some reason, my first project now depends on most components from my second project for no reason. I already searched all my imports for the file without success. Maybe it's related to the fact that the components from project2 extend a component from the shared module?
So is there any way to see where angular thinks it needs this? For example, I see the main chuck was build before - what is angular building when it fails?
Can I exclude this somehow (tsconfig.app.json exclude didn't work)?
I found an unused import which itself imported most of the other projects components.
But if anyone still knows a way to see which file caused this kind of error I would still appreciate it and accept it as the final answer. I had to look into every single file to find the wrong import.
I am trying to build my new portfolio with Angular 4 but came across few issues.
I first built it with normal html,css and js and worked fine.
I am using typed.js to create an animation at the beginning.
This are the steps that I followed:
1 - in node_modules created folder typed within typed.min.js
2 - angular-cli.json under scripts section "../node_modules/typed/typed.min.js"
3 - in typed component i imported as: import * as typed from
'../../../../node_modules/typed/typed.min.js'; (apparently not working today and the terminal is saying this ERROR in src/app/components/loading-section/loading-section.component.ts(2,24): error TS6143: Module '../../../../node_modules/typed/typed.min.js' was resolved to '/Users/matteosoresini/Development/Portfolio2017/node_modules/typed/typed.min.js', but '--allowJs' is not set. so if i change the path as the terminal says is working but doesn't really make sense but this is not the main issue.
4 - in ngInit i tried to implement the JS function and when run the project the terminal says typed is not a constructor, even if i move the function inside a script within the typed.component.html
can you please help me with this and clarify where to import external plugin?
Thanks
I was able to install typed.js via npm install typed.js --save.
I then tried to use import { Typed } from 'typed.js'; as shown in the typed.js documentation. That threw the not a constructor error.
I changed the import to import * as Typed from 'typed.js'; and it worked for me.
Types.js has no defined typescript types in DefinitelyTyped repo.
I not sure how it would behave with Angular since it does DOM changes outside angular. You can see and try https://github.com/kuflink/angular-typed but it is not production ready.
I've tried setting up Haste using the official installation guide. Trying to compile a Hello World produces the following error:
Compiling Main into .
Linking haste-compiler/test.js
Linking Main
Linking GHC.Types
Linking GHC.IO.Handle.Text
hastec: /Users/vhsmaia/.haste/jsmods/base/GHC/IO/Handle/Text.jsmod: openBinaryFile: does not exist (No such file or directory)
I've then tried to compile the portable version. The error is now:
hastec: user error (Haste needs to be rebooted; please run haste-boot
Running haste-boot does not amend the error.
I think the problem you have, is that hastec expects your module to have a Main module. Try renaming your file to Main.hs and add a module Main where declaration to the top of the file.