webpack과 함께 번들로 제공되는 Angular2 응용 프로그램에서 작업하고 있습니다. 모든 것이 잘 작동합니다. 그러나이 묶음 응용 프로그램은 독립적으로 선적 될 것이며 런타임에 응용 프로그램을 부트 스트랩하기 전에 다른 응용 프로그램에 번들로 포함 된 모듈 중 하나에 다른 NgModule을 지정해야합니다. 기본적으로 index.html에 포함 된 두 개의 번들로 생각하고 부트 스트랩하면 번들 1이 번들 2가됩니다. 번들 2 만 앱을 부트 스트랩합니다. 그래서 몇 가지 실험을 해본 결과이 점을 밝혀 내기 위해 여러분과 함께 나누고 싶습니다. (나는 오히려 더럽고 완전히 잘못된 접근법을 택할 수도 있습니다. 그렇다면 올바르게 수정하십시오. 그래도 작동 할 수있는 유일한 방법입니다.). 단지 증류 중에는 아무것도하지 않아야한다는 것입니다. 요구 사항은 index.html에 하나 이상의 번들을 포함 할 수 있으며 서로의 사전 지식없이 실제 앱에 연결될 수 있다는 것입니다.각도 응용 프로그램 내에 다른 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>]
나는 또한 컴파일 AOT에 시도한를 ExtensionsModule이 작동하지 않습니다. JitCompiler를 사용하여 런타임에 컴포넌트를 동적으로 컴파일 해 보았습니다. 그래도 같은 오류.
앱을 부 풀리거나 추출하는 동안 구성 요소가 장식되어 있습니까? 내 암시 적 배열의 모듈을 엿보는 것은 장식되어 있지만 내 것이 아닌 것을 볼 수 있습니다. 그 webpack은 데코레이터 메소드의 호출 코드를 삽입하고 있습니까? 데코레이터 정보가 번역 중에 손실된다고 가정합니다. 그래서 어딘가에 임시 보관해야하므로 어딘가에 보관할 수 있습니다.
나는 임은 NgModule 주석 기능이 좋은 장소가 될 것입니다 하겠군에서 앞으로 이동하는 방법에 대한 포인터를 찾는 것 같아요 (첫 번째 요소는 장식 배열을 포함하지 않는 한에서 그 extensionsmodule주의) 시작한다. 그래도 어디서나 찾을 수 없습니다.내가 (A JS 파일을로드하려고이 오류를 받고 있어요 어디 첫째, 네트워크 탭을 보여줍니다
편집
더 문제에 내가 라우터를 사용하여 게으른 로딩 방식을 시도했습니다 파고 이 파일에 대한 요청)을 발행하지 : 는
"이름 ExtensionsModule.js와 모듈을 찾을 수 없습니다"두 번째로 내가 시도 : 해결 다음과 같은 오류에
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}
}
];
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>]
편집 :
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로 가서 구성 요소를 내 암시 적 목록에 밀어 넣기를 원했다. 컴포넌트를 parts.module.ts의 선언 부분으로 푸시하려고 시도한 후에도 동일한 오류가 발생합니다.
var HelloWorldComponent = function() {
};
HelloWorldComponent.annotations = [
new ng.core.Component({
selector: 'hello-world',
template: '<h1>Hello World!</h1>',
})
];
window["lux"].componentsLazyImport.push(HelloWorldComponent);
이렇게 이것은 4.0.0의 버그입니까, 아니면 플러그인 메커니즘을 만들 수 있습니까?
안부 모르 텐
나는 당신과 같은 플러그인 메커니즘을 사용하고 있으며 같은 문제가 있습니다. 4 일 후에 나는 어떤 해결책도 찾지 못했습니다. 뭔가 찾았 니? – moohkooh
예 답변을 찾았지만 답장했습니다. –
[angular2의 모듈에 런타임로드 구성 요소 또는 모듈이 중복 될 수 있습니다] (https://stackoverflow.com/questions/43630165/runtime-load-components-or-modules-into-a-module-in-angular2) –