angular 2 async route module + entryComponents - angular2-routing

I have an async loaded module with async route functionallity in angular 2. In the main module I have an implementation which uses the component factory to instantiate the component I added to the async module with entryComponents.
When I now try to instantiate it, I get the following error:
Error: No component factory found for InEntryComponentsComponent. Did you add it to #NgModule.entryComponents?
at NoComponentFactoryError.ZoneAwareError (http://localhost:3000/polyfills.dll.js:4731:33)
at NoComponentFactoryError.BaseError [as constructor] (http://localhost:3000/vendor.dll.js:28595:16)
at new NoComponentFactoryError (http://localhost:3000/vendor.dll.js:28716:16)
at _NullComponentFactoryResolver.resolveComponentFactory (http://localhost:3000/vendor.dll.js:28733:15)
at AppModuleInjector.CodegenComponentFactoryResolver.resolveComponentFactory (http://localhost:3000/vendor.dll.js:28777:35)
at SwapComponentDirective.set [as swapCmp] (http://localhost:3000/main.bundle.js:2959:66)
at Wrapper_SwapComponentDirective.check_swapCmp (/ModalModule/SwapComponentDirective/wrapper.ngfactory.js:50:26)
at View_ModalOverlay2.detectChangesInternal (/ModalModule/ModalOverlay/component.ngfactory.js:83:36)
at View_ModalOverlay2.AppView.detectChanges (http://localhost:3000/vendor.dll.js:79810:14)
at View_ModalOverlay2.DebugAppView.detectChanges (http://localhost:3000/vendor.dll.js:80005:44)
at ViewContainer.detectChangesInNestedViews (http://localhost:3000/vendor.dll.js:80143:37)
at CompiledTemplate.proxyViewClass.View_ModalOverlay_Host0.detectChangesInternal (/ModalModule/ModalOverlay/host.ngfactory.js:32:14)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:3000/vendor.dll.js:79810:14)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:3000/vendor.dll.js:80005:44)
at ViewContainer.detectChangesInNestedViews (http://localhost:3000/vendor.dll.js:80143:37)
at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.detectChangesInternal (/AppModule/AppComponent/host.ngfactory.js:31:14)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:3000/vendor.dll.js:79810:14)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:3000/vendor.dll.js:80005:44)
at ViewRef_.detectChanges (http://localhost:3000/vendor.dll.js:59572:20)
at http://localhost:3000/vendor.dll.js:40308:67
at Array.forEach (native)
at ApplicationRef_.tick (http://localhost:3000/vendor.dll.js:40308:25)
at http://localhost:3000/vendor.dll.js:40227:105
at ZoneDelegate.invoke (http://localhost:3000/polyfills.dll.js:4162:26)
at Object.onInvoke (http://localhost:3000/vendor.dll.js:30260:37)
at ZoneDelegate.invoke (http://localhost:3000/polyfills.dll.js:4161:32)
at Zone.run (http://localhost:3000/polyfills.dll.js:4033:43)
at NgZone.run (http://localhost:3000/vendor.dll.js:30129:62)
at Object.next (http://localhost:3000/vendor.dll.js:40227:81)
at SafeSubscriber.schedulerFn [as _next] (http://localhost:3000/vendor.dll.js:42094:52)
at SafeSubscriber.__tryOrUnsub (http://localhost:3000/vendor.dll.js:591:16)
at SafeSubscriber.next (http://localhost:3000/vendor.dll.js:540:22)
at Subscriber._next (http://localhost:3000/vendor.dll.js:493:26)
at Subscriber.next (http://localhost:3000/vendor.dll.js:457:18)
at EventEmitter.Subject.next (http://localhost:3000/vendor.dll.js:4237:25)
at EventEmitter.emit (http://localhost:3000/vendor.dll.js:42080:76)
at NgZone.checkStable (http://localhost:3000/vendor.dll.js:30225:40)
at NgZone.onLeave (http://localhost:3000/vendor.dll.js:30301:14)
at Object.onInvokeTask (http://localhost:3000/vendor.dll.js:30254:27)
at ZoneDelegate.invokeTask (http://localhost:3000/polyfills.dll.js:4194:40)
at Zone.runTask (http://localhost:3000/polyfills.dll.js:4071:47)
at HTMLButtonElement.ZoneTask.invoke (http://localhost:3000/polyfills.dll.js:4265:33)
Anyone an idea how to get this running? When I move the component to a module which is not async loaded, then all is fine.
As a base I'm using the angular2-webpack-starter.

Related

Next-Auth : defaultCookies is not defined

I'm using next/auth version: 3.27.3
I suddenly got this error while running my app. Anyone encountered this?
error - unhandledRejection: ReferenceError: defaultCookies is not defined
at C:\Users\MAGICSOFT Mike\Desktop\NEW MAGICSOFT\crd-prototype\node_modules\next-auth\dist\server\index.js:102:9
at new Promise (<anonymous>)
at NextAuthHandler (C:\Users\MAGICSOFT Mike\Desktop\NEW MAGICSOFT\crd-prototype\node_modules\next-auth\dist\server\index.js:67:10)
at NextAuth (C:\Users\MAGICSOFT Mike\Desktop\NEW MAGICSOFT\crd-prototype\node_modules\next-auth\dist\server\index.js:299:10)
at __WEBPACK_DEFAULT_EXPORT__ (C:\Users\MAGICSOFT Mike\Desktop\NEW MAGICSOFT\crd-prototype\.next\server\pages\api\auth\[...nextauth].js:188:128)
at Object.apiResolver (C:\Users\MAGICSOFT Mike\Desktop\NEW MAGICSOFT\crd-prototype\node_modules\next\dist\server\api-utils.js:101:15)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async DevServer.handleApiRequest (C:\Users\MAGICSOFT Mike\Desktop\NEW MAGICSOFT\crd-prototype\node_modules\next\dist\server\next-server.js:775:9)
at async Object.fn (C:\Users\MAGICSOFT Mike\Desktop\NEW MAGICSOFT\crd-prototype\node_modules\next\dist\server\next-server.js:666:37)
Seems like changing the next-auth version on your package.json file solves this issue.
For my case, changing from version "^3.29.0" to "3.29.3" solved the issue.

Vue2 is successful in writing like this,but using vue3 will prompt the following questions

Vue2 is successful in writing like this,but using vue3 will prompt the following questions.
TypeError: Cannot read property 'getBanner' of undefined
at _callee$ (Banner.vue?40cf:46)
at tryCatch (runtime.js?96cf:63)
at Generator.invoke [as _invoke] (runtime.js?96cf:293)
at Generator.eval [as next] (runtime.js?96cf:118)
at asyncGeneratorStep (asyncToGenerator.js?1da1:3)
at _next (asyncToGenerator.js?1da1:25)
at eval (asyncToGenerator.js?1da1:32)
at new Promise (<anonymous>)
at eval (asyncToGenerator.js?1da1:21)
at Proxy.getBanner (Banner.vue?40cf:46)

VueJs Mocha unit tests RUNTIME EXCEPTION ReferenceError: IDBIndex is not defined

I have an VueJs app with firebase integrated and I am trying to use Mocha to test my components. The tests will pass when firebase is not a dependency in the component. When I bring in firebase I get the following error when running the unit tests.
$ vue-cli-service test:unit
WEBPACK Compiling...
DONE Compiled successfully in 1916ms
WEBPACK Compiled successfully in 1916ms
MOCHA Testing...
RUNTIME EXCEPTION Exception occurred while loading your tests
ReferenceError: IDBIndex is not defined
at Module../node_modules/idb/lib/idb.mjs (....myapp-web/dist/webpack:/node_modules/idb/lib/idb.mjs:87:1)
at __webpack_require__ (....myapp-web/dist/webpack:/webpack/bootstrap:19:1)
at Module../node_modules/#firebase/installations/dist/index.esm.js (....myapp-web/dist/webpack:/node_modules/#firebase/installations/dist/index.esm.js:1:1)
at __webpack_require__ (....myapp-web/dist/webpack:/webpack/bootstrap:19:1)
at Module../node_modules/#firebase/performance/dist/index.esm.js (....myapp-web/dist/webpack:/node_modules/#firebase/performance/dist/index.esm.js:1:1)
at __webpack_require__ (....myapp-web/dist/webpack:/webpack/bootstrap:19:1)
at Module../node_modules/firebase/dist/index.esm.js (....myapp-web/dist/webpack:/node_modules/firebase/dist/index.esm.js:1:1)
at __webpack_require__ (....myapp-web/dist/webpack:/webpack/bootstrap:19:1)
at Module../src/firebaseConfig.js (....myapp-web/dist/webpack:/src/firebaseConfig.js:1:1)
at __webpack_require__ (....myapp-web/dist/webpack:/webpack/bootstrap:19:1)
at Module../tests/unit/loginTest.spec.js (....myapp-web/dist/webpack:/tests/unit/loginTest.spec.js:5:1)
at __webpack_require__ (....myapp-web/dist/webpack:/webpack/bootstrap:19:1)
at run (....myapp-web/dist/webpack:/node_modules/mocha-webpack/lib/entry.js:3:1)
at Array.forEach (<anonymous>)
at Object../node_modules/mocha-webpack/lib/entry.js (....myapp-web/dist/webpack:/node_modules/mocha-webpack/lib/entry.js:10:1)
at __webpack_require__ (....myapp-web/dist/webpack:/webpack/bootstrap:19:1)
at ....myapp-web/dist/webpack:/webpack/bootstrap:83:1
at Object.<anonymous> (....myapp-web/dist/main.js:87:10)
at Module._compile (internal/modules/cjs/loader.js:759:30)
at Object._module2.default._extensions.<computed> [as .js] (....myapp-web/node_modules/mocha-webpack/lib/util/registerRequireHook.js:148:12)
at Module.load (internal/modules/cjs/loader.js:628:32)
at Function.Module._load (internal/modules/cjs/loader.js:555:12)
at Module.require (internal/modules/cjs/loader.js:666:19)
at require (internal/modules/cjs/helpers.js:16:16)
at ....myapp-web/node_modules/mocha/lib/mocha.js:334:36
at Array.forEach (<anonymous>)
at Mocha.loadFiles (....myapp-web/node_modules/mocha/lib/mocha.js:331:14)
at Mocha.run (....myapp-web/node_modules/mocha/lib/mocha.js:811:10)
at ....myapp-web/node_modules/mocha-webpack/lib/runner/TestRunner.js:191:27
at ....myapp-web/node_modules/mocha-webpack/lib/webpack/compiler/registerReadyCallback.js:26:7
at AsyncSeriesHook.eval [as callAsync] (eval at create (....myapp-web/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:36:1)
at AsyncSeriesHook.lazyCompileHook (....myapp-web/node_modules/tapable/lib/Hook.js:154:20)
at ....myapp-web/node_modules/webpack/lib/Compiler.js:304:22
at Compiler.emitRecords (....myapp-web/node_modules/webpack/lib/Compiler.js:489:39)
at ....myapp-web/node_modules/webpack/lib/Compiler.js:298:10
at ....myapp-web/node_modules/webpack/lib/Compiler.js:475:14
at eval (eval at create (....myapp-web/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:11:1)
at callback (....myapp-web/node_modules/copy-webpack-plugin/dist/index.js:126:17)
at afterEmit (....myapp-web/node_modules/copy-webpack-plugin/dist/index.js:220:13)
at AsyncSeriesHook.eval [as callAsync] (eval at create (....myapp-web/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)
at AsyncSeriesHook.lazyCompileHook (....myapp-web/node_modules/tapable/lib/Hook.js:154:20)
at ....myapp-web/node_modules/webpack/lib/Compiler.js:472:27
at ....myapp-web/node_modules/neo-async/async.js:2818:7
at done (....myapp-web/node_modules/neo-async/async.js:3522:9)
at AsyncSeriesHook.eval [as callAsync] (eval at create (....myapp-web/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
at ....myapp-web/node_modules/webpack/lib/Compiler.js:454:33
at MemoryFileSystem.writeFile (....myapp-web/node_modules/memory-fs/lib/MemoryFileSystem.js:328:9)
at writeOut (....myapp-web/node_modules/webpack/lib/Compiler.js:452:30)
at ....myapp-web/node_modules/webpack/lib/Compiler.js:466:7
at objectIteratorWithKey (....myapp-web/node_modules/neo-async/async.js:3509:9)
at timesSync (....myapp-web/node_modules/neo-async/async.js:2297:7)
at Object.eachLimit (....myapp-web/node_modules/neo-async/async.js:3463:5)
at emitFiles (....myapp-web/node_modules/webpack/lib/Compiler.js:358:13)
at Immediate._onImmediate (....myapp-web/node_modules/memory-fs/lib/MemoryFileSystem.js:288:4)
at processImmediate (internal/timers.js:439:21)
ERROR mocha-webpack exited with code 1.
Total task duration: 3.9s
loginTest.spec.js
import { expect } from 'chai';
import { shallowMount } from '#vue/test-utils';
import sinon from 'sinon';
import Login from '../../src/components/Login';
const fb = require('../../src/firebaseConfig');
describe('Login.vue', () => {
it('Expect login email field to have default value.', () => {
const wrapper = shallowMount(Login);
sinon.stub(fb.auth(), 'signInWithEmailAndPassword', () => {});
expect(wrapper.find('#email1').text())
.to()
.be('you#email.com');
});
});
I have tried a number of different solutions to modifying the vue.config.js file to changing some node module configurations based on others suggestions but still no luck. Please let me know if I need to provide any other feedback or files for clarification.
Thank you in advanced for your help. Hopefully it's something simple and I just made a silly mistake.

Firebase Deploy Error 'Route.post() requires a callback function but got a [object undefined]?

I am getting this error when Firebase deploy in terminal. I can't find any of my code with Route.post() in. It looks like it s being called from a module ...
i deploying functions
i functions: ensuring necessary APIs are enabled...
✔ functions: all necessary APIs are enabled
i functions: preparing functions directory for uploading...
Error: Error occurred while parsing your function triggers.
Error: Route.post() requires a callback function but got a [object Undefined]
at Route.(anonymous function) [as post] (/Users/Desktop/castApp/functions/node_modules/express/lib/router/route.js:202:15)
at Function.app.(anonymous function) [as post] (/Users/Desktop/castApp/functions/node_modules/express/lib/application.js:482:19)
at Object.<anonymous> (/Users/Desktop/castApp/functions/index.js:12:5)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
In my case, this error occurred when I deleted the function in the controller file but didn't update the corresponding place where needs this function as a callback function in the router file - index.js.
index.js:
app.post('/new', addNew);
const { addStandupHost } = require('./APIs/candidates');
candidate.js:
// exports.addNew = (request, response) => {
// ...
// db operation here
// ...
//}
It was solved just by deleting the corresponding code in index.js. To avoid this error, we should keep functions export and import consistent.

babel-generator Invalid mapping when writing AST

While writing a plugin that injects code from another file ... another file is transformed and injected into the AST of the original file
astB = babel.transformFileSync(templatename, { plugins:plugins, code:false});
after that, calling:
generate(ast, { sourceMaps: true, retainLines: false, quotes:"'"}, codes);
causes error
Error: Invalid mapping: {"generated":{"line":30,"column":0},"original":{"line":1,"column":0}}
at SourceMapGenerator_validateMapping [as _validateMapping] (node_modules\babel-generator\node_modules\source-map\lib\source-map-generator.js:289:13)
at SourceMapGenerator_addMapping [as addMapping] (node_modules\babel-generator\node_modules\source-map\lib\source-map-generator.js:101:12)
at Array.forEach (<anonymous>)
at SourceMap.get (node_modules\babel-generator\lib\source-map.js:49:25)
at Object.get [as map] (node_modules\babel-generator\lib\buffer.js:53:33)
at writeAst (test2.js:59:24)
at Object.<anonymous> (test2.js:55:1)
at Module._compile (module.js:635:30)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
It is not very obvious from the error, but the problem is that injected code called parser as part of the transformation, and did not provide file name.
changing the line with transform fixes the issue
adding parserOpts:{sourceFilename: templatename} the code becomes:
astB = babel.transformFileSync(templatename, {parserOpts:{sourceFilename: templatename}, plugins:plugins, code:false});

Resources