I upgraded my app to Angular cli ^11.0.2 recently, from then my HTML and SCSS changes are not compiled on save even when ng serve is running. I have to save the respective ts file to get the html changes compile. I saw a related issue on Github with no proper solution(Here). Is this because of ivy engine ? or Did I miss any update on any particular npm package?
This seemed to happen due to default Ivy engine configuration with Angular 11.
I disabled the enableIvy flag in tsconfig.json file like this :
"angularCompilerOptions": { "enableIvy": false, "allowEmptyCodegenFiles": true }
A friend suggested that AOT with ivy configuration must be avoided in dev environment to avoid this kind of issues.
Related
I have installed OroCRM 4.1 version.The requirejs bundle doesn't seem to have loaded. I checked the bundles folder and i do not see the ororequirejs folder there, which was present in the previous version (4.0). Because of this the custom extension i have that uses require to include js files are failing. I tried php bin/console oro:requirejs:build command but its failing with the messsage There are no commands defined in the "oro:requirejs" namespace. Can someone help me fix this issue?
RequireJsBundle is not available in OroCRM 4.1, as an application migrated to the webpack build.
Please, follow the migration guide referenced from CHANGELOG.md:
https://github.com/oroinc/platform/blob/master/CHANGELOG.md#requirejsbundle
I've got quite some experience in (web) development (Java, ASP.NET and PHP amongst all), and fairly new to React and Node JS.
Although I did multiple tutorials and read multiple articles, I feel like I'm missing some point here and there. Currently I'm working on a React app which implements a nice HTML template I found.
One React tutorial I did used Webpack for building and deploying the app (local). This works nice, does the job of transpiling ES6 (.jsx) and SASS using babel. So far so good :)
My template has an image slider (Owl Carousel), so I installed the react-owl-carousel module.
This gave me quite some problems with jQuery (also installed as a module).
After several attempts to fix this I decided to move on to another slider module, React Awesome slider.
I used the module as the README.md explained. But upon building it (npm run build), I got an error that the .scss file within react-awesome-slider could not be transpiled. A message like "are you missing a loader".
So I installed sass, node-sass, sass-loader etc etc and configured these in my webpack.config.js.
I also noticed the react-awesome-slider module within node-modules contained a webpack.config.js.
Long story so far, sorry, now to the essence of this question.
In what way can the modules installed (like react-awesome-slider) be considered "black boxes"?
It doesn't feel logical that all the modules get build when building the main app. The "exclude: /node_modules/," config in webpack.config.js prevents this, not?
So why does the react-awesome-slider give an error about .scss transpiling? I had no .scss rule in my webpack config then.
Will all dependend modules automatically get installed when installing a new module? So when I run "npm i react-awesome-slider --save-dev", will its dependencies also be installed? Or is this not necessary? And do I need to update (webpack) configuration after installing a new module? Or is it really black box and "self-containing"?
Any help would greatly be appreciated!!! Maybe there is a good react-webpack sample app on Github or something like that?
That also confusing me for a really long time. Here are some answers to your question.
people publish packages to the NPM, so a module your project depends on
can be pre-builded or source code, it depends. I have checked react-awesome-slider, it's main field in package.json is dist/index.js, directly import it won't cause an issue because there are no SCSS files.If you follow the CSS module usage instruction you have import react-awesome-slider/src/styles and you will find src/styles.js file import ../styled.scss,so webpack will load it with SCSS loader which you have not configured, that's why an error occurred.
while you install modules, npm will go
through its dependency tree, install its dependencies, dependencies'
dependencies, until there's no more dependency module to install. before npm 3.0 the node_module folder is tree structure reflects the dependency tree, but it causes problems that many modules relay on the same dependency, npm will download and save too many same files, after version 3.0 it becomes flat(release note here, search flat keyword).
You don't need to update your webpack config after you install a dependency cause webpack build process will handle it with file dependency tree. You have installed a package and import it in your activation code, file there will be handle( with its package.json main field file as an entry), you have installed a package without using it or import it in a dead file(dead file means you cannot find it from webpack entry file), it will be ignored by webpack as it's dead code.
I have too many confuse until I read npm docs. Good luck to you.
Node modules are build to execute packages.When the are compiled they have proper configuration to handle extensions that are imported in it and when you import something like .scss in your main app then it does not know about that extension then your webpack need rules to include that extensions.
It does exclude node_modules as the are pre-converted pr pre build.
More over webpack is bit tough so developers create CRA Have look at it.
I am having a problem with the deployment of an angular app. It does not occur on another machine if deployed. My app is not running and it shows the following error on Chrome:
Not allowed to load local resource
and in Mozilla:
'src' attribute of element is not a valid URI
The thing is, it is working completely fine if deployed from other machines. So I am guessing the issue is with the versions of node or typescript or ng or whatsoever. I am new to server deployment and this kind of issue is new to me.
I am using following command to generate the deployment folder:
ng build --prod --base-href /candidate/
Following is my version details:
Node version: v10.16.3
Application typescirpt version: Version 2.9.2
Globally installed typescript version on the machine: Version 3.6.3
I deleted node modules and package-lock.json file and run npm install before production build. I got no error and was successfully able to generate dist folder.
The deployment folder works perfectly if it is deployed from machines which have upgraded or downgraded node version installed.
I have found many suggestions regarding the error shown on the browser, tried upgrading the node global versions but there is no way around. I am quite unsure about what I am missing here. Any kind of heads up would be great in this situation.
After digging into deep I found out that the problem is not with the version rather with the base URL it is generating in index.html file after build.
This issue occurs when using git-bash on Windows.
The git-bash sees the last argument of the command- ng build --prod --base-href /candidate/ as a path relative to its binary folder and prepends the argument with that (it converts the "seems-to-be" relative path into an absolute path).
So, I used PowerShell instead of Git-Bash and the issue was gone. The base-href parameter is handled fine there.
To resolve the issue with git-bash go through this link, which actually helped me to resolved my particular issue.
You should control base tag in index.html in dist folder.
<base href="/">
I have Angular4 integrated with Visual Studio 2017 using this article.
I also use Nodejs 8.6.0 and npm 5.4.2 (the latest versions at this time).
vs2017 generated a folder named node_modules and all the sub folders/files without caching any error.
But node_modules/systemjs folder does not exist in it. It's been called in <header> tag like this: <script src="node_modules/systemjs/dist/system.src.js"></script>. which result to 404 Not Found page.
I also create an angular from the ground up without VS2017 and it works like a charm! It doesn't have node_modules/systemjs folder either, but it works!!!
What is happening? And how should i bring this folder back? Does it related to the Angular2 and is not supported in Angular4?
There are two libraries for loading modules for Angular: systemJS and Webpack. Depending on which technique you use to build your application, you will use one or the other.
For example, if you use the Angular CLI, it uses Webpack and you won't see systemJS in your project.
If you use the latest dotnet new angular for VS 2017, it uses Webpack as well.
If you build your application following the angular.io documentation, it uses systemJS.
So I have created a pretty default keystoneJS project and the first error that appeared was that when ran locally the website's default css won't load.
It's looking for site.min.css but in the folder there is only site.scss
After I compiled the scss via sublime text 2 sublimeBuild and renamed the file to site.min.css (from site.css) it ran perfectly but what worries me is why does the default installation have this error.
Where should I change this? Is there an scss builder included so I have to change folder naming or is there some other issue?
My guess is that it has something to do with some step skipped. I remember the keystone installation asked me whether I wanted to use sass so I suppose everything should be ok.
Is the problem because I did not use grunt somehow?
I recall reading somewhere that this grunt tool has to be used instead of node when running a server and I see a Gruntfile in my folder but when installed grunt-cli the grunt just loads and terminates the server right after that.
You don't have to do anything, sass-middleware is included and automatically generates CSS files from your SASS source files when they're requested.
The issue you were experiencing with site.min.css not being found was an error in the yeoman generator, from when the SASS support was added. The LESS middleware automatically compresses generated CSS when a request is made for a file ending in .min.css, but the SASS middleware doesn't do the same, so the request was 404'ing.
The problem with the yeoman generator has been fixed as of version 0.2.9, for existing projects the simple fix is to change your layout file so it refers to site.css instead of site.min.css.
Once you do that the middleware will automatically detect the presence of site.scss and generate an up-to-date version of site.css for you.