I'm trying to add material components to my project. As soon as I import, for example, MatToolbarModule, every page hang with NG0203: inject() must be called from an injection [...].
I've tried it with a new project that was working without it.
I'm running angular 15 with node 18.04. I'm also using jetbrains rider(it's a dotnet backend)
If, like me, you are new to angular, remember to update and install #angular/material via "ng add" before using it...
Related
I recently faced the task of converting a fairly mature angular project to SSR because I had overestimated the search power of SEO in angular projects. I'm not familiar with node, my angular project is on an apache server and uses php(slim) as the backend api, however, when I started trying to use "most of the tutorials", i.e., the first step, introducing nguniversal/express-engine into the project, it went well, npm did not report any errors.
Then I tried to run npm run build:ssr and it also worked fine. The problem is that when I run npm run serve:ssr, it ends up throwing a "ReferenceError: navigator is not defined" error...
Earlier, I built a completely clean angular project for testing, from build:ssr to run serve:ssr. Even I specified node xxxx/xxxx/main.js directly, no problem, which is obvious, because the angular project for testing is absolutely clean.
However, this does not work on my current "existing angular project". Yes, I fully understand that SSR doesn't allow for navigator or most so-called DOM manipulation, and although I'm not familiar with angular universal yet, I've previewed it and I know that's not possible, but here's the biggest problem :
In this existing angular project, there is no any navigator operations, not even a single line of code
In fact, main.js is also generated automatically, I can't stop it at all, I don't understand why there is "navigator" written in main.js?
I've checked many so-called solutions, including writing something in server.ts, but nothing helps, how can I continue? This is really quite desperate!
Big thank any help!
i will try to give you a little of context.
With my team we are trying to migrate MUI v3 to v4 in a reactJs project. We did it with the project itself and it works! but, some kind of problems came up when we navigated to certain windows that use a certain library to work.
This library was developed by other guy that is not in the company anymore and we are not in touch neither, but, we have access to the library GitHub repository, them are two actually.
https://github.com/rjpizarro/forms
https://github.com/rjpizarro/make-request
i've never had to do this so, i decided to clone the project then install the dependencies and run it.
I'm using nvm so in that moment i was working with node v12 and i got some errors when i executed the npm start ("start": "webpack --watch").
If i use node 10 the scrips runs perfectly but in the entire project we are using node 12 so i'm not sure what is the problem here.
i'm wonder if it could be a problem when i'll try to migrate from MUI v1 to v4 and use the modified library into my project again, or in first place, why its working rigth now?
Anyway i just wanted to know, just if i need it, Could i use different versions of node in a library and then use other newer version into the entire project?
Could this make some negatives effect into my entire project?
Which is the best way to migrate MUI into this library and put it in my project again?
Each nodejs process (including all the modules/libraries it loads) has exactly one version of nodejs running. It isn't possible to have two separate versions of nodejs in the same process each running different parts of the code.
You could make two separate nodejs apps that each run under a different version of nodejs that communicate with each other via some interprocess communication, but they have to be two separate applications/processes.
If you want to run everything in one process (on one version of nodejs), then you will need to test and fix all your libraries to run on that one version of nodejs.
I currently have a React based website. I want to start on the process of converting the website to also work natively through react-native. I understand that I will need to re-build the UI for the native version.
My goal however is to leave both versions in the same node project so I dont have to update my non-view based code separately for both versions of the code base.
Is it possible to add the dependencies and files necessary for react native while not having to separate the native code out into it's own completely separate project and if so how?
Lerna is a tool that optimizes the workflow around managing multi-package repositories with git and npm.
I am currently working on two related projects. One is a Phoenix based website and API, while the other is an Angular2 application that among other things uses the API provided by Phoenix. I now want the Angular2 application to be used by the Phoenix project. The problem is that I don't know what the best approach is. I am very new to Angular2 and NPM, and know very little of how it actually works outside of basic usage. These are the ways I can think of solving my problem:
Put the Angular2 project into the Phoenix project, making it one project. I have no idea how to do this, but I will probably get there through trial and error as both use Node.js so it should be doable.
Publish the Angular2 project to NPM, and then import it to the Phoenix project. How much work would be needed on the Phoenix side? Would it be the same as just running the index.html in the Angular2 project? Would I need some kind of Angular2 "shell" around it?
Run the Angular2 application as it's own thing, and just link to it through the Phoenix website.
Importing it as a node module sounds like the best approach, but can it be done for full applications, or is it intended for support libraries only?
I am unsure if this is the "right" way to do it but this is what I did in the end:
I compiled my entire Angular2 project into app.js, vendor.js, and common.js, I then moved it all to web/assets/. After that I simply created a new html and referenced the files in question.
The biggest challenged was finding something to compile it all into these 3 files. I ended up using a stripped down version of: https://github.com/AngularClass/angular2-webpack-starter
I think you would want to leverage brunch.io, which ships with phoenix to handle your front end dependencies. There are skeletons which are essentially templates that create different front end configs but I don't see one that provides angular2. In this case I would say use bower to install the js packages you want ie:
bower install -S angular2
With this you can use brunch as a processing pipeline and it will handle minification, linting etc. and you will still be working within the "recommended" approach to managing front end assets in Phoenix.
I need to develop a mobile application using worklight. While i was going through few sample source code, I observed a gulpfile where they defined few Task/Watch in it. There was also a package.json where they have defined devDependencies property.
I like to know how a hybrid app project (when developed using Worklight or any other tool/framework) use the gulpfile, package.json, node.js, bowerrc. How is the controls passed across all these components when implemented for a hybrid app developmen and What will be the first point of execution in this sequence of execution workflow. As I believe wlEnvInit() inside main.js is the starting point of execution for a worklight project.
I tried google but could'nt find any explanation on the same.
The Gulp file you see is part of a default Ionic project. It handles compiling Sass files and running the bower install command to install dependancies. If you are using Sass in your project, then this would be useful to you, but it does not directly relate to MobileFirst.
As you know, when you update your common code, you need to do a build/deploy to get the code deployed to your mobile platforms. So if using Sass, then you need to remember that while the Gulp file may compile the CSS, you still need to "mfp bd" to deploy it to MF.
Does this answer your question?