Question

我正在尝试使用AngularJS＆amp; amp;角（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应用程序作为节点包导入我的项目中，但我想我必须对导出做一些改进。

我想导入根组件，我是否还要导入根模块？

尝试使用混合AngularJS / Angular应用程序时出错

1 个答案: