webpackと一緒にバンドルされているAngular2アプリケーションで作業しています。すべてがうまく動作します。しかし、このバンドルされたアプリケーションは、独立して出荷され、実行時に、アプリケーションをブートストラップする前に、私は私のアプリケーションにバンドルしたモジュールの1つに他のNgModuleを指定する必要があります。基本的にはindex.htmlに含まれている2つのバンドルと考えると、バンドル1はバンドル2になります。バンドル2のみがアプリケーションをブートストラップします。だから私はいくつかの実験を行いましたが、これについていくつか光を当てるためにあなたと共有したいと思います(私はむしろ汚い、完全に間違ったアプローチをとっているかもしれませんので、もしそうならば修正してください。しかし、それが動作する唯一の方法です。)。必要なのは、蒸散中に何もしないでください。要件は、私のindex.htmlに1つまたは複数のバンドルを含めることができ、お互いの事前知識なしに実際のアプリケーションに繋ぐことができるということです。角度アプリケーション内に別のWebpackバンドルを動的に組み込みます。
私が最初にこれをやっている理由は、他の開発者が拡張機能をインストールすることでコードにフックできるプラットフォームで作業するためです。これは、私が最初のバンドルを提供することを意味します。これは、他のバンドルの知識がなくても、時間のかかるものです。これはAngularJSでは簡単でしたが、Angular2以降に移動すると、もうこれほど簡単ではありません。
私は次のようなアプローチでアプリをブートストラップ遅らせるために管理:main.tsで
:
window["platformBrowserDynamicRef"] = platformBrowserDynamic();
window["appModule"] = AppModule;
これは正常に動作し、私は手動でブートストラップを呼び出すとき、アプリがうまく起動します。 私は別のアプリケーションとして独立して動作する別のバンドルを作成しました。
上記のような暗黙的な配列にコンポーネントをインポートしてバンドルしようとすると、アプリケーションをブートストラップするとエラーが発生します。モジュールを有する
window["app"].modulesImport.push(CommonModule);
window["app"].modulesImport.push(FormsModule);
window["app"].modulesImport.push(BrowserModule);
window["app"].modulesImport.push(NgGridModule);
window["app"].modulesImport.push(ReactiveFormsModule);
window["app"].modulesImport.push(BrowserAnimationsModule);
window["app"].modulesImport.push(HttpModule);
@NgModule({
imports: window["app"].modulesImport,
declarations: [
DYNAMIC_DIRECTIVES,
PropertyFilterPipe,
PropertyDataTypeFilterPipe,
LanguageFilterPipe,
PropertyNameBlackListPipe
],
exports: [
DYNAMIC_DIRECTIVES,
CommonModule,
FormsModule,
HttpModule
]
})
export class PartsModule {
static forRoot()
{
return {
ngModule: PartsModule,
providers: [ ], // not used here, but if singleton needed
};
}
}
暗黙の配列が正常に動作します、しかし、すぐに私は私の他のバンドルからのモジュールを追加すると、私は次のエラーを取得するには:
Uncaught Error: Unexpected value 'ExtensionsModule' imported by the module 'PartsModule'. Please add a @NgModule annotation.
at syntaxError (http://localhost:3002/dist/app.bundle.js:43864:34) [<root>]
at http://localhost:3002/dist/app.bundle.js:56319:44 [<root>]
at Array.forEach (native) [<root>]
at CompileMetadataResolver.getNgModuleMetadata (http://localhost:3002/dist/app.bundle.js:56302:49) [<root>]
at CompileMetadataResolver.getNgModuleSummary (http://localhost:3002/dist/app.bundle.js:56244:52) [<root>]
at http://localhost:3002/dist/app.bundle.js:56317:72 [<root>]
at Array.forEach (native) [<root>]
at CompileMetadataResolver.getNgModuleMetadata (http://localhost:3002/dist/app.bundle.js:56302:49) [<root>]
at CompileMetadataResolver.getNgModuleSummary (http://localhost:3002/dist/app.bundle.js:56244:52) [<root>]
at http://localhost:3002/dist/app.bundle.js:56317:72 [<root>]
at Array.forEach (native) [<root>]
at CompileMetadataResolver.getNgModuleMetadata (http://localhost:3002/dist/app.bundle.js:56302:49) [<root>]
at JitCompiler._loadModules (http://localhost:3002/dist/app.bundle.js:67404:64) [<root>]
at JitCompiler._compileModuleAndComponents (http://localhost:3002/dist/app.bundle.js:67363:52) [<root>]
私もIBMアカデミーコンパイルしようとしましたどちらも機能しないExtensionsModule。 私はJitCompilerを使って実行時にコンポーネントを動的にコンパイルしてみました。しかし、同じエラー。
アプリのブースラップ中または蒸散中にコンポーネントが装飾されていますか? 私の暗黙の配列のモジュールを見ていると、私はそれらが装飾されているのがわかりますが、私はそうではありません。そのwebpackはデコレータメソッドの呼び出しコードを挿入していますか?デコレータの情報が蒸散中に失われたと仮定して、一時的に保管しておく必要があります。私はhere.Maybeから前方NgModule注釈機能を移動する方法についてのポインタを探してイムが良い場所だろうと思い
(最初の要素がデコレータの配列を含んでいないようにそのextensionsmoduleに注意してください)始めること。しかしどこでもそれを見つけることができませんでした。私は、JSファイルでそれをロードしようと、最初に私はこのエラーを取得していますルータを使用して、遅延ロードのアプローチを試みた問題に、より掘り
EDIT
(ネットワークタブがあることを示しますそれは)ファイルに対する要求を発行したことがない:
const appRoutes: Routes = [
{
path: 'edit-entity/:type/:id/:culture',
component: EntityEditor,
resolve: {
entity: EntityResolver,
navigation: NavigationResolver
},
data: { shouldDetach: true},
loadChildren: "/dist/extensions.bundle.js#ExtensionsBundle",
},
{
path: '',
component: Dashboard,
resolve: {
navigation: NavigationResolver
},
data: { shouldDetach: true}
}
];
は、次のエラーで問題解決: は
を「名前ExtensionsModule.jsとモジュールが見つかりませんでした」第二に、私が試してみましたこのようloadChildren機能を使用して: は私annontationsが呼ばれなかったので、多分誤りがあったと思っ
app.bundle.js:1548 ERROR Error: Uncaught (in promise): Error: No NgModule metadata found for 'ExtensionsModule'.
Error: No NgModule metadata found for 'ExtensionsModule'.
at NgModuleResolver.resolve (app.bundle.js:55709) [angular]
at CompileMetadataResolver.getNgModuleMetadata (app.bundle.js:56288) [angular]
at JitCompiler._loadModules (app.bundle.js:67404) [angular]
at JitCompiler._compileModuleAndComponents (app.bundle.js:67363) [angular]
at JitCompiler.compileModuleAsync (app.bundle.js:67325) [angular]
at ModuleBoundCompiler.compileModuleAsync (app.bundle.js:67693) [angular]
at MergeMapSubscriber.project (app.bundle.js:30608) [angular]
at MergeMapSubscriber._tryNext (app.bundle.js:69744) [angular]
at MergeMapSubscriber._next (app.bundle.js:69734) [angular]
at MergeMapSubscriber.Subscriber.next (app.bundle.js:14584) [angular]
at ScalarObservable._subscribe (app.bundle.js:69206) [angular]
at ScalarObservable.Observable.subscribe (app.bundle.js:118) [angular]
at MergeMapOperator.call (app.bundle.js:69709) [angular]
at Observable.subscribe (app.bundle.js:115) [angular]
at NgModuleResolver.resolve (app.bundle.js:55709) [angular]
at CompileMetadataResolver.getNgModuleMetadata (app.bundle.js:56288) [angular]
at JitCompiler._loadModules (app.bundle.js:67404) [angular]
at JitCompiler._compileModuleAndComponents (app.bundle.js:67363) [angular]
at JitCompiler.compileModuleAsync (app.bundle.js:67325) [angular]
at ModuleBoundCompiler.compileModuleAsync (app.bundle.js:67693) [angular]
at MergeMapSubscriber.project (app.bundle.js:30608) [angular]
at MergeMapSubscriber._tryNext (app.bundle.js:69744) [angular]
at MergeMapSubscriber._next (app.bundle.js:69734) [angular]
at MergeMapSubscriber.Subscriber.next (app.bundle.js:14584) [angular]
at ScalarObservable._subscribe (app.bundle.js:69206) [angular]
at ScalarObservable.Observable.subscribe (app.bundle.js:118) [angular]
at MergeMapOperator.call (app.bundle.js:69709) [angular]
at Observable.subscribe (app.bundle.js:115) [angular]
at resolvePromise (app.bundle.js:77503) [angular]
at resolvePromise (app.bundle.js:77488) [angular]
at :3000/dist/app.bundle.js:77537:17 [angular]
at Object.onInvokeTask (app.bundle.js:4599) [angular]
at ZoneDelegate.invokeTask (app.bundle.js:77289) [angular]
at Zone.runTask (app.bundle.js:77179) [<root> => angular]
at drainMicroTaskQueue (app.bundle.js:77433) [<root>]
at HTMLDivElement.ZoneTask.invoke (app.bundle.js:77364) [<root>]
EDIT:
const appRoutes: Routes = [
{
path: 'edit-entity/:type/:id/:culture',
component: EntityEditor,
resolve: {
entity: EntityResolver,
navigation: NavigationResolver
},
data: { shouldDetach: true},
loadChildren:() => {
//"/dist/extensions.bundle.js#ExtensionsModule",
// return System.import('./dynamic.module').then((comp: any) => {
// return comp.otherExport;
// });
return window["lux"].modulesLazyImport[0];
}
},
{
path: '',
component: Dashboard,
resolve: {
navigation: NavigationResolver
},
data: { shouldDetach: true}
}
];
はで解決します。そうであるかどうかはわかりません。私はそれにES5に行き、以下のような暗黙リストにコンポーネントをプッシュすることになりました。 component.module.tsの宣言部分にコンポーネントをプッシュしようとすると、同じエラーが発生します。
var HelloWorldComponent = function() {
};
HelloWorldComponent.annotations = [
new ng.core.Component({
selector: 'hello-world',
template: '<h1>Hello World!</h1>',
})
];
window["lux"].componentsLazyImport.push(HelloWorldComponent);
これはAngular 4.0.0のバグですか、それともプラグインのメカニズムを作成できないのですか?
敬具 モルテン
私はあなたのような同じプラグインの仕組みに取り組んでおり、あなたと同じ問題があります。 4日後、私は何か解決策を見つけられませんでした。何かを見つけましたか? – moohkooh
はい、私は答えを見つけただけで答えました。 –
[ランタイム・ロード・コンポーネントまたはモジュールをangular2のモジュールに複製する可能性があります](https://stackoverflow.com/questions/43630165/runtime-load-components-or-modules-into-a-module-in-angular2) –