带有来自外部模块

时间:2017-04-11 07:05:44

标签: angular typescript

编辑于11-4-2017

想出我正在尝试做的事情(可以从this repository的代码中看到)。显然,其他因素导致了这个问题。当我自己运行标准应用程序时,它编译得很好。那么,在打包之后,它的主要组件无法解决的原因是什么呢?

-----

因此我们正在使用Angular(v4.x)构建应用程序。它从服务器接收一些有效负载,其中包含页面上存在的控件的定义,解析该有效负载,然后创建所有这些控件。控件的一些示例是文本框和下拉列表。控件是作为组件实现的,因此我们有一个TextboxComponent和一个DropdownListComponent

我们的想法是构建应用程序的标准版本。客户应该能够自定义该标准版本并使用其他控件创建自己的自定义应用程序。例如,他们可能会定义并实现ZipcodeComponent。为了能够实现这一点,我做了以下事情:

  • 我使用npm pack创建了标准应用程序的npm包。我们称之为标准包。
  • 我创建了一个新的Angular应用程序。
  • 我使用npm install安装标准软件包作为新应用程序的依赖项。

我想我现在可以使用标准软件包中的bootstrap组件作为自定义应用程序的引导组件。但是,我在尝试构建自定义应用程序时收到以下错误消息:

Error in ./src/main.ts
Module not found: Error: Can't resolve 'standard-app' in 'Some\Path\src' @ ./src/main.ts 5:23-48

标准应用程序中的main.ts如下所示:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app/app.module';

if (process.env.ENV === 'production') {
    enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

自定义应用程序中的main.ts文件如下所示:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { CustomAppModule } from './app/customapp.module';

if (process.env.ENV === 'production') {
    enableProdMode();
}

platformBrowserDynamic().bootstrapModule(CustomAppModule);

标准应用程序的app.module.ts如下所示:

const appRoutes: Routes = [
    { path: '', component: MainComponent },
    { path: 'login', component: LoginComponent },
    { path: '**', redirectTo: '/', pathMatch: 'full' }
]
@NgModule({
    imports: [ /* some imports */ ],
    entryComponents: [
        MainComponent,
        // other components
    ],
    declarations: [
        MainComponent, AppComponent, LoginComponent,
        // other components
    ],
    bootstrap: [ AppComponent ],
    providers: [ /* some providers */ ]
})
export class AppModule { }

最后,来自自定义应用程序的customapp.module.ts

import { AppModule as StandardAppModule } from 'standard-app';
import { AppComponent as StandardAppBootstrapComponent } from 'standard-app';
import { CustomAppComponent } from "./customapp.component";

@NgModule({
    imports: [ StandardAppModule ],
    entryComponents: [],
    declarations: [ CustomAppComponent ],
    bootstrap: [ StandardAppBootstrapComponent ],
    providers: []
})
export class CustomModule { }

我有一种感觉,我在这里遗漏了一些微不足道的东西,但我不知道它会是什么。请注意bootstrap文件中使用标准应用程序中的引导程序组件的customapp.module.ts条目。任何人都可以向我解释我在这里缺少的东西吗?

提前致谢!

0 个答案:

没有答案