[英]Error trying to do an hybrid AngularJS/Angular app
Im trying to do an hybrid app using AngularJS & Angular(2). 我试图使用AngularJS和Angular做一个混合应用程序(2)。 I already have a big AngularJS app and I just want to use a component from an Angular app. 我已经有一个很大的AngularJS应用程序,我只想使用Angular应用程序中的一个组件。
Using https://angular.io/docs/ts/latest/guide/upgrade.html , I have created two new files 使用https://angular.io/docs/ts/latest/guide/upgrade.html ,我创建了两个新文件
app.module.ts 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 和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 我删除了旧的bootstrap.js文件
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 . 我的webpack构建的条目现在是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 这是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"
]
}
Files structure 文件结构
/
client
app
...
app.js
app.module.ts
main.ts
gulpfile.js
webpack.config.js
Well I don't know why the import did not work but when I set everything in the main.ts file, it works 好吧,我不知道为什么导入不起作用,但是当我在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 });
});
My AngularJS is bootstrapped with Angular. 我的AngularJS是用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. 现在我正在尝试将我的Angular应用程序作为节点包导入我的项目中,但我想我必须对导出做一些改进。
I would like to import the root component, do I have to import the root module as well ? 我想导入根组件,我是否还要导入根模块?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.