Ionic-framework: How can I use ionic 3.0 in angular 2 project ?

[wuzhouyang]

I can see the branch 3.0 . And I want try to use it in my angular 2 project because I want to achieve the lazy load . Do you have any post to show how to start to use the ionic 3.0 ?

[leo6104]

Unfortunately, there is no way to use 3.0 in angular 2 because the branch 3.0 is focused on angular 4 compatibility.
the comment

[wuzhouyang]

I can't see any articles to show how to use ionic 3.0 in angular 4 . Could you show me more informations ? @leo6104

[graphefruit]

@wuzhouyang Ionic3 is not finaly out, just the CLI for it.

Wait for the release of ionic3 then there will be a document for sure.

[mburger81]

@wuzhouyang close this thread and follow #10857

[brandyscarney]

We don't really have any public documentation on using 3.0 yet since we're still working on it, but if you're eager to test you can start a new app based on Ionic 3.0 by running this command, where sidemenuApp is the name of your app and sidemenu is the name of the starter to use:

ionic start sidemenuApp sidemenu --v2 --starterBranchName 3 --wrapperBranchName 3

For updating your existing app, I've started the following steps which may be incomplete (click the dropdown arrow below):

1. Update your package.json to match the following dependencies, remove the existing node_modules directory, and then run npm install:

"dependencies": {
  "@angular/common": "4.0.0-rc.5",
  "@angular/compiler": "4.0.0-rc.5",
  "@angular/compiler-cli": "4.0.0-rc.5",
  "@angular/core": "4.0.0-rc.5",
  "@angular/forms": "4.0.0-rc.5",
  "@angular/http": "4.0.0-rc.5",
  "@angular/platform-browser": "4.0.0-rc.5",
  "@angular/platform-browser-dynamic": "4.0.0-rc.5",
  "@angular/platform-server": "4.0.0-rc.5",
  "@ionic/storage": "2.0.0",
  "ionic-angular": "2.1.0-201703201712",
  "ionic-native": "2.8.1",
  "ionicons": "3.0.0",
  "rxjs": "5.1.1",
  "sw-toolbox": "3.4.0",
  "zone.js": "^0.8.4"
},
"devDependencies": {
  "@ionic/app-scripts": "1.1.4-201703201522",
  "typescript": "~2.2.1"
}

1. Import the BrowserModule in your app/app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';

then add it to the imports in the same file:

imports: [
  BrowserModule,
  IonicModule.forRoot(MyApp)
],

1. Add a module for each page in your app. For our example we will use a page called home located at pages/home. You should name the file based on your directory, ours will be home.module.ts. Your structure should look similar to the following after adding this page:

src/
├── app
│   ├── app.component.ts
│   ├── app.html
│   └── app.module.ts
└── pages
    └── home
        ├── home.html
        ├── home.module.ts
        ├── home.scss
        └── home.ts

1. In your module file, ours being the home.module.ts file, paste the following code:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';

import { HomePage } from './home';

@NgModule({
  declarations: [
    HomePage,
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
  ],
  entryComponents: [
    HomePage,
  ]
})
export class HomePageModule {}

Where HomePage is the name of your page’s class, and HomePageModule is the name of this module.

1. Next, we’re going to add the HomePageModule as an import to the main src/app/app.module.ts file. Let’s take a look at how it currently looks first:

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

We’re going to remove every reference to HomePage and then add HomePageModule to imports:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { HomePageModule } from '../pages/home/home.module';

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HomePageModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

1. Make sure to repeat steps 3-5 for any other pages, adding the module to the imports array.

2. Review the changelog for a full overview of what has changed in Angular 4.x:
   https://github.com/angular/angular/blob/master/CHANGELOG.md

You can also take a look at the conference app branch here:

https://github.com/driftyco/ionic-conference-app/tree/lazy-load

Or the starter branches here:
https://github.com/driftyco/ionic2-app-base/tree/3
https://github.com/driftyco/ionic2-starter-tabs/tree/3
https://github.com/driftyco/ionic2-starter-sidemenu/tree/3
https://github.com/driftyco/ionic2-starter-tutorial/tree/3
https://github.com/driftyco/ionic2-starter-blank/tree/3

[mburger81]

@brandyscarney for your information, I tested
ionic start sidemenuApp sidemenu --v2 --starterBranchName 3 --wrapperBranchName 3
But this with at least ionic cli v3.beta4 does not work. It installs a simple ionic2 sidemenu app

[brandyscarney]

@mburger81 Unfortunately it looks like those got removed in the migration to CLI 3, but I've let my team member know and he will be adding them back in. You can also download the projects (app-base and whichever starter you'd like) and then copy the folders from the starter into the app-base folder and merge the folders. Then, run npm install and it should work the same (just not as easy as running one command). 🙂

[mburger81]

@brandyscarney I know thx, I just wanted to mention it 👍

[AmitMY]

@brandyscarney Thanks, migration went pretty smooth, but unfortunately, the v3 in question is pre-Wednesday update which fixed a bug and added a nice feature I would like to use. (2.1.0-201703201712)

Where can I follow v3 nightly releases? If I wouldn't know better, I would say that this version is v2, because of the 2.1.0.

Do you use any tag like ionic-angular@beta or something like that for the latest version?

• Following latest version would also be great because it would (hopefully) use 4.0.0 and not 4.0.0-rc.5

Note:
I found that: 2.3.0-201703231941 is an updated v3 version, but still the question remains: Is there a tag or something to use?

[mburger81]

@AmitMY in my opinion for not there isn't any tag or something else, the last nightly is rc.5 the nightly for 2.2. some was and others not. I think you have to check commits and package.json to check it.

I think we can use 2.3.0-201703231941 for our test. The only one thing I'm missing, the nightly documentation https://ionicframework.com/docs/v2/nightly/api/navigation/DeepLinker/ is not the documenataion) for the last nightly :smile: but we can have look for example in the deep-linker.d.ts files for explanation! :+1:

[brandyscarney]

@AmitMY The nightly version was a bit confusing when we were maintaining a 3.0 branch, but that branch is now merged into master. The latest nightly should always be off of what's in master (or a branch that includes master). It is under the @nightly tag, meaning you can install the latest nightly:

npm install --save --save-exact ionic-angular@nightly

Where can I follow v3 nightly releases? If I wouldn't know better, I would say that this version is v2, because of the 2.1.0.

They will be released under the nightly tag. We could probably do a better job at numbering the versions, but when we release a nightly it just grabs the version of the package.json and appends a timestamp, which is why it was 2.1.0- for awhile because the 3.0 branch wasn't updated with master so it was using its package.json file containing version 2.1.0.

I personally would recommend locking down the version number that you know works, instead of doing this:

"ionic-angular": "nightly",

You can also type npm view ionic-angular in a terminal to see the nightly versions.

@mburger81 I'll look into the documentation. I think it needs to be updated. 😳

[brandyscarney]

Just to update this issue, we have started a document for testing 3.0.0 here:

https://docs.google.com/document/d/1vGokwMXPQItZmTHZQbTO4qwj_SQymFhRS_nJmiH0K3w/edit?usp=sharing

We are still editing it, but it should be public. Please let me know if you are not able to view it!

[mburger81]

Oh yes man!!! I had a look to the documentation and it looks geat! Finally we will have LazyLoading ❤️
Great work to the Ionic Team!!!
I'm sorry the next few days we are very busy to release a next version of our app, after that I will have a look to it and begin the migration!
I'm very very exited.

FYI I'm still waiting for ionic cli 3beta.5 which closes some bugs I discovered a 3 weeks ago. 👍

Thx IonicTeam

[mburger81]

@AmitMY did you see this? 😄

[Daskus1]

I am getting the following error when I push to a lazy loaded page:
Error: Cannot find module '..pageshomehome.module'.
I tried with multiple apps (my own, conference-app - lazy-load branch, blank app). Is it possible that this error occurs only on windows?
Have you guys been able to port your app to v3?

Ionic info:

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

[AmitMY]

@mburger81 Yeah man thanks! We were actually having a similar chat in a different issue. (https://github.com/driftyco/ionic/issues/10912)

@Daskus1

• I successfully ported my app (on a windows machine) to ionic v3.
• For your case, what is "..pages..." I think you need ../pages/home/home.module
• Second, don't forget to export components you use that belong to one module but you are using in another (using angular module exports array)

One thing to note - while in development, I used the nightly versions, so I created all of the ngModules myself, perhaps the ..pageshomehome thing is generated and just missing the slashes

[Daskus1]

I think "..pages..." is autogenerated by ionic when trying to find out which module to load when I call nav.push('LoginPage'). I tried it also with a blank application without really any content and get the same error...
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. @AmitMY as you mentioned the slashes are missing, but I can't really figure out why...

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]);
    });
};

[AmitMY]

Hmm.. that is interesting, and a bit over my head. I can only recommend you to open a new issue, as this here is closed.

[ionitron-bot[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.