Error trying to do an hybrid AngularJS/Angular app

Question

Im trying to do an hybrid app using AngularJS & Angular(2). I already have a big AngularJS app and I just want to use a component from an Angular app.

Using https://angular.io/docs/ts/latest/guide/upgrade.html , I have created two new files

app.module.ts

import { UpgradeModule } from '@angular/upgrade/static';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule,
  ],
})
export class AppModule {
  ngDoBootstrap() {}
}

and main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UpgradeModule } from '@angular/upgrade/static';
import { AppModule } from './app.module';
import App from './app.js';

platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
  upgrade.bootstrap(document.documentElement, [App]);
});

and I have deleted the old bootstrap.js file

import angular from 'angular';
import App from './app';

angular.element(function() {
  angular.bootstrap(document, [App], { strictDi: true });
});

The entry of my webpack build is now main.ts .

When I start my app, I have ana issue :

ERROR in ./client/app/main.ts
Module not found: Error: Can't resolve './app.module' in '/home/bsousa/Projects/S6/client/app'
 @ ./client/app/main.ts 5:21-44

Do someone know why ?

Here is the tsconfig.json, maybe it can help

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "allowJs": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "allowUnreachableCode": true
  },
  "exclude": [
    "node_modules"
  ]
}

Files structure

/
   client
      app
         ...
         app.js
         app.module.ts
         main.ts
   gulpfile.js
   webpack.config.js

Answer 1

Well I don't know why the import did not work but when I set everything in the main.ts file, it works

import 'zone.js';
import 'angular';
import App from './app.js';
import { NgModule } from '@angular/core';
import { UpgradeModule } from '@angular/upgrade/static';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule,
  ],
})
export class AppModule {
  ngDoBootstrap() {
  }
}

platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
  upgrade.bootstrap(document.documentElement, [App.name], { strictDi: true });
});

My AngularJS is bootstrapped with Angular.

Now I'm trying to import my Angular app into my project as a node package but I think I have to do some improvements with the export.

I would like to import the root component, do I have to import the root module as well ?