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 .
Related
In a React project, I am trying to run the app on a live server in the web browser. However when I command CD Ravenous to go to the right file and npm start, the browser gives me the following error:
./src/index.js
Module not found: Can't resolve './App' in '/Users/mauricemarkslag/ravenous/src'
I've checked if the imports have been filled in correctly, and that should be the case now I guess. However the error doesn't seem to be fixed with this code:
Code file
Folder structure
Does anybody know what I might do wrong?
You have a typo, you should use ./app.css instead of ./App.css, and I am assuming that the file that you put in your question is app.js.
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 having an issue when deploying a React/Redux site to Azure App Service.
It builds and deploys fine, but when visiting the site I get JS errors for babel-polyfill - Uncaught TypeError: define is not a function.
We're using webpack with a few loaders and there is one in particular that I have a feeling could be the problem - imports-loader. We had it set as use: 'imports-loader?define=>false' which I believe overrides the define method. I tried this as true also but with no affect. I tried removing the define=>false altogether and the whole build broke...
See webpack config here.
Advice much welcome!
Cheers
Dave
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.
I'm currently in the process of migrating an AngularJS (1.5.8) from a Gulp pipeline to a webpack pipeline.
One of the dependencies we have is angular-permission.
We're relying on the commonjs style (require) and as documented here I added a require('angular-permission') before the declaration of my angular module.
I also added the angular dependencies permission and permission.ui right after ui.router.
The bundling process goes through, however every time we try to load the app we have this error message in the console: Unknown provider: PermissionStoreProvider <- PermissionStore(…)
I guess the problem is because angular-permission is not injecting the services properly but even playing with the require statement, adding provide plugin or few other attempts didn't solve the issue.
So the question is: how can I properly integrate angular-permission with webpack?
Finally found out what it was with the help of a friend. During my transition from bower to npm for client side deps I unintentionally changed the version of angular permission to the latest. And they changed the name of the service to PermPermissionStore (same thing for Role Store)
Related: https://github.com/Narzerus/angular-permission/issues/310