Upgrade to Ionic 3.0.0-beta.2 - Error: Cannot find module

[Daskus1]

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
I am trying to port my app to ionic3 using these instructions.
But I am getting the following error when I push to a lazy loaded page:
Error: Cannot find module '..pagesloginlogin.module'.
I tried with multiple apps (my own, conference-app(lazy-load branch), blank app) but always get the same error.

I think "..pagesloginlogin.module" is auto generated by Ionic when trying to find out which module to load when I call nav.push('LoginPage').

Here is the full error:

Error: Uncaught (in promise): Error: Cannot find module '..pagesloginlogin.module'.
Error: Cannot find module '..pagesloginlogin.module'.
    at g (http://localhost:8100/build/polyfills.js:3:7133)
    at webpackAsyncContext (http://localhost:8100/build/main.js:57541:25)
    at loadAndCompile (http://localhost:8100/build/main.js:96469:36)
    at NgModuleLoader.load (http://localhost:8100/build/main.js:96434:83)
    at ModuleLoader.load (http://localhost:8100/build/main.js:69488:44)
    at DeepLinker.getNavLinkComponent (http://localhost:8100/build/main.js:41566:39)
    at DeepLinker.getComponentFromName (http://localhost:8100/build/main.js:41549:25)
    at Modal.present (http://localhost:8100/build/main.js:94849:37)
    at WelcomePage.login (http://localhost:8100/build/main.js:58577:41)
    at Object.eval [as handleEvent] (ng:///WelcomePageModule/WelcomePage.ngfactory.js:252:24)
    at handleEvent (http://localhost:8100/build/main.js:12132:119)
    at callWithDebugContext (http://localhost:8100/build/main.js:13340:42)
    at Object.debugHandleEvent [as handleEvent] (http://localhost:8100/build/main.js:12928:12)
    at dispatchEvent (http://localhost:8100/build/main.js:9110:21)
    at http://localhost:8100/build/main.js:9699:38
    at g (http://localhost:8100/build/polyfills.js:3:7133)
    at l (http://localhost:8100/build/polyfills.js:3:6251)
    at l (http://localhost:8100/build/polyfills.js:3:5937)
    at http://localhost:8100/build/polyfills.js:3:6765
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15213)
    at Object.onInvokeTask (http://localhost:8100/build/main.js:4416:37)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15134)
    at n.runTask (http://localhost:8100/build/polyfills.js:3:10390)
    at a (http://localhost:8100/build/polyfills.js:3:5313)
    at HTMLButtonElement.invoke (http://localhost:8100/build/polyfills.js:3:16210)

webpackAsyncContext() is throwing the error, because it can't find "..pagesloginlogin.module" in the map.
It seems like the path to the module is missing the slashes. If it would include the slashes ("..\pages\login\login.module") it probably would find a match in the map.

var map = {
     ... ,
	"..\\pages\\login\\login.module": [
		226
	],
    ...
  }

function webpackAsyncContext(req) {
	var ids = map[req];	if(!ids)
		return Promise.reject(new Error("Cannot find module '" + req + "'."));
	return Promise.all(ids.slice(1).map(__webpack_require__.e)).then(function() {
		return __webpack_require__(ids[0]);
	});
};

Steps to reproduce:

• Create a new Ionic project.
• Add 2 pages, one for the RootModule and one which gets lazy loaded.
• Push to the lazy loaded page

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Ionic Framework Version: 3.0.0-beta.2
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.2.2
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v7.6.0

[Manduro]

I'm having a similar issue here, the same function errors. ionic-team/ionic-app-scripts#848.

[danbucholtz]

@Daskus1,

How can I reproduce this? Can you do me a favor and open node_modules/ionic-angular/index.js and add a console.log('deepLinkConfig: ', deepLinkConfig); at the top of the IonicModule.forRoot function call. It seems like the @IonicPage() config is getting corrupted somehow. We have a lot of tests around this stuff so I am surprised. Once we identify what the issue is, I'll add some additional tests.

CC: @Manduro please do the same and share here.

Thanks,
Dan

[Daskus1]

@danbucholtz I added JSON.stringify to the console.log, and it outputs the following:

deepLinkConfig:  {"links":[
(...)
{  
   "loadChildren":"..pagesloginlogin.module#LoginPageModule",
   "name":"LoginPage",
   "segment":null,
   "priority":"low",
   "defaultHistory":[]
},
(...)
{  
   "loadChildren":"..pageswelcomewelcome.module#WelcomePageModule",
   "name":"WelcomePage",
   "segment":null,
   "priority":"low",
   "defaultHistory":[]
},
(...)
]}

But it seems like there is an issue with the path. All paths with either a 't', 'r', or 'f' as first character have a backslash. I think that windows is making trouble here with double backslash, but I'm not sure.
Here an example:

{  
   "loadChildren":"..pages\tabs\tabs.module#TabsPageModule",
   "name":"TabsPage",
   "segment":null,
   "priority":"low",
   "defaultHistory":[  

   ]
}

EDIT: In the outputted object it looks like this:
"..pages abs abs.module#TabsPageModule"
The same for: "..pages\reminder\reminder-new.module#ReminderNewPageModule"

Idk what you could do to reproduce this since I get this errors in every project, even in a totally new generated one.

Hope this helps, if you need more info I'm happy to help.

[Daskus1]

After adding the following code at the top of IonicModule.forRoot in node_modules/ionic-angular/index.js it finds a match in the map, but then throws the same error as @Manduro gets in ionic-team/ionic-app-scripts#848.
ERROR TypeError: undefined is not a function

for(var i=0; i<deepLinkConfig.links.length; i++){
  if(deepLinkConfig.links[i].loadChildren === "..pagesloginlogin.module#LoginPageModule"){
    deepLinkConfig.links[i].loadChildren = "..\\pages\\login\\login.module#LoginPageModule";
  }
}

[roblouie]

Fyi, if this helps, seems to be a Windows only issue. I was able to create a working app on OSX, but get this same error using the exact same code on Windows.

[Manduro]

@danbucholtz @Daskus1 So let's handle the undefined is not a function as a separate issue to this one, as this issue seems to be related to paths on Windows. I'm posting my deeplinkconfig output there.

[alfabetagama]

Quick fix in node_modules@ionic\app-scripts\dist\deep-linking\util.js

replace backslashes with forward slashes in userlandModulePath

function convertDeepLinkEntryToJsObjectString(entry) {
    entry.userlandModulePath = entry.userlandModulePath.replace(/\\/g, '/');
    var defaultHistoryWithQuotes = entry.defaultHistory.map(function (defaultHistoryEntry) { return "'" + defaultHistoryEntry + "'"; });
    var segmentString = entry.segment && entry.segment.length ? "'" + entry.segment + "'" : null;
    return "{ loadChildren: '" + entry.userlandModulePath + LOAD_CHILDREN_SEPARATOR + entry.className + "', name: '" + entry.name + "', segment: " + segmentString + ", priority: '" + entry.priority + "', defaultHistory: [" + defaultHistoryWithQuotes.join(', ') + "] }";
}

[danbucholtz]

This is fixed in 1.2.3. npm install @ionic/app-scripts@latest.

Thanks,
Dan

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.