嘗試使用混合AngularJS / Angular應用程序時出錯

Question

我試圖使用AngularJS和Angular做一個混合應用程序（2）。 我已經有一個很大的AngularJS應用程序，我只想使用Angular應用程序中的一個組件。

使用https://angular.io/docs/ts/latest/guide/upgrade.html ，我創建了兩個新文件

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() {}
}

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

我刪除了舊的bootstrap.js文件

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

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

我的webpack構建的條目現在是main.ts。

當我啟動我的應用程序時，我有一個問題：

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

有人知道為什么嗎？

這是tsconfig.json，也許它可以幫助

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

文件結構

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

Answer 1

好吧，我不知道為什么導入不起作用，但是當我在main.ts文件中設置所有內容時，它可以工作

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

我的AngularJS是用Angular引導的。

現在我正在嘗試將我的Angular應用程序作為節點包導入我的項目中，但我想我必須對導出做一些改進。

我想導入根組件，我是否還要導入根模塊？