I built an app that borrows heavily from Dan Wahlin’s Angular-Jumpstart app, It works when I run it using his ‘npm start’, which looks like this:
"start": "tsc && concurrently \"tsc -w\" \"node server.js\"
I then used Visaul Studio 2017 to build the ‘ASP.NET Core + Angular 2 template for Visual Studio’ app referenced by Scott Sanderson in his blog post by the same name. This ASP.NET Core/Angular 2 sample app of his uses Webpack, Server-side rendering, and HMR. It too works fine.
However, I want to add some of the code I created for the Dan Wahlin app into the Scott Sanderson app, and I am running into a moduleId-related error. The following is an example of the error message I receive:
An unhandled exception occurred while processing the request.
Exception: Call to Node module failed with error: Error: moduleId
should be a string in "FilterTextboxComponent". ...If you're using Webpack
you should inline the template and the styles...
To resolve this I have tried:
Removing the moduleId variable from the component(s) in question
Setting the moduleId varaible in this manner:
moduleId: module.id + ''
I have looked here and elsewhere and have not been able to determine what I need to do to resolve this. Is it a Webpack bug? Am I overlooking something I need to do?
I am happy to provide more information if you think that would help you help me!
I figured out what was happening...
I would edit the #Component metadata by removing the reference to moduleId in my .ts file and save it, but for some reason Webpack was not transpiling the .ts file into a new .js file. It was just bundling and serving the old .js file.
As to why? ...I think that Webpack uses the .js files when they are present, but will generate its own when they do not exist.
Related
I have a very serious issue right now trying to use Next js. No matter what version I use, any time I try to run the npm run dev, I get the following error:
error - ./node_modules/next/dist/client/dev/amp-dev.js
Module not found: Can't resolve 'C:\Usersudbasili\Documents\Programming\Acumen Developers\myportfolio\node_modules\next\dist\compiled\regenerator-runtime\runtime.js' in 'C:\Users\udbasili\Documents\Programming\Acumen Developers\myportfolio\node_modules\next\dist\client\dev'
error - Error: Cannot find module 'C:\Users\udbasili\Documents\Programming\Acumen Developers\myportfolio\.next\fallback-build-manifest.json'Require stack:
This is literally right after running the create next app command, so I don't install any additional package. One thing realized though is that this error doesn't occur when I use the public folder on my window PC but when I use the user folder called udbasili I get the above error. I have been using next.js for a long time and this is the first I am seeing this error
I had the same issue
the problem was that my project files was in a folder beginning with "ud". My folder name was "udemy".
Renaming that folder or moving the project outside that folder solved the issue
If you compare the paths, there is a missing '\' :
C:\Users**\\**udbasili\Documents\Programming\Acumen Developers\...
C:\Usersudbasili\Documents\Programming\Acumen Developers\...
A quick solution that I gave to this issue was to create the project on a different path. For example:
C:\dev\myportfolio
Please head over to https://nextjs.org/docs/messages/swc-disabled
By disabling swc in next.config.js it will resolve your issue.
You can disable swc by adding:
experimental: {
forceSwcTransforms: true,
}
It's possible your autoimport included '/dist/client/dev' in the 'next/amp' path.
Does it work if you import { useAmp } from 'next/amp'?
I am getting the following error when publishing my create react app but the error doesn't appear locally. I recently updated my React version and a load of packages too. I'm guessing it's possibly something to do with that as I've never had this issue before?
Error during service worker registration: DOMException: Failed to register a ServiceWorker for scope ('https://**subdomain**.azurewebsites.net/') with script ('https://**subdomain**.azurewebsites.net/service-worker.js'): The script has an unsupported MIME type ('text/html').
Any input on this will be greatly appreciated. The error doesn't appear to be breaking anything from what I can see but I'd rather not push this to production with any kind of errors
So turns out the issue was because I updated the react version. CRA doesn't have service workers out of the box anymore. The project was returning 'unsupported MIME type ('text/html')' because it was hitting 404 looking for a file that doesn't exist.
The fix was relativly simple.
I replaced the registerServiceWorker() in my index.js file with reportWebVitals(). I then added reportWebVitals.js to my src folder. (I just created a temp react project and pulled the file from that). After I did that it started to work for me. I think I also had to npm install web-vitals.
I am getting a bizarre error and I can't find any resolution it.
Fresh react project with a local module linked via package.json link: protocol as followed.
"dependencies": {
"otrm": "link:../otrm",
Everything runs smooth - compilation of the source module works and module dependencies are all installed .
yarn start ends up in this:
Now the error is pretty straight forward:
module.id not defined in my external library. Looking at the debugger the id is really not there.
Now the question begs, how the heck can I add the ID or what did I do wrong? I looked across the forums and Gitlab docs and the most I can find are around Angular apps .. so Stackoverflow you are my last hope.
I'm currently in the process of migrating a project (ng 1.5.8) from gulp pipeline to webpack.
I'm facing an issue where textAngular gives me the following error message Module 'ngSanitize' is not available.
if I add a require('angular-sanitize') before the require('textangular') then I get the following error message The textAngular-sanitize provider has been replaced by another -- have you included angular-sanitize by mistake?
I've tried playing with the externals of my webpack config with no luck so far. I've also tried using angular-module-sanitize, didn't work either.
So here is my question: how can I configure properly webpack + my requires so textAngular has the proper dependencies provisionned?
Thanks!
finnaly got it to work.
The solution is to:
- not require angular-sanitize
- not do anything special to the webpack config
- use these lines to require text angular instead (the generic one was including to much stuff)
require('../../node_modules/textangular/dist/textAngular-sanitize.min');
require('../../node_modules/textangular/dist/textAngular.umd');
I've been working with my repo for a while, it's a clone of the angular2-seed repo. It includes webpack 2 (I think it's still beta) and async routes.
I did some tests and reverted to a previous state, but after installing packages with npm it fails loading async components with the following message in the browser:
browser_adapter.js:85 EXCEPTION: Error: Uncaught (in promise): Error: Cannot find module './+tickets'.
The plus sign is not a typo, the folder is actually called "+tickets" and it contains an index.ts file. It always worked, and now for some reason it doesn't.
I tried everything, but the error is so clueless that I don't know where to watch. Maybe the webpack-dev-server is not serving the files correctly..?
An alternative plan would be to start everything from scratch and then move the modules, but I'm really interested to where the problem is for future implementations.
Thanks a lot for the help
Hi I've created Angular2 lazy loading demo using RC 6.
Please checkout https://github.com/Quramy/ng2-lazy-load-demo .